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;

}