鼠标悬停在图像上时显示放大的图片 [英] Show enlarged picture when mouse hover over an image

问题描述

在我的网页上，我想放置一个图片，当鼠标指针悬停在该图片上时，会出现放大版本。

基于进一步解释评论中的需求的更新CSS解决方案

http://jsfiddle.net/5sRTX/7/

 < div类= effectback > 
< img class =effectfrontsrc =https://farm8.staticflickr.com/7042/6873010155_d4160a32a2.jpg/> 
< / div> 
 
归因< br /> 
 https://secure.flickr.com/photos/34022876@N06/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; 
过渡：全部0.3s; 
 -webkit-transition：全部为0.3s; 
} 
  

原始css解决方案基于原始问题

CSS解决方案

http： // $ jsfiddle.net/ERh62/1/

  .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）; 
过渡：全部0.3s; 
 -webkit-transition：全部为0.3s; 
} 
  

On my webpage, I want to put an image such that when the mouse pointer hovers over that image, an enlarged version will appear.

解决方案

Updated CSS solution based on further explanation of the requirement in the comments

http://jsfiddle.net/5sRTX/7/

<div class="effectback">
<img class="effectfront" src="https://farm8.staticflickr.com/7042/6873010155_d4160a32a2.jpg" />
</div>

attribution<br/>
https://secure.flickr.com/photos/34022876@N06/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;
}

Original css solution based on the original question

CSS solution

http://jsfiddle.net/ERh62/1/

.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;
}

这篇关于鼠标悬停在图像上时显示放大的图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！