На моей веб-странице я хочу поместить изображение таким образом, чтобы при наведении указателя мыши на это изображение появилась увеличенная версия.Показать увеличенное изображение, когда наведите курсор мыши на изображение
Обновленный решение CSS на основе дальнейшего объяснения требования в комментариях
<div class="effectback">
<img class="effectfront" src="https://farm8.staticflickr.com/7042/6873010155_d4160a32a2.jpg" />
</div>
attribution<br/>
https://secure.flickr.com/photos/[email protected]/6873010155/sizes/m/in/photostream/
.effectback {
display: block;
background: url('https://farm8.staticflickr.com/7042/6873010155_d4160a32a2_s.jpg') no-repeat;
margin: 0 auto;
}
.effectfront {
opacity: 0;
border: none;
margin: 0 auto;
}
.effectfront:hover {
opacity: 1;
transition: all 0.3s;
-webkit-transition: all 0.3s;
}
Оригинальное решение CSS на основе оригинального вопроса
CSS решение
.effectscale {
border: none;
margin: 0 auto;
}
.effectscale:hover {
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
transition: all 0.3s;
-webkit-transition: all 0.3s;
}
Спасибо. Однако у меня есть два изображения, одно изображение с более низким разрешением, другое - с более высоким разрешением. Я хочу, чтобы изображение с более низким разрешением помещалось на страницу, а затем, когда мышь мыши наводится над изображением, отображается версия с высоким разрешением. Как это сделать. – alancc
обновленная скрипка добавлена в ответ на ваш комментарий – Anton
Большое вам спасибо. Это выглядит очень хорошо. Есть ли способ сделать большое всплывающее изображение локализованным в том же центре, что и маленькое изображение? – alancc
<img src="..." onmouseover="this.width='someWidth'; this.height='someHeight'" onmouseout="this.width='originalWidth'; this.height='originalHeight'">
Просто попробуйте это:
<html>
<head>
<style>
.container{
overflow:hidden;
width:300px;/*change this to whatever you want*/
height:150px;/*change this to whatever you want*/
/*Of course, to get the desired effect, the size of the image "<img>" below must be larger than the size mentioned above*/
}
.container:hover{
overflow:visible
}
</style>
</head>
<body>
<div class='container'><img src='myImage.png'/></div>
</body>
</html>
Почему бы не использовать одинаковые проценты вместо фиксированных пикселей? Фиксированная ширина и высота имеют тенденцию создавать искаженные изображения, как только вы работаете с переменными изображениями/размерами. – SaschaM78
все, что вы должны сделать, это создать опрокидывание изображение, а когда местоположение мыши где-либо на изображение, установите рамку изображения на менее большой вы хотите, чтобы это было. – user2277872