小编CZo*_*rio的帖子

感谢下面的所有帮助,解决方案.

我是网络开发的新手,我正在尝试重建一个网站来练习我的CSS.

问题网站是http://www.divecarib.com.如果向下滚动到该主页上的图片,您会注意到它们在悬停时"淡化".我如何实现这种淡化？使用不透明度可以使背景图像通过,而不是在该网站上实现的方式.

感谢您的帮助!

下面是我的淡入淡出尝试...不包括原始帖子中的代码,因为我认为这是无关紧要的,因为我走错了路.

.fade {
   opacity: 1;
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
   }

   .fade:hover {
      opacity: 0.7;
      }

---解决方案(至少我是怎么做的 - 取自 http://jsbin.com/igahay/1/edit?html,output)-----

    <div class=picSet>
            <figure class="tint">
                <p id="#p1">Student in training</p>
                <p id="#p2" style="position: absolute;top: 36px; color: white;">SKAT crew doing open water training</p>
                <img id=pic1  src="Media/pic1.jpg" />
            </figure>
    </div>

.tint {
    position: relative;
    float: left;
    margin: 3px;
    cursor: pointer;
}

.tint:before {
    content: "";
    display: block;
    position: absolute;
    top: 0; …