<style>
*{margin: 0;padding: 0;}
.pic{width: 200px;height: 200px;position: relative;margin: 50px auto;}
.pic img{position: absolute;border-radius: 50%;}
.p1{width: 200px;height: 200px;background: black;text-align: center;position: absolute;color: white;font-size: 20px;line-height: 50px;opacity: 0.8;
top: 0;left: 0;border-radius: 50%;}
.pic:hover .p1{opacity:0.1;transition: all 5s;}
</style>
</head>
<body>
<div class="pic">
<img src="img/1.png" alt="" width="200" height="200"/>
<p class="p1"></p>
</div>
*{margin: 0;padding: 0;}
.pic{width: 200px;height: 200px;position: relative;margin: 50px auto;}
.pic img{position: absolute;border-radius: 50%;}
.p1{width: 200px;height: 200px;background: black;text-align: center;position: absolute;color: white;font-size: 20px;line-height: 50px;opacity: 0.8;
top: 0;left: 0;border-radius: 50%;}
.pic:hover .p1{opacity:0.1;transition: all 5s;}
</style>
</head>
<body>
<div class="pic">
<img src="img/1.png" alt="" width="200" height="200"/>
<p class="p1"></p>
</div>
</body>
也是通过定位的方式实现，给外面的大盒子或者图片加上hover伪类来实现.
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
