CODEWITHSUNDEEP
javascriptcssmouseover
destiny
destiny

Reputation: 1862

How to resize a image to each site on mouseover?

Is there a option in JavaScript or CSS to resize a image so that the image is growing out? So that the centerposition of the image is the same on mouseover?

Upvotes: 1

Views: 1469

Answers (2)

justisb
justisb

Reputation: 7280

You'll need to able to center the image horizontally and vertically. This can be done using a wrapper div on the image with display: table-cell, text-align: center, and vertical-align: middle, and then applying some extra styles to the image on :hover.

See this fiddle for an example: http://jsfiddle.net/jblasco/6qVnB/

Optionally, rather than using display: table-cell, you could manually figure out some margins or a combination of position: relative and top to reposition the image on hover.

Example using this solution: http://jsfiddle.net/jblasco/fvqzR/2/

Upvotes: 1

Ryan
Ryan

Reputation: 1888

For a smooth effect I recommend incorporating CSS3 transitions and transformations (see the section "2. Animating your Transforms" combined with Modernizr, this will allow an image to grow gradually and give a much more elegant effect than a straight forward hover.

I use Modernizr to ensure that the CSS3 effects I use can be consistent across all browsers to even if they don't support and being written in JavaScript it fits within the scope of the solution you're looking for.

I hope this helps you.

Upvotes: 0

Related Questions