鼠标进入显示产品简介纯css特效响应式
2019-12-03 本文已影响0人
Hi丶粢醍
利用flex布局所以可能不兼容低版本浏览器
鼠标进入前
鼠标进入后
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鼠标进入显示产品简介</title>
</head>
<style>
* {
padding: 0;
margin: 0;
}
.iBox {
position: relative;
}
.iBox img {
width: 100%;
max-width: 100%;
display: block;
}
.iBox > div:nth-of-type(1) {
box-sizing: border-box;
width: 100%;
height: 100%;
position: absolute;
}
.iBox div:nth-of-type(1)::after {
content: "";
width: calc(100% - 40px);
height: calc(100% - 40px);
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: rgba(255, 255, 255, 0.1);
position: absolute;
border: 1px solid #ffffff;
transition: .5s;
opacity: 0;
}
.iBox > div > div {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
text-align: center;
justify-content: center;
transform: scale(0, 0);
transition: .5s ease;
}
.iBox > div > div span:first-child {
margin: 5px;
font-size: 25px;
font-weight: 800;
}
.iBox > div > div span:nth-child(2) {
letter-spacing: .2em;
font-size: 18px;
}
.iBox > div > div span {
color: #ffffff;
}
.iBox:hover div > div {
transform: scale(1, 1);
}
.iBox:hover div:nth-of-type(1)::after {
opacity: 1;
}
</style>
<body>
<div class="iBox">
<div>
<div>
<span>BLISS</span>
<span>拳头科技有限公司</span>
</div>
</div>
<img src="static/images/portfolio/01.jpg" alt="">
</div>
</body>
</html>···
