Question

我创建了一个div，当用户将鼠标悬停在其上时，它具有透明覆盖。如何在叠加发生时轻松地使背景图像轻松创建出色的效果。一个例子类似于this website的工作部分发生的事情。

HTML

<ul class="portfolio-project-image">
<li><a href="images/flyer_mock_up.jpg">
    <span>
    Marks &amp; 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

中的演示

Answer 1

我认为this person可能有你想要的东西

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 &amp; Spencer 
        <span>Summer Fete A5 Flyers</span>
         </span>
        </a>
    </li>
</ul>

添加了不透明度，使此示例更像您提供的链接

Answer 2

你可能想要用不透明度做点什么。

http://www.w3schools.com/cssref/css3_pr_opacity.asp

不知道你的意思是什么。

Answer 3

只需传递☑CSS规则中的不透明度，☑和:hover伪类，然后☑设置transitions属性中的 all ：

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; }

您还可以将背景图片传递给淡入元素，如下所示：

working demo

Answer 4

如果你指的是悬停时出现的缩放效果，那就是：

transform：scale（1.04）;

或者，如果你指的是淡入淡出，那么当你如上所述悬停时，你只需要将不透明度从0设置为1。

同时修改比例和不透明度，您将在已发布的网页的工作部分复制效果

div背景轻松与悬停透明覆盖

4 个答案: