After seeing an example on Design Shack, I was inspired to create linkable photos that zoom in slightly when hovered over. To achieve the desired centered animation effect, I had to tweak the top, left, margin-top, and margin-left properties until it worked - even though I'm not entirely sure how it works!
However, I noticed that the animation appeared choppy and jumpy, especially in Safari, version 10.9. Firefox and Chrome seemed to handle it better.
You can view the example here: http://jsfiddle.net/MnHVk/1/
The key code snippet:
.card img:hover {
height:110%;
width:110%;
top:10%;
left:-10%;
margin-top:-10%;
margin-left:5%;
}
For comparison, here is a version without centering the hover effect: http://jsfiddle.net/MnHVk/2/
Does anyone have any suggestions for achieving a smooth hover animation effect without the choppiness? Is there a different technique for adjusting the positioning to ensure a seamless transition when the image is hovered over?