• 网站首页
• 网站建设
• 短视频
• 网站推广
• 网站模板
• 客户案例
• 资讯动态
• 关于我们

CSS：图片列表 鼠标触发显示图片标题_CSS学习

当前位置：网站建设 > 技术支持

还是zblog主题ydcms，写到了图片列表，触发动态显示图片标题，同时position定义演示站链接位置。

<div class="relates">
     <h4>相关推荐</h4>
     <ul>
      <li>
       <a href="#" title="#" target="_blank">
        <img src=#>
        <h3>图片列表，触发动态显示图片标题</h3>
       </a>
       <span><a href="###">演示站</a></span>
      </li>
      <li>
       <a href="#" title="#" target="_blank">
        <img src=#>
        <h3>图片列表，触发动态显示图片标题</h3>
       </a>
       <span><a href="###">演示站</a></span>
      </li>
      ........
     </ul>
    </div>

CSS代码：

.relates{margin-bottom: 20px;overflow: hidden;}

.relates h4{padding-left: 6px; line-height: 28px; margin-bottom: 4px; border-left: 3px solid #0073c6;font-weight: normal;}

.relates ul{list-style: none;margin-bottom: 6px; padding-top: 16px; border-top: 1px solid #eee; overflow: hidden;}

.relates li {float: left;width: 170px;margin-right: 4px;margin-bottom:12px; overflow: hidden;position: relative;}

.relates li:nth-child(5n+0){margin-right:0;}

.relates li img{width: 170px;height: 140px;}

.relates li h3{height: 2px;line-height: 28px; padding: 0 4px;font-size: 14px; color: #fff; background-color: #0073c6;

 font-weight: normal;position: absolute;top: 0;filter:alpha(opacity=90);opacity:.9; overflow: hidden;

 transition: .25s;-webkit-transition: .25s;-ms-transition: .25s;-o-transition: .25s;}

.relates li:hover h3{height: 56px; background-color: #e84807; color: #FFF;filter:alpha(opacity=100);opacity:1;}

.relates li span{position: absolute;right: 0; bottom: 0;

 padding: 2px 4px; background-color: #e84807;}

.relates li span a{color: #fff;font-size: 14px;}

版权说明：
本网站凡注明“广州京杭 原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。