感谢您的支持,我会继续努力的!
打开微信扫一扫,即可进行扫码打赏哦
点我查看本站打赏源码!
Powered by RUNCODEX.COM,学的不仅是技术,更是梦想!!!
<h2>淡入透明效果</h2>
<p>鼠标移动到图片上查看效果</p>
<div class="container">
<img src="https://static.runcodex.com/images/mix/img_avatar.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
输入 JavaScript 代码……
xxxxxxxxxx
.container {
position: relative;
width: 50%;
}
.image {
opacity: 1;
display: block;
width: 100%;
height: auto;
transition: .5s ease;
backface-visibility: hidden;
.middle {
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%)
.container:hover .image {
opacity: 0.3;
.container:hover .middle {
.text {
background-color: #4CAF50;
color: white;
font-size: 16px;
padding: 16px 32px;