将块元素设置为“淡出”另一个

我有一些图像链接重叠，在悬停时，我希望悬停在其余的上方。将块元素设置为“淡出”另一个

只需更改悬停时的z-index并使其显示在其余上方，就很容易。但是我在这里寻找一些漂亮的动画。我不认为有一种方法可以在CSS中为z-index设置动画，但是在这里我还有其他一些不透明的技巧，可能会使这些链接看起来像是“在其他人之上褪色”。

<div class="block-links"> 
    <a href="#" style="background-image:url(http://placekitten.com/400);"></a> 
    <a href="#" style="background-image:url(http://placekitten.com/500);"></a> 
</div>

Codepen：http://codepen.io/tenold/pen/dXmXyX

UPDATE

如果任何人来这里寻找这个答案，这是我落得这样做，基于以下史蒂夫的r答案。我添加了一些JavaScript，使其更具可扩展性。

http://codepen.io/tenold/pen/qNoNkb

来源

2016-07-20 Corey

一个选项是将两个元素用于第一个图像，一个位于第二个图像的“后面”和一个“前面”。将“前”图像的不透明度设置为0，并在悬停时将该属性设置为1。见：http://codepen.io/slrubinstein/pen/EyEyya

#front { 
    position: absolute; 
    opacity: 0; 
    transition: opacity .5s; 
} 

#front:hover { 
    opacity: 1; 
}

来源

2016-07-20 16:54:58

这是我想要的效果，但我只添加了2张图片，例如清酒，我有4张图像宽，像这样：http://codepen.io/tenold/pen/qNoNkb – Corey

也许有一个闪光方式来做到这一点：之前和之后：。 – Corey

我敢肯定，这是一种轻松的方式！这是漫长的抽象概念证明。你可以用四个图像做这个工作，但是你可能想要重构它，使它更容易维护。答：在具有相同背景图属性的伪类之后是一个很好的想法。以下是4张图片的效果：http://codepen.io/slrubinstein/pen/RRrRxj –

-1

使用CSS3过渡性质。只需将.fade类添加到想要淡入淡出的任何对象即可。

.fade { 
    opacity: 0.5; 
    transition: opacity .25s ease-in-out; 
    -moz-transition: opacity .25s ease-in-out; 
    -webkit-transition: opacity .25s ease-in-out; 
    z-index: 10; 
} 

.fade:hover { 
    opacity: 1.0; 
    z-index: 1000; 
}

来源

2016-07-20 16:48:25 TheValyreanGroup

不过，他们有一个0.5的不透明度默认。 – Corey

您可以添加一点jQuery，以快速切换“淡入淡出”类到鼠标上的每个元素输入其中的任何元素。这样，他们坐在一个完全不透明的位置，直到一个元素被徘徊，然后jQuery添加了.fade类，并将它们全部放到.5不透明度，并且被徘徊的元素淡入淡出。 – TheValyreanGroup

这也行不通，因为当你退出时，最后一个仍然有0.5不透明度。 – Corey

-1

这样的事情？

.block-links { 
 
    position: relative; 
 
} 
 

 
a { 
 
    float:left; 
 
    display: block; 
 
    position: relative; 
 
    width:200px; 
 
    height:200px; 
 
    background-size:cover; 
 
    background-position:center center; 
 
    z-index: 0; 
 
    
 
    opacity: 1; 
 
} 
 

 
a:last-child { 
 
    top:50px; 
 
    left:-50px; 
 
} 
 

 
a:hover { 
 
z-index: 2; 
 
    animation: fade 1.6s ease; 
 
} 
 
    @keyframes fade { 
 
    33% { opacity: 0 } 
 
    100% { opacity: 1 } 
 
    
 
}

<div class="block-links"> 
 
    <a href="#" style="background-image:url(http://placekitten.com/400);"></a> 
 
    <a href="#" style="background-image:url(http://placekitten.com/500);"></a> 
 
</div>

来源

2016-07-20 16:57:37 EddNewGate

不完全是，默认情况下它们需要完全不透明。 – Corey

当你将鼠标悬停在一张图片上时，如果我理解对的话，你想以“淡入淡出”效果出现在其余的上方。 – EddNewGate

是的，但默认情况下它们需要完全不透明。而不仅仅是z-索引的变化，并将它们“贴”在另一个前面，我在这里寻找更平滑的过渡。 @Steve R的答案中的效果是我正在寻找的确切效果，但我需要它具有更大的可扩展性。 – Corey

将块元素设置为“淡出”另一个

回答

相关问题