Question

我正在尝试创建一个图像网格，一旦你将鼠标悬停在一个图像上，它的网页标题就会出现在它下面，以及其周围的其他图像会以不透明度变化。

我已经设法创建了我想要的不透明鼠标悬停效果，但是当我将鼠标悬停在相应的图像上时，我现在无法显示页面标题图像。我希望这是有道理的

希望有人可以提供帮助。这是我的代码

HTML：

<div style="position: relative; left: 140px; top: 0px;">
        <img src="window.jpg" style="position: relative; top: 0; left: 0;"/>
    <div id="windowimages">
    <a class="image-one"></a><a href="https://example-site.com/music/">
      <img src="pic1.jpg/>
       <a class="image-two"></a><a href="https://example-site.com/dance/">
      <img 
    src="pic2.jgp"/>
       <a class="image-three"></a><a href="https://example-site.com/art/">
      <img 
    src="pic3.jpg"  />
       <a class="image-four"></a><a href="https://example-site.com/aboutus/">
      <img 
    src="pic4.jpg"/>
         </div>

CSS：

body {
}
#windowimages {
  position: absolute;
  left: 3px;
  top: 4px;
  font-size: 0;
  width: 198px;
  margin: 0 auto;
  padding:1px;
  overflow:hidden
}
 #windowimages img {
   width:90px;
  height:90px;
   margin: 3px;
   cursor:pointer;
  -webkit-transition:opacity 0.26s ease-out;   
  -moz-transition:opacity 0.26s ease-out;   
  -ms-transition:opacity 0.26s ease-out;   
  -o-transition:opacity 0.26s ease-out;   
   transition:opacity 2s ease-in-out;  
}

#windowimages:hover img {
  opacity:0.55;
}

#windowimages:hover img:hover {
  opacity:1;
}

Answer 1

如果我理解正确的话，您想要做的就是在悬停时为每张图片添加标题。

查看我写的这个例子：http://jsfiddle.net/arthurcamara/chbsL3pq/

添加标题的关键部分是.image:hover:after，您可以在上面和下面的代码中看到：

.grid:hover .image:hover:after {
    display: block;
    position: absolute;
    top: 5px;
    width: 90px;
    padding: 5px;
    content: attr(data-title);
    text-align: center;
    background-color: #333;
    color: #fff;
}

我也改变了你的标记，使其更具语义性。看看这个例子，让我知道是否有帮助：）

翻转图像，下面显示不同的图像

1 个答案: