文本出现在 :active (masonry)

Question

我正在尝试创建一种效果，其中 Masonry 构造的画廊的图像不透明度为 0.2，并在 :hover 时变为 1 不透明度。

然后，如果图像处于 :active 状态，它会淡入 0.7 不透明度并且图像位置 "Petra, Jordan" 出现在图像上。

除了文本部分，我目前的所有功能都可以正常工作。如何用 CSS 或 JS 创建这种效果？提前致谢。

<article class="bottomcontent"> 
        <h2>Visuals</h2>
    <section id="photos"></section>
</article>

<script>
$(document).ready(function() {
$('#photos').append( 
    '<img src="/visuals/visuals1.jpg" alt="Petra, Jordan"/>',
    '<img src="/visuals/visuals2.jpg" alt="img02"/>',
    '<img src="/visuals/visuals3.jpg" alt="img03"/>',
    '<img src="/visuals/visuals4.jpg" alt="img04"/>',
    '<img src="/visuals/visuals5.jpg" alt="img05"/>',
    '<img src="/visuals/visuals6.jpg" alt="img06"/>',
    '<img src="/visuals/visuals7.jpg" alt="img07"/>',
    '<img src="/visuals/visuals8.jpg" alt="img08"/>',
    '<img src="/visuals/visuals9.jpg" alt="img09"/>',
    '<img src="/visuals/visuals10.jpg" alt="img10"/>',
    '<img src="/visuals/visuals11.jpg" alt="img11"/>',
    '<img src="/visuals/visuals12.jpg" alt="img12"/>',
    '<img src="/visuals/visuals13.jpg" alt="img13"/>',
    '<img src="/visuals/visuals15.jpg" alt="img15"/>',
    '<img src="/visuals/visuals16.jpg" alt="img16"/>',
    '<img src="/visuals/visuals17.jpg" alt="img17"/>',
    '<img src="/visuals/visuals18.jpg" alt="img18"/>',
    '<img src="/visuals/visuals19.jpg" alt="img19"/>',
    '<img src="/visuals/visuals20.jpg" alt="img20"/>'
    );
  }
);    
</script>

CSS:

#photos img {
width: 100% !important;
height: auto !important;
opacity: 0.2;
filter: alpha(opacity=20);
}

#photos img:hover {
opacity: 1.0;
filter: alpha(opacity=100);
}

#photos img:active {
opacity: .5;
}

Answer 1

jsfiddle

您可以使用 :after 和 data- 来执行此操作。但是 img 不支持 :after 或 :before，所以我用 div 包裹了 img。这是代码：

      <div data-text="Display">
        <img id="text" style="width:100px;height:100px"/>
      </div>

      [data-text]{
           position:relative;
           display:inline-block;
      }
      [data-text] :hover{
           opacity:0.3;
      }
      [data-text]:hover::after{
           content:attr(data-text);
           position:relative;
           left:-65px;
           bottom:60px;
      }

文本出现在 :active (masonry)

Text appears on :active (masonry)

html

css

hover

opacity

masonry