剪影法丹

我的乐队的一些朋友最近经历了一次小的会员阵容变更。 他们需要替换主页上的照片。 我认为在此进行一些交互可能会很有趣。 我们使用了乐队成员的身影，这些人的身影在翻转后逐渐消失为真实的照片。

可能有很多方法可以做到这一点。。。这只是突然出现在我的脑海，然后我就接受了。 想法是让div的轮廓作为背景图像。 然后在该div内有四个图像，大小完全相同，并突出显示每个band成员。 这些图像默认情况下是隐藏的。 然后在div的顶部有四个绝对定位的区域。 这些是过渡区域/链接。 在jQuery中，我们观察它们上的悬停事件，并在适当的图像中淡入淡出。

HTML

就像我提到的，只是一个div，其中包含四个图像和四个翻转区域。 全部具有唯一的ID和通用的类名。

<div id="home-photos-box">
                    
    <a id="aller" href="#aller" class="home-roll-box"></a>
    <a id="neil" href="#neil" class="home-roll-box"></a>
    <a id="aaron" href="#aaron" class="home-roll-box"></a>
    <a id="scott" href="#scott" class="home-roll-box"></a>
    
    <img src="images/guys-aller.jpg" alt="" id="image-aller" class="single-guy" />
    <img src="images/guys-neil.jpg" alt="" id="image-neil" class="single-guy" />
    <img src="images/guys-aaron.jpg" alt="" id="image-aaron" class="single-guy" />
    <img src="images/guys-scott.jpg" alt="" id="image-scott" class="single-guy" />
            
</div>

CSS

类名涵盖的共性（例如，位置样式），ID涵盖的独特性（特定的左侧位置）。

#home-photos-box { float: left; width: 352px; background: url(../images/guys-allblack.png) no-repeat; padding: 334px 0 0 0; position: relative; }
#aller { left: 0; }
#neil { left: 25%; }
#aaron { left: 50%; }
#scott { left: 75%; }
.home-roll-box { position: absolute; z-index: 1000; display: block;  height: 334px; top: 0; width: 25%; }
.single-guy { position: absolute; top: 0; left: 0; display: none; opacity: 0; }

jQuery的

观察悬停，当它们发生时，拉出悬停区域的ID（对应于图像的ID）并使其淡入。我们确保在此处使用.stop（）来防止动画排队，我们正在使用不透明度设置，而不是.fadeToggle（），当鼠标快速移入和移出时，它喜欢进行部分渐变。

$(function() {

    var name = "";

    $(".home-roll-box").hover(function() {
        name = $(this).attr("id");
        $("#image-"+name).stop().show().animate({ opacity: 1 });
    }, function() {
        name = $(this).attr("id");
        $("#image-"+name).stop().animate({ opacity: 0 });
    });

});

查看演示 下载文件

翻译自: https://css-tricks.com/silhouette-fadeins/