CSS Image Resize

by ian_smithz

HTML

<!--Original-->
<img src="https://www.google.com/images/srpr/logo11w.png"/>

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

<!--Solution based on "float: left"-->
<span id="span2">
    <img src="https://www.google.com/images/srpr/logo11w.png"/>
</span>

<!--Solution based on "position: fixed"-->
<span id="span3">
    <img src="https://www.google.com/images/srpr/logo11w.png"/>
</span>

<!--Animation works too-->
<span id="span4">
    <img id="img4" src="https://www.google.com/images/srpr/logo11w.png"/>
</span>

CSS

#span1 {
    display: inline-block;
    background: rgba(0,0,0,0.35);
}

#span2 {
    float: left;
     background: rgba(0,0,0,0.35);
}

#span3 {
    position: fixed;
    z-order: -1;
    top: 50px;
    left: 50px;
     background: rgba(0,0,0,0.35);
}

#span4 {
    display: inline-block;
     background: rgba(0,0,0,0.35);
}

img {
    width: 50%    
}

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

#img4:hover {
    width: 100%
}