Question

我正在尝试创建一个效果，其中砌体构造的图库的图像为0.2不透明度，并且在1上不透明度：悬停。

然后，如果图像是：活动，它会消失为0.7不透明度和图像位置＆＃34;佩特拉，乔丹＆＃34;出现在图像上。

除了文本部分，我目前所有工作都按需要工作。如何使用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;
      }

文字显示在：活动（砖石）

1 个答案: