CSS3鼠标悬停图片显示文字介绍特效

2020年3月22日15:05:17 评论 534

这是一款好看的鼠标移动到图片上面的时候,显示出文章内容文字信息的CSS3鼠标悬停图片显示文字动画特效。

鼠标移入前

CSS3鼠标悬停图片显示文字介绍特效

鼠标移入时

CSS3鼠标悬停图片显示文字介绍特效

代码公布

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>纯css实现鼠标悬停图片显示文字介绍</title>
<style>
body,div,ul,li,p{padding:0;margin:0;}
a{color:#454545;text-decoration:none;}
.box1{float:left;width:253px;height:256px;color:#666;position:relative;border:1px #ccc solid;background:#fff;margin:20px 20px 0 20px;list-style: none;}
img{width:243px;height:182px;display:block;padding:5px 5px 0 5px;}
.txt1{font-size:12px;color:#454545;float:left;width:233px;height:172px;position:absolute;top:5px;left:5px;padding:5px;color:#fff;line-height:24px;display:none;z-index:999;overflow:hidden;background:#6ebb14;opacity:0.9;}
.txt1 p a{float:right;width:63px;height:24px;background:#FF6600;opacity:1;color:#fff !important;text-decoration:none !important;height:24px;text-align:center;}
li:hover .txt1{display:block;}
.p1{width:243px;height:39px;line-height:39px;padding:0 5px;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;color:#454545;}
.p2{height:30px;width:233px;padding:0 10px;line-height:30px;background:#f1f1f1;font-size:12px;color:#454545;}
.p2 label{color:#FF6600;font-family:Georgia;font-size:17px;font-weight:bold;}
.box1:hover a{color:#419900;text-decoration:underline;}
.p2 span{float:right;}
.box1:hover{border:1px #6ebb14 solid;}
.txt1 a:hover{color:#fff !important;text-decoration:underline !important;}
</style>
</head>
<body>
<div>
    <ul>
    	<li class="box1">
        	<div class="txt1" onclick="location.href='http://www.ssstg.com';">内容简介:<br>&nbsp;&nbsp;&nbsp;&nbsp;之前看到一个网站,用户上传自己喜欢的图片到服务器端,服务器会有一个类似滤镜的功能。将图片渲染完毕后再返回客户端,非常好玩。今天特意整理了一个用纯CSS3实现的滤镜图片效果供给大家参考...<p><a href="#" target="_blank">查看详细</a></p></div>
            <a href="#" target="_blank"><img src="http://www.ssstg.com/wp-content/uploads/2020/03/1.jpg" alt="纯css3图片滤镜效果" width="243" height="182"></a>
            <p class="p1"><a href="#" title="纯css3图片滤镜效果" target="_blank">纯css3图片滤镜效果</a></p>
            <p class="p2"><span>4831关注</span>商品售价:<label>128</label> 元</p>
        </li>
        <div class="clear"></div>
    </ul>
</div>
</body></html>

如需查看在线演示效果,请复制以上代码,前往

粘贴代码观看效果。

匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: