Question

Links to examples removed

Problem: Webkit browsers (Chrome and Safari) are having an issue with the rotation class I created on the page. If I remove the rotation class on the content div, the large images that appear on hover appear in the correct position.

Firefox has no issue with the rotated content div. I am on a Mac so I cannot test IE.

Answer 1

You’ve given the .thumbnail class position:relative so it’s creating it’s own position context. The fixed position you’ve given .thumbnail:hover span will work with it’s 0 top position as the top of the .thumbnail parent.

Just take away position: relative from .thumbnail and set the top position for .thumbnail:hover span to the value you want it placed (relative now, to the top of the window, because it has position: fixed.

Hope my explanation was clear enough!