跟着up主码小渣学习（无改动）
效果
HTML：
<!doctypehtml>
<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>mousedown!</title><link rel="stylesheet" href="mousedown.css"></head><body><div class="main" ><div class="item"><div class="info"><h3>use what you have</h3><p>by Angela Ducan <a href="#">view on more</a></p></div></div><div class="item"><div class="info"><h3>use what you have</h3><p>by Angela Ducan <a href="#">view on more</a></p></div></div><div class="item"><div class="info"><h3>use what you have</h3><p>by Angela Ducan <a href="#">view on more</a></p></div></div></div></body>
</html>
CSS:
*{margin: 0;padding: 0;box-sizing: border-box;
}a{text-decoration: none;}body ,html {width: 100%;height: 100%;}
body {background: #f9f9f9 url(bg.jpg);
}
.main {width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;
}
.item {position: relative;width: 220px;height: 220px;margin: 10px;background: url(1.jpg) no-repeat;border-radius: 50%;box-shadow: inset 0 0 0 16px rgba(255, 255, 255, .6),0 1px 2px rgba(0, 0, 0, .1);transition:all .4s ease-in-out;
}
.item:nth-child(2) {background: url(2.jpg) no-repeat;
}
.item:nth-child(3) {background: url(3.jpg) no-repeat;
}.info{opacity: 0;transform: scale(0);position: absolute;width: 100%;height: 100%;background: rgba(253, 248, 157, .8);border-radius: 50%;text-align: center;text-align: center;transition:all .4s ease-in-out;
}
.info h3 {height: 140px;font-size: 22px;color: #fff;margin: 0 30px;padding-top: 45px;text-transform: uppercase;
}
.info p {opacity: 0;font-size:12px;color: #fff;font-style: italic;margin: 0 30px;padding-top: 10px;border-top: 1px solid rgba(255, 255, 255, .5);transition:all .4s ease-in-out .4s;
}
.info a {display: block;color: #fff;font-style: normal;
}
.item:hover {box-shadow: inset 0 0 0 1px rgba(255, 255, 255,.1),0 1px 2px rgba(0,0,0,.1);}
.item:hover .info {opacity: 1;transform: scale(1);
}
.info p {opacity: 1;
}
.info p a:hover {color: #bfa;
}