摘要:
在现在的网站产品介绍中,经常会出现把鼠标放在图片上就会显示出一段文字的介绍,这个是怎么使用的呢?一起来看看关于hover的使用,设置圆角和阴影
今天要做的演示效果入选,就是很多网站上的产品都会有的显示
hover把鼠标放图片上显示文字出现
先来看看CSS样式属性内容:#box{
position:relative;
width:300px;
height:300px;
margin:100px auto;
overflow:hidden;/*超出隐藏,再通过定位和hover改变定位的位置到达效果*/
}
.meg{
position:absolute;
left:301px;;
top:0px;
width:300px;
height:300px;
background-color:#dfdfdf;
background-color:rgba(0,0,0,0.3);/*只单独透明背景的颜色,文字不会改变,
如果用opacity:0.3会连文字一起透明了*/
border-radius:50%;
}
span{
display:block;
text-align:center;
margin-top:130px;
}
p{margin:10px;text-align:center;}
/*选择父级的一个盒子以后,hover后面要加空格?在+需要改变的盒子的参数*/
#box:hover .meg{
left:0px;
}
从上面的代码中不难发现,图片的圆角加了一个border-radius设置了一个圆角
然后加了一个透明的背景色,设置透明度
下面部分为html标签内容:
新品上市
IPSA明星王牌套装