WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

CSS Image Gallery


CSS can be utilized to make a picture gallery.


Image Gallery

The following picture exhibition is made with CSS:

Example

<html>
<head>
<style>
div.img {
    edge: 5px;
    fringe: 1px strong #ccc;
    skim: left;
    width: 180px;
}

div.img:hover {
    fringe: 1px strong #777;
}

div.img img {
    width: 100%;
    stature: auto;
}

div.desc {
    cushioning: 15px;
    content adjust: center;
}

</style>
</head>
<body>

<div class="img">
  <a target="_blank" href="waterfalls-210186.jpeg">
    <img src="waterfalls-210186.jpeg" alt="waterfalls" width="300" height="200">
  </a>
  <div class="desc">Add a portrayal of the picture here</div>
</div>

<div class="img">
  <a target="_blank" href="cloudy-field 236047.jpeg">
    <img src="cloudy-field 236047.jpeg" alt="cloudy-wide open " width="300" height="200">
  </a>
  <div class="desc">Add a portrayal of the picture here</div>
</div>

<div class="img">
  <a target="_blank" href="brown-wooden-house-128303.jpeg">
    <img src="brown-wooden-house-128303.jpeg" alt="brown-wooden-house" width="300" height="200">
  </a>
  <div class="desc">Add a portrayal of the picture here</div>
</div>

<div class="img">
  <a target="_blank" href="woman-in-red-dress-930899.jpeg">
    <img src="woman-in-red-dress-930899.jpeg" alt="woman-in-red-dress" width="300" height="200">
  </a>
  <div class="desc">Add a portrayal of the picture here</div>
</div>

</body>
</html>
Try it yourself »