Question

基本上我正在尝试重新创建以下项目（在悬停时是右侧的图像）：

以下网站的屏幕截图：https://www.loungelizard.com/ 有很多问题只涉及创建图像叠加或仅仅是图像标题所以我认为它将是它们的混合版本。

这是我到目前为止的代码：

HTML：

 <a href="#" class="desc_ImageOverlay">
    <img src="http://www.imagesource.com/Doc/IS0/Media/Home2/5/8/7/8/IS09AR776.jpg" class="img-responsive" alt="" />
    <div class="desc">
        <p class="desc_content">Test</p>
    </div>
    <span class="OverlayText">
      <p> 
        This is some new test text. 
      </p>  
    </span>
</a>

CSS：

 div.desc{
     bottom: 50%;
     color: #fff;
     left: 50%;
     position: absolute;
     width: 100%;
}

.desc_content{
     color: orange;
     shadow:  text-shadow: 2px 2px 5px black;
     font-size:  20px;
}

.desc_ImageOverlay {
      width:140px;
      text-decoration:none;
      position:relative;
      display:block;
      border:1px solid #666;
      padding:3px;
      margin-right:5px;
      float:left;
}

.desc_ImageOverlay span.OverlayText {
        visibility:hidden;
        position:absolute;
        filter:alpha(opacity=50);
        -moz-opacity:0.5;
        -khtml-opacity: 0.5;
        opacity: 0.5;
}

desc_ImageOverlay:hover span.OverlayText{
        visibility:visible;
}

任何帮助尝试获得与此网站相同的结果将不胜感激。这是我目前使用的codepen。

Answer 1

codepen.io/LordNeo/pen/EyxLXX

有两个div一个放在另一个上面，在悬停时，第一个消失（不透明度：0）显示底部。

Answer 2

.desc_ImageOverlay{
  text-decoration: none;
  position:relative;
  display: block;
  float: left;
  overflow: hidden;
  width:240px;
  background: none 50%;
  background-size: cover;
}
.desc_ImageOverlay .desc{
  font: 16px/20px sans-serif;
  color:#fff;
  text-align:center;
  padding:24px 16px;
  transform: translateY(30%); -webkit-transform: translateY(30%);
  transition: 0.5s;           -webkit-transition: 0.5s;
}
.desc_ImageOverlay .desc p{
  transition: 0.5s; -webkit-transition: 0.5s;
  opacity:0;
}
/*hover*/
.desc_ImageOverlay:hover .desc{
  transform: translateY(0%); -webkit-transform: translateY(0%);
  background: rgba(255,255,255, 0.5);
  color: #000;
}
.desc_ImageOverlay:hover .desc p{
  opacity:1;
  color: #000;
}

<a href="#" class="desc_ImageOverlay" style="background-image: url(http://www.imagesource.com/Doc/IS0/Media/Home2/5/8/7/8/IS09AR776.jpg);">
  <div class="desc">
    <h2>STRATEGY</h2>
    <p> 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum aliquid illo, repellat magnam veritatis mollitia eum itaque reiciendis esse
    </p>  
  </div>
</a>

<a href="#" class="desc_ImageOverlay" style="background-image: url(http://www.imagesource.com/Doc/IS0/Media/TR5/9/c/c/6/IS09AF3QC.jpg
);">
  <div class="desc">
    <h2>SAILING</h2>
    <p> 
       Consectetur adipisicing elit. Dolorum aliquid illo, repellat magnam veritatis mollitia eum itaque reiciendis esse lorem ipsum dolor sit amet.
    </p>  
  </div>
</a>

如何使用CSS创建图像标题和图像叠加？

2 个答案: