div背景輕松，懸停時透明覆蓋

Question

我創建了一個div ，當用戶將鼠標懸停在其上時，它具有透明的覆蓋層。 發生重疊時，如何使背景圖像略微緩和以創建良好的效果。 一個例子就是與本網站的“工作”部分類似的事情。

的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

我認為這個人可能有您想要的東西

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屬性中設置所有 不透明度 ：

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

您還可以將背景圖像傳遞給漸變元素，如下所示：

工作演示 。

Answer 4

如果您指的是懸停時發生的縮放效果，那就是：

轉換：scale（1.04）;

或者，如果您指的是“淡入淡出”，則如上所述，您只需在懸停時將不透明度從0設置為1即可。

編輯比例和不透明度，您將在發布的網頁的工作部分上復制效果