[英]div background ease with transparent overlay on hover
我创建了一个div
,当用户将鼠标悬停在其上时,它具有透明的覆盖层。 发生重叠时,如何使背景图像略微缓和以创建良好的效果。 一个例子就是与本网站的“工作”部分类似的事情。
的HTML
<ul class="portfolio-project-image">
<li><a href="images/flyer_mock_up.jpg">
<span>
Marks & Spencer
<span>Summer Fete A5 Flyers</span>
</span>
</a>
</li>
的CSS
body{
font: 200 14px/1.3 'Roboto', 'Helvetica Neue', 'Segoe UI Light', sans-serif;
}
ul.portfolio-project-image{
margin:10px;
padding:0;
text-decoration:none;
list-style-type:none;
}
ul.portfolio-project-image li a,
ul.portfolio-project-image li a>span{
display:block;
width:200px;
height:300px;
text-align:center;
background:#fabada;
position:relative;
box-sizing:border-box;
overflow:hidden;
}
ul.portfolio-project-image li span{
display:block;
}
ul.portfolio-project-image li a>span{
padding-top:80px;
background:#fe0;
position:absolute;
top:-100%;
-webkit-transition: top 0.3s ease-in-out;
transition: top 0.3s ease-in-out;
}
ul.portfolio-project-image li a:hover>span{
top:0%;
}
在我的JFIDDLE中查看演示
我认为这个人可能有您想要的东西
https://jsfiddle.net/NewsletterPolls/yy4q7jqg/
body{ font: 200 14px/1.3 'Roboto', 'Helvetica Neue', 'Segoe UI Light', sans-serif; } ul.portfolio-project-image{ margin:10px; padding:0; text-decoration:none; list-style-type:none; } ul.portfolio-project-image li a, ul.portfolio-project-image li a>span{ display:block; width:200px; height:300px; text-align:center; background:#fabada; position:relative; box-sizing:border-box; overflow:hidden; } ul.portfolio-project-image li a { background-image: url(http://placekitten.com/g/200/300); background-size: 200px 100%; background-position: center; background-repeat: no-repeat; -webkit-transition: .5s; transition: .5s; } ul.portfolio-project-image li a:hover { background-size: 300px 150%; } ul.portfolio-project-image li span{ display:block; } ul.portfolio-project-image li a>span{ padding-top:80px; background:#fe0; opacity: .8; position:absolute; top:0%; -webkit-transition: top 0.3s ease-in-out; transition: top 0.3s ease-in-out; } ul.portfolio-project-image li a:hover>span{ top:-100%; }
<ul class="portfolio-project-image"> <li><a href="images/flyer_mock_up.jpg"> <span> Marks & Spencer <span>Summer Fete A5 Flyers</span> </span> </a> </li> </ul>
添加了不透明度,使此示例更像您提供的链接
只需在☑CSS规则,☑和:hover
伪类中传递不透明度 ,然后在transitions
属性中设置所有 不透明度 :
ul.portfolio-project-image li a>span{
opacity: 0;
transition: all 0.3s ease-in-out;
}
ul.portfolio-project-image li a:hover>span { opacity: 1; }
您还可以将背景图像传递给渐变元素,如下所示:
工作演示 。
如果您指的是悬停时发生的缩放效果,那就是:
转换:scale(1.04);
或者,如果您指的是“淡入淡出”,则如上所述,您只需在悬停时将不透明度从0设置为1即可。
编辑比例和不透明度,您将在发布的网页的工作部分上复制效果
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.