我有一个图像，并在悬停它时会出现新的div。如何使用完全相同大小的div

Question

您可以看到我正在制作的网站www.multia.in/mthemes。功能很好但是我需要使用与图像相当的悬停div并且应该适用于所有屏幕分辨率。

如何实现这一目标。 任何帮助???

Answer 1

我看过你的网站，看起来叠加层并没有出现在每张图片的顶部。

在这个FIDDLE中我制作了一个div，给它一个相同大小的背景图像，隐藏了div的内容，然后在悬停时显示了内容。

CSS

.mydiv {
  width: 200px;
  height: 200px;
  background: url('http://upload.wikimedia.org/wikipedia/en/d/d4/Mickey_Mouse.png');
  background-size: 200px, 200px;
  background-repeat: no-repeat;
}
.overlay {
  width: 100%;
  height: 100%;
  background-color: red;
  opacity: .3;
  color: white;
  display: none;
  text-align: center;
  font-size: 28px;    
}
.mydiv:hover .overlay {
  display: block;
}
img {
  width: 200px;
  height: 200px;
}