Question

我希望悬停效果完全像这样： http://www.imagebam.com/image/44d2ce431709029 因此，图像变为黑白，橙色在图像上方，文本显示在整个内容上。

这是我的HTML代码

<section class="project_main_container">
    <div class="row row-margin no-gap-r">
        <div class="project_container col-sm-4 col-md-4 col-margin">
            <a href="cordoba_work.php">
            <img class="project_image" src="images/home-grid4.jpg"></img>
                <div class="project_media">

                    <h3>Lorem ipsum</h3>
                    <p>Branding</p>
                </div>
            </a>
        </div>
    </div>


</section>

这是css

.project_main_container {
width: 100%;
}

.project_image {
width: 100%;
}

.project_media {
position:relative;
}

.project_media p {
 margin:0;
padding:0;
 text-align:center;
position:absolute;
top:55%;
width:100%;
transform:translate(0%,-50%);
-webkit-transform:translate(0%,-50%);
-ms-transform:translate(0%,-50%);
color:#FFFFFF;
  font-style: italic;
font-family: georgia;
display:none;
}
.project_media h3   {
margin:0;
padding:0;
text-align:center;
position:absolute;
top:45%;
width:100%;
transform:translate(0%,-50%);
-webkit-transform:translate(0%,-50%);
-ms-transform:translate(0%,-50%);
color:#FFFFFF;
font-family:Arial;
text-transform:uppercase;
display:none;
}

.project_container:hover img {
/* filter: brightness(0.4);
-webkit-filter:brightness(0.4);
-ms-filter:brightness(0.4);*/
opacity: 0.3;
transition: opacity 0.5s ease-in-out 0s;

}
.project_media:hover {
 background-color: #f57b20;
}

Answer 1

好吧，要制作黑白图像，请检查：http://thenewcode.com/532/Convert-Images-To-Black-And-White-With-CSS

至于添加橙色叠加效果，您可以使用img和另一个div制作父级div作为叠加/文字，如下所示：

parent > img + overlay-div

现在为了实现这一目标，我们必须将overlay-div设置在img之上并隐藏，直到有悬停效果为止。 overlay-div将与父级具有相同的高度和宽度，并且使用不透明背景以使用rgba颜色生成橙色效果

另一种方法是将img作为背景，以便结构更简单：

parent > child

参见示例：

html {font-family: Arial}
  
.parent {
  height:200px;
  width:200px;
}

.child {
  width:100%;
  height:100%;
  background-color: rgba(215, 81, 0, 0.8);
  text-align: center;
  opacity:0;
  transition:.3s;
  color:#FFF;
}

.parent:hover .child {opacity:1;}

.method1 {
  background:url(http://rs252.pbsrc.com/albums/hh23/minakomika/Artistic-Nature-29558.jpg~c200);
}

.method2 {
  position: relative;
}

.method2 img {
  position: absolute;
  top: 0;
  left: 0;
  z-index:-1;
}

<h2>Method #1 - Background</h2>

<div class="parent method1">
  <div class="child">
    <h3>Lorem Ipsum</h3>
    <p>Branding</p>
  </div>
</div>
  
  
<h2>Method #2 - Img</h2>

<div class="parent method2">
  <img src=" http://rs252.pbsrc.com/albums/hh23/minakomika/Artistic-Nature-29558.jpg~c200" alt="" />
  <div class="child">
    <h3>Lorem Ipsum</h3>
    <p>Branding</p>
  </div>
</div>

悬停在其上的橙色容器上的黑白图像

1 个答案: