Css image gallery

the image gallery is a place online where you can upload, store and manage images within your benchmark email account.

when you want to add an images in your web page then you follow some points-

  • sets always css width height property.
  • set the image alt attributes.
  • set image border for good looking.

the complete code for above image gallery.

css image gallary code example

           <html>
           
            <head>
            
           <title>how create the image gallery</title>
           
           <style   type="type/css">
           
           #top_image_container{ 
           
           width:620px ;
           
           height:400px ;
           
           margin-:20px 0px 0px 0px ;
           
           border:10px solid #414141 ;
           
           background-color:#eeeeee  ;
           
           background-repeat:repeat ;
           
           background-attachment:scroll ;
           
           }
           #top_image_container img{ 
           
           width:230px ;
           
           height:190px ;
           
           margin:4px 1px ;           
           
           border-radius:5px ;
           
           border:1px solid transparent ;
           
           opacity:1.0 ;
           
           filter:alpha(opacity=100) ;
           
           } 
           #top_image_container a:hover  img{ 
           
           width:190px ;
           
           height:200px ;
           
           border:5px dotted gold ;
           
           } 
           
           #top_image_container p { 
           
           width:202px ;
           
           height:200px ;
           
           overflow:hidden ;
           
           margin:0px 2px 2px 2px ;
           
           float:left ;
           
           }             
           
     </style>
     
 </head>
           
<body>

      <div  id="top_image_Container >
           
     <p> <a  href="/project/images/gallery/girl.gif"  target="_blank">
     
         <img src=/images//gallery/girl.gif /> </a> </p>
           
     <p> <a  href="/project/images/gallery/goldentree.gif"  target="_blank">
     
         <img src=/images/gallery/goldentree.gif /> </a> </p>
           
     <p> <a  href="/project/images/gallery/greenfield.gif"  target="_blank">
     
         <img src=/images/gallery/greenfield.gif /> </a> </p>
           
     <p> <a  href="/project/images/gallery/house.gif"  target="_blank">
     
         <img src=/images/gallery/house.gif /> </a> </p>
           
     <p> <a  href="/project/images/gallery/waterhair.gif"  target="_blank">
     
         <img src=/images/gallery/waterhair.gif /> </a> </p>
           
     <p> <a  href="/project/images/gallery/girl.gif"  target="_blank"> 
     
         <img src=/images/gallery/girl.gif /> </a> </p>
                      
     <p> <a  href="/project/images/gallery/eye.gif"  target="_blank">
     
         <img src=/images/gallery/eye.gif /> </a> </p>
           
  </div>
             
</body>

</html>