CSS Image Resize

HTML

<!--Solution based on "display: inline-block"-->
<span id="span1">
    <img src="https://www.google.com/images/srpr/logo11w.png"/>
</span>

CSS

#span1 {
    display: inline-block
}

#span2 {
    float: left
}

#span3 {
    position: fixed;
    z-order: -1;
    top: 50px;
    left: 50px
}

#span4 {
    display: inline-block
}

img {
    width: 100%    
}

#img4 {
    -webkit-transition: 500ms;
    -moz-transition: 500ms;
    -o-transition: 500ms;
    transition: 500ms
}

#img4:hover {
    width: 100%
}