欢迎访问CMS集中营! 本站QQ交流群:292800309
设为首页  |   加入收藏  |   RSS订阅  |   网站地图
CMS仿站建站技术教程_CMS免费模板源码下载-CMS集中营

PHP |  ThinkPHP |  MYSQL |  DIV+CSS |  JS |  模板

当前位置:首页 > DIV+CSS > 正文
相关文章

通过CSS实现鼠标滑过图片显示文字的方法

时间:2016-11-14 11:04:15   作者:烈鹰网络工作室   点击:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>通过CSS实现鼠标滑过图片显示文字的方法-CMS集中营-www.cmsjzy.cn</title>
<style type="text/css">
* {
    margin: 0;
    padding: 0
}
a img {
    border: none
}
body {
    font-size: 12px
}
a {
    text-decoration: none;
    color: #fff;
    font-weight: bold;
}
.product {
    display: block;
    position: relative;
    width: 320px;
    height: 200px;
    line-height: 30px
}
.product:hover {
    border: none
}
.product:hover span {
    height: 30px
}
.product span {
    position: absolute;
    left: 0;
    bottom: 0;
    _bottom: 4px;
    overflow: hidden;
    width: 100%;
    height: 0px;
    background: #000;
    opacity: 0.5;
    filter: alpha(opacity=50);
    text-align: center;
}
</style>
</head>
<body>
<a class="product" href="http://www.cmsjzy.cn"> <img src=http://www.cmsjzy.cn/uploadfile/2016/1114/20161114110512327.jpg" width="320" height="200" alt="CMS集中营 WWW.CMSJZY.CN"> <span>CMS集中营 WWW.CMSJZY.CN CMS集中营 WWW.CMSJZY.CN</span> </a>
</body>
</html>
下一篇:最后一页