Loading
Java ScriptHtmlCssAngular
Introduction
CSS Syntax
CSS Box model
Colors
Background color
Margins
padding in CSS
Outline Properties
CSS Outline
CSS Text
CSS Text Alignment
Text Decoration
CSS Font
CSS Font Size and Style
CSS Icons
CSS Links
Lists in CSS
Tables in CSS
Table padding
CSS Display
CSS Max-Width
CSS Position
z-index
Overflow
CSS Float
CSS inline-block
CSS align
CSS Combinators
CSS Pseudo-class
Opacity
Navigation Bar
Fixed and Sticky nav bar
Dropdowns
Image Gallery
Image sprites
Forms
Selector Overview
ID Selector
Element Selector
Class Selector
Universal Selector
Group Selector
Overview
External CSS
Internal CSS
Inline CSS
Border Overview
Border Style
Border Width
Border Color

Image Gallery

  • CSS can be used to display a collection of images.

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="img_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="img_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="img_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="img_mountains.jpg" alt="Mountains" width="600" height="400">
      </a>
      <div class="desc">Add a description of the image here</div>
   </div>

</body>

</html>

Output: