欢迎来到361模板(www.ke361.com),原创精品织梦模板提供商。QQ快速注册登录 网站托管 VIP 网站定制

361模板网

当前位置:361模板网 > 技术文档 > 程序代码 > CSS实现鼠标滑过图片显示文字介绍的方法
这篇文章主要为大家详细介绍了CSS实现鼠标滑过图片显示文字介绍的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,有需要的朋友可以收藏方便以后借鉴。

CSS实现鼠标滑过图片显示文字介绍。这个是现在网站常用的图片效果,当鼠标移到图片上的时候,显示图片的相关介绍,鼠标一开,文字介绍消失。实现该效果代码如下:

<!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实现鼠标滑过图片显示文字介绍的方法-361模板-www.ke361.com</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: 300px;
    height: 250px;
    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: #FF0000;
    opacity: 0.5;
    filter: alpha(opacity=50);
    text-align: center;
}
</style>
</head>
<body>
<a class="product" href="http://www.ke361.com/vip/svip.html"> <img src="http://www.ke361.com/mbzjskin/images/vip.jpg" width="300" height="250" alt="欢迎加入361模板VIP家庭"> <span>欢迎加入361模板VIP家庭</span> </a>
</body>
</html>

点击查看演示

以上就是本文的全部内容,希望对大家的学习和解决疑问有所帮助,也希望大家多多支持361源码网。

感谢打赏,我们会为大家提供更多优质资源!

热词标签: css 鼠标滑过

上一篇CSS鼠标悬停图片加边框效果

下一篇html文字闪烁代码 css3文字闪烁效果

取消

感谢您的支持,我们会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

Powered by361模板网,分享从这里开始,精彩与您同在