Expand background on hover - html

Question

I have a div with a background image, what I would like to do, is when I hover over it, the hidden part of background-image to display like in the example below:
My jsfiddle example:
div.test {
background: url(http://media2.intoday.in/indiatoday/images/Photo_gallery/emraan_012315020812.jpg);
background-size: cover;
width: 70px;
height: 70px;
background-position: center;
border-radius: 100%;
display: inline-block;
transition: all 1s;
position: absolute;
top: 100px;
}
.test:hover{
transform: scale(1.2);
}
body {
text-align: center;
}
<div class="test">
</div>
As you can see, in my example the image is just getting larger, instead I want to display another 20px of the image (without compromising border-radius).

Answer 1

Example with one html element:
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 class="test">
</div>
Example with clip-path and shape-inside:
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;
}
<div class="test">
</div>

Answer 2

you might oversize a bit the background image
(background-size:auto 90px;) and add some padding and reset position on hover (.test:hover{padding:10px; margin:-10px;})
those rules are suppose to be understood by most of actual browsers if not all.
div.test {
background: url(http://media2.intoday.in/indiatoday/images/Photo_gallery/emraan_012315020812.jpg);
background-size:auto 90px;
width: 70px;
height: 70px;
background-position: center;
border-radius: 100%;
display: inline-block;
transition: all 1s;
position: absolute;
top: 100px;
}
.test:hover{
padding:10px;
margin:-10px;;
}
body {
text-align: center;
}
<div class="test">
</div>
another possibility is to use an inset shadow
div.test {
background: url(http://media2.intoday.in/indiatoday/images/Photo_gallery/emraan_012315020812.jpg);
background-size: auto 90px;
width: 90px;
height: 90px;
/* hide buggy ff render */
background-clip: content-box;
padding: 1px;
/* end fix ff */
background-position: center;
border-radius: 100%;
display: inline-block;
transition: all 1s;
position: absolute;
top: 90px;
box-shadow: inset 0 0 0 10px white;
}
.test:hover {
box-shadow: inset 0 0 0 0px white;
}
body {
text-align: center;
}
<div class="test">
</div>
There is also : padding, box-sizing and background-clip
div.test {
background: url(http://media2.intoday.in/indiatoday/images/Photo_gallery/emraan_012315020812.jpg) ;
background-size: auto 90px;
width: 90px;
height: 90px;
padding: 10px;
background-clip:content-box;
box-sizing:border-box;
background-position: center;
border-radius: 100%;
display: inline-block;
transition: all 1s;
position: absolute;
top: 90px;
}
.test:hover {
padding:0px;
}
/* show transparency */
html {
min-height:100%;
text-align: center;
background:linear-gradient(45deg, gray, yellow,purple,lime,pink,turquoise, gray, yellow,purple,lime,pink,turquoise);
}
<div class="test"></div>

Answer 3

You are missing to remove border-radius property on the hover event:
div.test {
background: url(http://media2.intoday.in/indiatoday/images/Photo_gallery/emraan_012315020812.jpg);
background-size: cover;
width: 70px;
height: 70px;
background-position: center;
border-radius: 100%;
display: inline-block;
transition: all 1s;
position: absolute;
top: 100px;
}
.test:hover{
transform: scale(1.2);
border-radius: 0px;
}
body {
text-align: center;
}
<div class="test">
</div>