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

2024-07-11 08:20:51

字体：大中小

来源：转载

供稿：网友

这篇文章主要为大家详细介绍了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.vevb.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.vevb.com/vip/svip.html"> <img src="http://www.vevb.com/mbzjskin/images/vip.jpg" width="300" height="250" alt="欢迎加入361模板VIP家庭"> <span>欢迎加入361模板VIP家庭</span> </a></body></html>

点击查看演示

以上就是CSS实现鼠标滑过图片显示文字介绍的方法的全部内容，希望对大家的学习和解决疑问有所帮助，也希望大家多多支持武林网。

上一篇：css控制table文字溢出 css控制td显示字数

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