Search code examples
csssafari

Absolute positioning messed up in Safari

I tried to do a mouseover fade effect with jQuery. The idea is to have two images positioned on top of each other in this way. 

<img class="img-circle webdesign " src="assets/img/webdesign_.png" style="position: absolute;" >
<img class="img-circle" src="assets/img/webdesign_hover.png">

It works well with Chrome. Screenshot ( http://cl.ly/image/0f3M0f2q1t2S )

However, i am having this issue with Safari ( http://cl.ly/image/44290O3n1X0b )

You can see both images when the page loads even though, the grayscale one should appear on top of the coloured one and hides the latter.

Suggestions?

Solution

  • HTML

    <img class="img-circle webdesign " src="assets/img/webdesign_.png">
<img class="img-circle" src="assets/img/webdesign_hover.png" style='display:none;'>

    JS

    $('.img-circle').mouseenter(function() {
    $('.img-circle').toggle();
});

    CSS

    .img-circle {
    position: absolute;
    top: ???;
    left: ???;
}