html悬浮展开,html – 在悬停时展开背景
一个html元素的示例：
div.test {
background: url(http://media2.intoday.in/indiatoday/images/Photo_gallery/emraan_012315020812.jpg) no-repeat 50% 50%;
background-size: 140px;
width: 70px;
height: 70px;
background-position: center;
border-radius: 100%;
display: inline-block;
transition: all 1s;
position: absolute;
top: 100px;
transform-origin: center center;
}
.test:hover{
width: 90px;
height: 90px;
margin-left: -10px;
margin-top: -10px;
}
body {
text-align: center;
}
div.test {
background: url(http://media2.intoday.in/indiatoday/images/Photo_gallery/emraan_012315020812.jpg) no-repeat 50% 50%;
background-size: cover;
shape-inside: circle(30% at 50% 50%);
clip-path: circle(30% at 50% 50%);
-webkit-clip-path: circle(30% at 50% 50%);
width: 70px;
height: 70px;
background-position: center;
display: inline-block;
transition: all 1s;
position: absolute;
top: 100px;
transform-origin: center center;
}
.test:hover{
shape-inside: circle(50% at 50% 50%);
clip-path: circle(50% at 50% 50%);
-webkit-clip-path: circle(50% at 50% 50%);
}
body {
text-align: center;
}