王老师html零基础课后练习第8课——圆角阴影hover

原创 老王  2020-05-24 16:42:44  阅读 1817 次 评论 2 条
摘要:

在现在的网站产品介绍中,经常会出现把鼠标放在图片上就会显示出一段文字的介绍,这个是怎么使用的呢?一起来看看关于hover的使用,设置圆角和阴影

今天要做的演示效果入选,就是很多网站上的产品都会有的显示

产品增加hover显示文字 未命名  CSS3样式 hover 前端 王老师html零基础学习笔记第8课——圆角阴影hover 王老师html零基础课后练习第8课——圆角阴影hover 第1张

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标签内容:

	<div id="box">
		<img src="images/3.jpg" width="300" height="300" alt="图片" />
		<div class="meg">
			<span>新品上市</span>
			<p>IPSA明星王牌套装</p>
		</div>
	</div>


本文地址:http://wangfangwen.com/post/82.html
版权声明:本文为原创文章,版权归 老王 所有,欢迎分享本文,转载请保留出处!
阿里云服务器优惠券
减肥不为美,只为走路不磨腿,付出不亚于任何人的努力,成功永远没有尽头,只有岔路口...

发表评论


表情

评论列表

  1. zge
    zge  @回复

    最便宜快递单号网 快递空包网www.88danhw.com

  2. 项目中心
    项目中心  @回复

    学习到了 很受用的技巧