当鼠标悬停在css3上时如何使图像显示在另一个图像上？ [英] How to make an image appear over another image when mouse hovers with css3?

问题描述

嘿，我希望放大镜或某些图像在本网站上的鼠标悬停时弹出另一张图片 - http ：//www.elegantthemes.com/gallery/ 当您将鼠标悬停在图片上方时，图片上方会出现图片。有人知道如何做到这一点吗？

不知道你是否需要任何代码，但这里是我的CSS标签：

  img {
 width：600px; 
 height：342px; 
 border-radius：1px; 
} 
  

解决方案

/ b>

HTML

 < div id =yourImage>< / div> 
  

CSS

  #yourImage {
 background-image：url（'image1.jpg'）; 
} 
 
 
 #yourImage：hover {
 background-image：url（'overimage.jpg'），url（'image1.jpg'）; 
} 
  

Hey I would like a magnifying glass or some image to pop over another image when on mouseover like this website - http://www.elegantthemes.com/gallery/ When you hover over an image an image appears over it. Does anyone know how to achieve this?

Not sure if you need any code but here's my css for the img tag:

img {
width: 600px;
height: 342px;
border-radius: 1px;
}

解决方案

You can do it with

HTML

<div id="yourImage" ></div>

CSS

#yourImage {
 background-image: url('image1.jpg');
}


#yourImage:hover {
 background-image: url('overimage.jpg'), url('image1.jpg');
}

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