css3购物网站商品文字提示实例

最新推荐文章于 2023-11-24 15:28:26 发布

weixin_30420305

最新推荐文章于 2023-11-24 15:28:26 发布

阅读量119

点赞数

原文链接：http://www.cnblogs.com/00h5/p/4796136.html

版权

css3购物网站商品文字提示实例
先来看效果图：
<ignore_js_op>
当鼠标划过图片时，有着泰迪熊黑色长方形的背景就会出现。
来看HTML5+CSS3代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>购物网站商品文字提示</title>
<style type="text/css">
*{margin:0;padding:0;}
#con{width:500px;height:470px;margin:50px auto;position:relative;}
#con p{background:#000;color:#fff;width:100%;height:30px;text-align:center;line-height:30px;position:absolute;left:0;bottom:0;opacity:0.6;height:0;-webkit-transition:height 0.5s;}
#con:hover p{height:30px;}
</style>
</head>
<body>
<div id="con">
<img src="images/dog.jpg" alt="商品图" title="商品图">
<p>泰迪熊</p>
</div>
</body>
</html>

复制代码

代码解释：
构建一个div，div中存放一张需要展示的商品图片，再添加商品图片的文字表述，
给div添加css样式属性，给p元素也添加css样式属性，其中那个高度设置为0，不可见。重点在与用到了绝对定位与相对定位，还对他们不了解的请看此贴http://www.00h5.com/thread-133-1-1.html
把描述文字定位好后添加transition动画，这里我们要鼠标划过div的时候改变的只是p的高度为原来30px即可，而动画也是设置高度属性

转载于:https://www.cnblogs.com/00h5/p/4796136.html

weixin_30420305

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3购物网站商品文字提示实例

css3购物网站商品文字提示实例先来看效果图：<ignore_js_op>当鼠标划过图片时，有着泰迪熊黑色长方形的背景就会出现。来看HTML5+CSS3代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> &...
复制链接

扫一扫