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

用户名

本质上,我正在尝试重新创建以下项目(悬停在右侧的图像上): 在此处输入图片说明

这是以下网站的屏幕截图: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

新领主
codepen.io/LordNeo/pen/EyxLXX

有两个div放在另一个之上,在悬停时,第一个div消失(不透明度:0)显示了最后一个。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

Related 相关文章

热门标签

归档