CSS - Image Grid with Labels

From NoskeWiki
Jump to navigation Jump to search
Thumbnails of different sizes all cropped to squares

About

NOTE: This page is a daughter page of: CSS


This adds together CSS - Center Crop Image and CSS - Centered Thumbnail Display to produce true image thumbnail squares, plus nice transparency over the top.


Centered Thumbnail Display

image_grid_with_labels.html: 

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Image Grid with Labels</title>
  <style>

.image_label {
  font-size: 70%;
  position: absolute;
  top: 5px;
  left: 5px;
  width: 180px;
  background:rgba(255,255,255,0.8);  /* Transparency */
  padding: 5px;
}
.image_box {
  background-color: #fafafa;
  height: 200px;
  width: 200px;
  border-style: solid;
  border-width: 1px;
  border-color: #eaeaea;
  display: inline-block;
  position: relative;
}
.image_thumbnail {
  object-fit: cover;       /* Scale the image so it covers whole area, thus will likely crop */
  object-position: center; /* Center the image within the element */
  height: 200px;
  width: 200px;
  position: absolute;
}
h1 {
  color: #0080ff;
  font-size: 120%;
}
  </style>
</head>
<body>
  
  <h1>Image Grid with Labels</h1>
  
  Images:<br><br>

  <div class="image_box">
    <a href="http://lorempixel.com/600/600/">
    <img src="http://lorempixel.com/300/300/" class="image_thumbnail" title="Random"></a>
    <span class="image_label" title="Small text"><a href="www.andrewnoske.com">Photo 1</a><br>square</span>
  </div>
  <div class="image_box">
    <a href="http://lorempixel.com/800/600/">
    <img src="http://lorempixel.com/400/300/" class="image_thumbnail" title="Random"></a>
    <span class="image_label" title="Small text"><a href="www.andrewnoske.com">Photo 2</a><br>landscape</span>
  </div>
  <div class="image_box">
    <a href="http://lorempixel.com/600/1000/">
    <img src="http://lorempixel.com/300/500/" class="image_thumbnail" title="Random"></a>
    <span class="image_label" title="Small text"><a href="www.andrewnoske.com">Photo 3</a><br>portrait</span>
  </div>

</body>
Retrieved from "http://andrewnoske.com/w/index.php?title=CSS_-_Image_Grid_with_Labels&oldid=307"