How to create an image gallery with CSS

CSSWeb DevelopmentFront End Technology

To create an image gallery with CSS is quite easy. You can try to run the following code to achieve this. A gallery of 3 images is created here,

Example

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <style>
         div.myGallery {
            margin: 3px;
            border: 2px solid orange;
            float: left;
            width: 220px;
         }
         div.myGallery:hover {
            border: 1px solid blue;
         }
         div.myGallery img {
            width: 100%;
            height: auto;
         }
         div.desc {
            padding: 20px;
            text-align: center;
         }
      </style>
   </head>
   <body>
      <div class = "myGallery">
         <a target = "_blank" href="https://www.tutorialspoint.com/assets/videotutorials/courses/3d_animation_online_training/380_course_211_image.jpg">
            <img src = "https://www.tutorialspoint.com/assets/videotutorials/courses/3d_animation_online_training/380_course_211_image.jpg" alt="3D Animation Tutorial" width="600" height="500">
         </a>
         <div class = "mydiv">3D Animation Tutorial</div>
      </div>
      <div class = "myGallery">
         <a target="_blank" href="https://www.tutorialspoint.com/assets/videotutorials/courses/swift_4_online_training/380_course_210_image.jpg">
            <img src = "https://www.tutorialspoint.com/assets/videotutorials/courses/swift_4_online_training/380_course_210_image.jpg" alt="Swift Video Tutorial" width="600" height="500">
         </a>
         <div class = "mydiv">Swift Video Tutorial</div>
      </div>
      <div class = "myGallery">
         <a target = "_blank" href = "https://www.tutorialspoint.com/assets/videotutorials/courses/css_online_training/380_course_215_image.jpg">
            <img src = "https://www.tutorialspoint.com/assets/videotutorials/courses/css_online_training/380_course_215_image.jpg" alt="CSS Video Tutorial" width="600" height="500">
         </a>
         <div class = "mydiv">CSS Tutorial</div>
      </div>
   </body>
</html>
raja
Published on 16-May-2018 12:20:19
Advertisements