Class 6 Exam  >  Class 6 Notes  >  CSS for Beginners  >  CSS Image Gallery

CSS Image Gallery | CSS for Beginners - Class 6 PDF Download

Image Gallery


The following image gallery is created with CSS:
Example

<html>

<head>

<style>

div.gallery {

  margin: 5px;

  border: 1px solid #ccc;

  float: left;

  width: 180px;

}


div.gallery:hover {

  border: 1px solid #777;

}


div.gallery img {

  width: 100%;

  height: auto;

}


div.desc {

  padding: 15px;

  text-align: center;

}

</style>

</head>

<body>


<div class="gallery">

  <a target="_blank" href="img_5terre.jpg">

    <img src="https://edurev.gumlet.io/mg_5terre.jpg" alt="Cinque Terre" width="600" height="400">

  </a>

  <div class="desc">Add a description of the image here</div>

</div>


<div class="gallery">

  <a target="_blank" href="img_forest.jpg">

    <img src="https://edurev.gumlet.io/mg_forest.jpg" alt="Forest" width="600" height="400">

  </a>

  <div class="desc">Add a description of the image here</div>

</div>


<div class="gallery">

  <a target="_blank" href="img_lights.jpg">

    <img src="https://edurev.gumlet.io/mg_lights.jpg" alt="Northern Lights" width="600" height="400">

  </a>

  <div class="desc">Add a description of the image here</div>

</div>


<div class="gallery">

  <a target="_blank" href="img_mountains.jpg">

    <img src="https://edurev.gumlet.io/mg_mountains.jpg" alt="Mountains" width="600" height="400">

  </a>

  <div class="desc">Add a description of the image here</div>

</div>


</body>

</html>

More Examples


Responsive Image Gallery
How to use CSS media queries to create a responsive image gallery that will look good on desktops, tablets and smart phones.

CSS Image Gallery | CSS for Beginners - Class 6

The document CSS Image Gallery | CSS for Beginners - Class 6 is a part of the Class 6 Course CSS for Beginners.
All you need of Class 6 at this link: Class 6
10 videos|41 docs|23 tests

Top Courses for Class 6

10 videos|41 docs|23 tests
Download as PDF
Explore Courses for Class 6 exam

Top Courses for Class 6

Signup for Free!
Signup to see your scores go up within 7 days! Learn & Practice with 1000+ FREE Notes, Videos & Tests.
10M+ students study on EduRev
Related Searches

CSS Image Gallery | CSS for Beginners - Class 6

,

study material

,

Objective type Questions

,

video lectures

,

CSS Image Gallery | CSS for Beginners - Class 6

,

Summary

,

MCQs

,

Viva Questions

,

Important questions

,

Extra Questions

,

CSS Image Gallery | CSS for Beginners - Class 6

,

Free

,

Sample Paper

,

pdf

,

Exam

,

past year papers

,

ppt

,

Semester Notes

,

Previous Year Questions with Solutions

,

practice quizzes

,

mock tests for examination

,

shortcuts and tricks

;