当我将鼠标悬停在图像上时,我试图创建一种效果,图像变暗(因此不透明度降低)并且出现文本。效果基本上是这样的:http : //www.ohmy.io/。我可以自己做一种效果,但同时做这两种效果,它们几乎会互相搏斗,变暗半秒钟,然后变暗。
.vividworknav {
width: 33.333%;
height: auto;
float: left;
padding: 0;
-webkit-transition: opacity 0.5s ease-out;
-moz-transition: opacity 0.5s ease-out;
-o-transition: opacity 0.5s ease-out;
transition: opacity 0.5s ease-out;
}
.vividworknav:hover .work-text-content {
visibility: visible;
opacity: 1.0;
}
.vividworknav:hover {
opacity: 0.3;
}
.work-text-content {
width: 33.333%;
height: auto;
visibility: hidden;
z-index: 100;
position: absolute;
color: white;
left: 0%;
top: 25%;
font-size: 24px;
text-align: center;
-webkit-transition: visibility opacity 2.0Ms;
}
<div class="vividworknav">
<img src="http://www.gettyimages.co.uk/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg" />
<div class="work-text-content">
<p>VIVID VAPOURS</p>
</div>
</div>
我在父元素vividworknav中添加了黑色背景,然后我只是将图像和文本的不透明度设置为悬停,然后看起来就可以正常工作了。
.vividworknav {
width: 33.333%;
height: auto;
float: left;
padding: 0;
position: relative;
background-color: black;
}
.vividworknav:hover img {
opacity: 0.3;
}
.vividworknav:hover .work-text-content {
opacity: 1;
}
.vividworknav img {
padding: 0;
width: 100%;
display: block;
opacity: 1;
}
.vividworknav img,
.work-text-content {
-webkit-transition: opacity 0.5s ease-out;
-moz-transition: opacity 0.5s ease-out;
-o-transition: opacity 0.5s ease-out;
transition: opacity 0.5s ease-out;
}
.work-text-content {
position: absolute;
color: white;
left: 0;
top: 25%;
right: 0;
bottom: 0;
font-size: 24px;
text-align: center;
opacity: 0;
}
<div class="vividworknav">
<img src="http://www.gettyimages.co.uk/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg" />
<div class="work-text-content">
<p>VIVID VAPOURS</p>
</div>
</div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句