How to Add Zoom Icon to Lightbox Images CSS

This code will enable you add a zoom picture to your lightbox images so when a visitor mouseover the image they see that the image needs to be expanded.


Copy and paste the HTML code into your html page changing the "my image1.jpg, myimage2.jpg... " for your own thumb.


HTML PART:
<div id="photos1">
    <h3>Add Zoom Icon</h3>
    <a href="myimage1.jpg">
        <span></span>
        <img src="myimage2.jpg" alt="" />
    </a>
    <a href="myimage3.jpg">
        <span></span>
        <img src="myimage4.jpg" alt="" />
    </a>
</div>


Copy and paste the CSS code into your CSS file or into the head area of your html page.


CSS PART:
#photos1 {
    width:100%; overflow:hidden;
} 
#photos1 a {
    position:relative; float:left; margin:5px;
}
#photos1 a span { 
    display:none; 
    background-image:url(zoom.png); 
    background-repeat:no-repeat; 
    width:48px; 
    height:48px; 
    position:absolute; 
    left:15px; 
    top:15px;
}

#photos1 a:hover span { 

    display:block;

}

#photos1 img { 
    border: 
    solid 1px #999; 
    padding:5px;
}