0

I have used a simple jquery image swap for some icons and have used svg as the images.

$(function(){
    $('img.rollover').hover(function(){
        var e = $(this);
        e.data('originalSrc', e.attr('src'));
        e.attr('src', e.attr('data-rollover'));
    }, function(){
        var e = $(this);
        e.attr('src', e.data('originalSrc'));
    }); /* a preloader could easily go here too */
});

it all works fine in chrome, but in safari after you have rolled off the icons, the browser resizes them really small. In IE they are just small from the word go.

I would love someone to tell me why this might be happening, and if this is the best way to go about using SVG images. 

<a class="icon-link" href="#" data-title="Lucid"><div id="icon-sidebar"><img class="rollover" src="images/lucid_icon.svg" data-rollover="images/lucid_icon_white.svg" /></div></a>

#icon-sidebar {width:50%; height:auto; margin-left:auto; margin-right:auto; margin-bottom:20px;}
    img.rollover {width:100%;}

Here is the link to the test site i am working. Much More Creative

Thanks appreciated...

Hannes Ovrén
  • 21,229
  • 9
  • 65
  • 75
ianh_32
  • 1
  • 2

2 Answers2

-1

You need to remove height from #icon-sidebar div.

#icon-sidebar {
    background-size: cover;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
}
Morpheus
  • 8,829
  • 13
  • 51
  • 77
-1

You should set a 100% width to your #icons-sidebar-left otherwise #icon-sidebar is inheriting 50% width from #icons-sidebar-left. Also your id #icon-sidebar is not unique, you should change it to class in your case.

Godinall
  • 2,280
  • 1
  • 13
  • 18