CODEWITHSUNDEEP
htmlcss
lisovaccaro
lisovaccaro

Reputation: 33956

Expand circle on hover keeping the background centered?

I'm trying to enlarge a circular element on hover to show more of the background.

I thought I managed to do it however the background moves slightly during the transition, this is what I have now:

http://jsfiddle.net/ANN32/

.foto-icono // The container
{
height: 250px;
text-align: center;
}
.foto-icono > div // The image without padding
{
border-radius: 50%;
width: 200px;
height: 200px;
padding: 0;
transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
}
.foto-icono > div:hover // More padding and a negative margin so it stays on the same position
{
padding: 20px;
margin-top: -20px;
}

I also tried changing the item height and width on hover (instead of the padding) but I randomly get a weird "tremble" from the background.

How can I do this?

Upvotes: 1

Views: 1706

Answers (2)

Ashish Kumar
Ashish Kumar

Reputation: 3039

I got it. remove text-align:center from your .foto-icono class.

here is updated fiddle: http://jsfiddle.net/ashishanexpert/ANN32/2/

Upvotes: 3

Josh Crozier
Josh Crozier

Reputation: 240908

As opposed to padding, i'd suggest adjusting a transparent border. This eliminates the issue on Chrome.

UPDATED EXAMPLE HERE

.foto-icono > div {
    border:0px solid transparent;
}
.foto-icono > div:hover {
    border:20px solid transparent;
    margin-top:-20px;
}

Upvotes: 4

Related Questions