Question

我一直在尝试在我的网站上创建悬停图片效果。我在下面的链接中添加了脚本。我无法设置悬停图像过渡淡入淡出效果和2s时间延迟。请帮我。

<div class="imagecontainer">
<img class="myhoverimg" src="http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg" alt="">
<div class="myhoveroverlay"></div></div>

<style>
.imagecontainer {
   position:relative;
   width:361px;
   height:181px; }
.myhoverimg{
   position:absolute;
   top:0;
   left:0;
   width:100%;
   height:100%;
} 

.myhoveroverlay{
   position:absolute;
   top:0;
   left:0;
   width:100%;
   height:100%;   
   z-index:100;
}

.myhoveroverlay:hover{
        background:url(http://css3.bradshawenterprises.com/images/Windows%20Logo.jpg);

}
</style>

https://jsfiddle.net/nhu2wmdg/

Answer 1

您可以使用不透明度attr来淡化图像...

.myhoveroverlay{
     position:absolute;
     top:0;
     left:0;
     width:100%;
     height:100%;   
     z-index:100;
     opacity : 1;
}

.myhoveroverlay:hover{
    background:url(http://css3.bradshawenterprises.com/images   /Windows%20Logo.jpg);
    opacity : 0.9;

}

Answer 2

感谢@Leo的帮助。正是我在寻找什么。 jsfiddle.net/nhu2wmdg/1

悬停效果转换不起作用

2 个答案: