Scaling Image Grid CSS

HTML & CSS
1

Hi,

I was wondering whether anyone would be able to help me at all?

I have built a website based on an image grid with multiple photos and text that appears over each photo on mouse hover. However when I look at it on a different laptop size to mine or a desktop computer the number of images in each row either decreases or increases depending on the screen size. Is there a way that no matter what laptop or desktop screen you view it on it keeps the same number of images in each row ( 6 images per row, unless there is multiple videos in one row). Also on different screens the text that appears on hover changes, is there a way to keep this fixed in one place over the image?

I have attached an image down below of how I am trying to get the layout to remain on laptop and computer, as well as my code.

Thank you

Screen Shot 2021-02-28 at 12.34.29
Screen Shot 2021-02-28 at 12.34.292880Ă—1514 359 KB

HTML CODE

<div class="row">
<ul id="gallery">
<li><a href="Sister-Series-1" rel="history"><div grid-row="" grid-pad="0" grid-gutter="0" grid-responsive="">
	<div grid-col="x11" grid-pad="0"></div>
	<div grid-col="x11" grid-pad="0"></div>


</div></a></li><li><a href="Sister-Series-1" rel="history" class="image-link"><img src="https://freight.cargo.site/t/original/i/22e1317617dbff2186899574b1982bc5e9d1aaed43f5cc9cc9097cb6feecbc7d/1.jpg" style="width: 140px; height: 200px;" height="200px" width="140px"></a><span>Sister Series</span><span2>5 photographs</span2>
</li>
<li><a href="Figures-in-Light-1" rel="history" class="image-link"><img src="https://freight.cargo.site/t/original/i/aa18cddcb1605fac708232ac5c022a008ecaa73cef8bbbeb0b9daf857b60a673/moore_esme_0012.jpg" class="image" style="width: 140px; height: 200px;" height="200px" width="140px"></a><span>Figures in Light</span><span2>9 photographs</span2></li> 

<li><a href="Camera-Obscura-1" rel="history" class="image-link"><img src="https://freight.cargo.site/t/original/i/6b4abed70e1ed7ac5dbb3e7b6992012d09c685e7e9265400ae0271ea051914e7/2P7A6158-copy.jpg" class="image" style="width: 140px; height: 200px;" height="200px" width="140px"></a><span>Camera Obscura</span><span2>5 photographs</span2></li> 


<li><a href="Madness-of-Ming-1" rel="history" class="image-link"><img src="https://freight.cargo.site/t/original/i/73ed5ec47bf4e860f4532a00d1764c839645f3ebeae4fb34b3191753e818101f/3.jpg" style="width: 140px; height: 200px;" height="200px" width="140px"></a><span>Madness of Ming</span><span2>5 photographs</span2></li><a href="Madness-of-Ming-1" rel="history"> 
</a><li><a href="Side-by-Side-Sisters" rel="history"><video width="300" height="200" autoplay="" muted="" loop=""> <source src="https://files.cargocollective.com/c782770/Side-by-Side-Sisters---no-sound-resized.mp4" type="video/mp4"></video><span4>Side by Side, Sisters</span4><span5>SHOWstudio Fashion Film Awards 2019</span5><span6>Film 1:38</span6></a></li>

<li><a href="Josey-Hongjoo-1" rel="history" class="image-link"><img src="https://freight.cargo.site/t/original/i/54b17dd106f4f800bcba00f2cb189c5b344e0f8e449a03f0bea1fd3e156b140f/CSM5477.jpg" style="width: 140px; height: 200px;" height="200px" width="140px"></a><span>Josey</span><span2>Hongjoo Yeom</span2><span3>5 photographs</span3> </li>
<li><a href="Sholly-1" rel="history" class="image-link"><img src="https://freight.cargo.site/t/original/i/49d382dd2b6cfbba905fe82968773b732e18293d61bb44b4d978cc2a50ed7165/19-copy.jpg" style="width: 140px; height: 200px;" height="200px" width="140px"></a><span>Sholly</span><span2>Charlene Ong</span2><span3>6 photographs</span3></li> 
<li><a href="Portrait-of-Eman-1" rel="history" class="image-link"><img src="https://freight.cargo.site/t/original/i/5056d0456084d753bbd26fa196e4361c72c470129199708477f6cda722c20f36/CSM5249-1.jpg" style="width: 140px; height: 200px;" height="200px" width="140px"></a><span>Portrait of Eman</span><span2>Noctis Magazine</span2><span3>9 photographs</span3></li>  


<li><a href="Portrait-of-Eman-Film" rel="history"><video width="300" height="200" autoplay="" muted="" loop=""> <source src="https://files.cargocollective.com/c997240/Portrait-of-Eman-no-sound.mp4" type="video/mp4"></video><span4>Portrait of Eman</span4><span5>Noctis Magazine</span5><span6>Film 1:52</span6></a></li> 
<li><a href="Josey-Izy-1" rel="history" class="image-link"><img src="https://freight.cargo.site/t/original/i/883b11ffa48393f1dc8798a1fca8011bc653a6f150cc072f16b17f731cdc4d90/CSM2128.jpg" style="width: 140px; height: 200px;" height="200px" width="140px"></a><span>Josey</span><span2>Izy Mckinlay</span2><span3>2 photographs</span3></li> 
<li><a href="Madness-of-Ming-1" rel="history" class="image-link"><img src="https://freight.cargo.site/t/original/i/7d235852264701ee37e9e28dd3efe7134ef6d15fe004b3fabf9d75ef37d81984/14.jpg" style="width: 140px; height: 200px;" height="200px" width="140px"></a><span>Madness of Ming</span><span2>5 photographs</span2></li> 
<li><a href="Portrait-of-Eman-1" rel="history" class="image-link"><img src="https://freight.cargo.site/t/original/i/83712e11b9016058361a285c53a8313157d696c08ae90bfd011645fd1707f7ed/csm-23512.jpg" style="width: 140px; height: 200px;" height="200px" width="140px"></a><span>Portrait of Eman</span><span2>Noctis Magazine</span2><span3>9 photographs</span3></li> 


<li><a href="Dancing-Around-the-Violins" rel="history"><video width="300" height="200" autoplay="" muted="" loop=""> <source src="https://files.cargocollective.com/c997240/Dancing-around-the-violins-no-sound.mp4" type="video/mp4"></video><span4>Dancing Around the Violins</span4><span5>Film 1:36</span5></a></li>

<li><a href="Gracie" rel="history" class="image-link"><img src="https://freight.cargo.site/t/original/i/c3df9300957093ecdc903453488421df6712567eb8eb9ec47a2153309a21781b/MOORE_ESME_0001.jpg" style="width: 155px; height: 200px;" height="200px" width="155px"></a><span>Gracie</span><span2>1 photograph</span2></li> 
<li><a href="Sabirah" rel="history"><video width="300" height="200" autoplay="" muted="" loop=""> <source src="https://files.cargocollective.com/c997240/SABIRAH-Fashion-film_upload-new-new.mp4" type="video/mp4"></video><span4>Sabirah</span4><span5>London Fashion Week SS'21</span5><span6>Film 1:45</span6></a></li> 


<li><a href="The-Beautifully-Grotesque-and-Us" rel="history"><video width="300" height="200" autoplay="" muted="" loop=""> <source src="https://files.cargocollective.com/c997240/beautifully-grotesque-no-sound.mp4" type="video/mp4"></video><span4>The Beautifully Grotesque, and Us</span4><span5>Film 2:06</span5></a></li>

<li><a href="Panoramic-Bodies-1" rel="history" class="image-link"><img src="https://freight.cargo.site/t/original/i/821ec7852a5ecf0490ed398f30e0741c60a6891f4762451e304edf59cff40e3d/8-copy.jpg" style="width: 300px; height: 200px;" height="200px" width="300px"></a><span>Panoramic Bodies</span><span2>2 photograph</span2></li> 

<li><a href="Francis-de-Lara-1" rel="history"><video autoplay="" muted="" loop="" width="300" height="200"><source src="https://files.cargocollective.com/c997240/Gold-Earring---Index-new---no-sound.mp4" style="width: 300px; height: 200px;" height="200px" width="300px"></video></a><span4>Francis de Lara Campaign '20</span4><span5>3 Films</span5></li> 

<li><a href="The-Beautifully-Grotesque-and-Us-1" rel="history" class="image-link"><img src="https://freight.cargo.site/t/original/i/38b8c4e639c631700ff4a178ed589857e9d53dfb57c96174b54497eddf2ee101/GREY.jpg" style="width: 300px; height: 200px;" height="200px" width="300px"></a><span>The Beautifully Grotesque, and Us</span><span2>5 photographs</span2></li> 

<li><a href="Gracie" rel="history" class="image-link"><img src="https://freight.cargo.site/t/original/i/3700f628c0b6243ad4c317131ed93f436cc5047e243e3c4a96a6e1737a90fc5f/0001.jpg" style="width: 155px; height: 200px;" height="200px" width="155px"></a><span>Portrait of Eman</span><span2>Noctis Magazine</span2><span3> 9 photographs</span3></li>

CSS

#header{ position: fixed; 
    top: 25px;
    background: rgba(255, 255, 255, 0);
    color: #000;
    font-size: 1.7em;
}





[data-predefined-style="true"] bodycopy a {
	color: rgba(0, 0, 0, 1);
	padding-bottom: 0.1em;
	border-bottom: 0.0em solid rgba(127, 127, 127, 0.3);
	text-decoration: none;
    
}

[data-predefined-style="true"] small {
	display: inline-block;
	font-size: 1.2rem;
	line-height: 1.5;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, "Sans Serif", Icons;
	font-style: normal;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.85);
}

body {
    background-color: #fff;
    font: 0.95em / 1.32em sans-serif;
    color: rgba(255, 255, 255, 1);
    font-family: sans-serif;
  }

#gallery {
	display: flex;
    position: relative;
	flex-wrap: wrap;
    margin-left: -25px;
    margin-top: -25px;
   
    padding-top: 0.325em;
    padding-left: 0.325em;
    padding-right: 0.325em;
    
    
    
   
   
    list-style-type: none;
}

#gallery li {
    position: relative;
    margin-left: 2.0%;
    margin: 0%;
    margin-top: 2%;
    background-color: rgba(210, 207, 207, 0);
    overflow: hidden;
 }

#gallery li3 {
    position: relative;
    width: 15.6%; 
    margin: 0.5%;
    margin-top: 1.5%;
    background-color: #fff;
  
    overflow: hidden;
 }
#gallery li2 {
    position: relative;
    padding-left: 45px;
    width: 15.6%; 
    margin: 0.5%;
    margin-top: 1.5%;
    background-color: #fff;
    overflow: hidden;
 }
#gallery li4 {
    position: relative;
    padding-left: 45px
    margin: -0.7%;
    margin-top: 2.5%;
    background-color: #fff;
  }
#gallery li5 {
    position: relative;
    padding-left: 45px;
    width: 25.5%; 
    margin: -0.7%;
    margin-top: 2.5%;
    background-color: rgba(255, 255, 255, 0);
  }

#gallery li:hover span,
#gallery li:active span{
    bottom: 1.125em;
    opacity: 1;
}
.h3{
	font-size: 5em;
}
#gallery li:hover span2,
#gallery li:active span2{
    bottom: 1.525em;
    opacity: 1;
 }
#gallery li:hover span3,
#gallery li:active span3{
    bottom: 1.525em;
    opacity: 1;
 }
#gallery li:hover span4,
#gallery li:active span4{
    bottom: 1.525em;
    opacity: 1;
 }
#gallery li:hover span5,
#gallery li:active span5{
    bottom: 1.525em;
    opacity: 1;
 }
#gallery li:hover span6,
#gallery li:active span6{
    bottom: 1.525em;
    opacity: 1;
 }
#gallery img {
    display: block; 
    width: 100%;
    height: auto;

    
    box-sizing: border-box;
}
#gallery video {
    display: flex; 
    width: 100%;
    height: auto;
     width: 27%;
    margin-left: 45px;
    margin-top: 20px;

    
    box-sizing: border-box;
}
#gallery span {
     color: #fff;
    position: absolute;
    top: 1.0em;
    left: 4.5em;
    font-family: sans-serif;
    font-style: bold;
    font-weight: bold;
    font-size: 1em;
    background-color: rgba(255, 255, 255, 0);
    line-height: 7em;
    text-align: left;
    opacity: 0; 
    height: 20px;
    
}
#gallery span2 {
    position: absolute;
    top: 2.0em;
    left: 4.5em;
    color: #fff;
    font-family: sans-serif;
    font-style: bold;
    font-weight: bold;
    font-size: 1.em;
    background-color: rgba(255, 255, 255, 0);
    line-height: 7em;
    text-align: left;
    opacity: 0; 
    height: 20px;
    
 }
#gallery span3 {
    position: absolute;
    top: 3.0em;
    left: 4.5em;
    color: #fff;
    font-family: sans-serif;
    font-style: bold;
    font-weight: bold;
    font-size: 1.em;
    background-color: rgba(255, 255, 255, 0);
    line-height: 7em;
    text-align: left;
    opacity: 0; 
    height: 20px;
    
 }
#gallery span4 {
    position: absolute;
    top: 1.1em;
    left: 5em;
    color: #fff;
    font-family: sans-serif;
    font-style: bold;
    font-weight: bold;
    font-size: 1.em;
    background-color: rgba(255, 255, 255, 0);
    line-height: 7em;
    text-align: left;
    opacity: 0; 
    height: 20px;
    
 }
#gallery span5 {
    position: absolute;
    top: 2.1em;
    left: 5em;
    color: #fff;
    font-family: sans-serif;
    font-style: bold;
    font-weight: bold;
    font-size: 1.em;
    background-color: rgba(255, 255, 255, 0);
    line-height: 7em;
    text-align: left;
    opacity: 0; 
    height: 20px;
    
 }
#gallery span6 {
    position: absolute;
    top: 3.1em;
    left: 5em;
    color: #fff;
    font-family: sans-serif;
    font-style: bold;
    font-weight: bold;
    font-size: 1.em;
    background-color: rgba(255, 255, 255, 0);
    line-height: 7em;
    text-align: left;
    opacity: 0; 
    height: 20px;
    
 }

.column {
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
   }
body {
    font-family: sans-serif;
}
{box-sizing: border-box}


.container {
  position: relative;
  width: 50%;
  max-width: 300px;
}


.image {
  display: block;
  width: 100%;
  height: auto;
}
.video{
	 display: block;
     width: 100%;
     height: auto;
}
.overlay {
  position: absolute; 
  bottom: 0; 
  background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.5); /* Black see-through */
  color: #f1f1f1; 
  width: 100%;
  transition: .5s ease;
  opacity:0;
  color: white;
  font-size: 20px;
  padding: 20px;
  text-align: center;
}
.container:hover .overlay {
  opacity: 1;
}

.row {
  display: -ms-flexbox; 
  display: flex;
  -ms-flex-wrap: wrap; 
  flex-wrap: wrap;
  padding: 0 0px;
    
}


.column {
  -ms-flex: 55%; 
  flex: 25%;
  max-width: 25%;
  padding: 0 4px;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}

.row img {
  margin-top: 35px;
    margin-left:40px;
  
  width: 100%;
}
@media screen and (max-width: 800px) {
  .column {
    -ms-flex: 50%;
    flex: 50%;
    max-width: 50%;
    min-width: 50%;
  }
@media screen and (max-width: 600px) {
  .column {
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
    min-width: 100%;
     
  
  }
2

Yes, but are you sure?
On small screens like mobiles, the images would be very small if you don’t wrap them. That may not be a big deal for thumbnails alone. But you say they have text overlays, that will be a problem when very small.

3

Hi,

Thank you for your reply. On mobile the text doesn’t appear as you can’t hover with the touchscreen, so it clicks straight onto the page that the thumbnail is linked too.

4

I notice you are in-lining a fixed width and height with the style attribute. Probably not a good idea, as in-line styles can override your CSS. Ideally you want flex to control the image width.
The width and height attributes in the img are not a problem, in fact not a bad thing to have.

3 Likes
5

Shouldn’t the width and height values just be integers?

3 Likes
6

So what would be your expectation on mobile for this effect?

Some devices will treat a first quick touch as a hover effect but some will just navigate to the destination. For mobile you would be better off placing the caption under the image by default or on top of the image if you don’t mind it hiding the image. The other alternative is to use js to display the overlay on touch and then check for a second touch and navigate to the link destination. Quite a lot of work for a small effect :slight_smile:

Css doesn’t do "IF or "“unless”. It’s either one or the other if you want automatic alignment.

You could create containers that take up 16.666% width (6 per row) but then you’d need to change the widths manually if you had videos in a row that you wanted wider. It all depends on how you are laying this out or whether it is random or dynamic.

If you can’t specify the logic easily then CSS won’t be much use on its own. :slight_smile:

Also it looks like you want the 6 images to take up all the room on the row (with even gaps) and that presents other problems. You show 6 images in your image above but you have one wide image filling the gap. That doesn’t look like a natural alignment because one item is wider than the others. To do that you would need to create rows of only 6 items and then set each item to flex:1 to take up the extra space equally.

If you had videos in the row then you would need to only output 4 of them per row (e.g. a row wrapper containing 4 items).

As you can see its not that straight forward when you start adding if and unless into the mix. CSS likes things to be straight forward. :slight_smile:

1 Like
7

Yes.

2 Likes
8

Here’s a very rough re-jig of your code to try for 6 across if possible.

<div class="row">
  <ul id="gallery">
    <li>
      <a href="Sister-Series-1" rel="history" class="image-link">
        <figure>
          <img src="https://freight.cargo.site/t/original/i/22e1317617dbff2186899574b1982bc5e9d1aaed43f5cc9cc9097cb6feecbc7d/1.jpg" height="200" width="140">
          <figcaption>Sister Series<br>5 photographs</figcaption>
        </figure>
      </a>
    </li>
    <li>
      <a href="Sister-Series-1" rel="history" class="image-link">
        <figure>
          <img src="https://freight.cargo.site/t/original/i/22e1317617dbff2186899574b1982bc5e9d1aaed43f5cc9cc9097cb6feecbc7d/1.jpg" height="200" width="140">
          <figcaption>Sister Series<br>5 photographs</figcaption>
        </figure>
      </a>
    </li>

    <li>
      <a href="Figures-in-Light-1" rel="history" class="image-link">
        <figure>
          <img src="https://freight.cargo.site/t/original/i/aa18cddcb1605fac708232ac5c022a008ecaa73cef8bbbeb0b9daf857b60a673/moore_esme_0012.jpg" class="image" height="200" width="140">
          <figcaption>Figures in Light<br>9 photographs</figcaption>
        </figure>
      </a>
    </li>

    <li>
      <a href="Camera-Obscura-1" rel="history" class="image-link">
        <figure>
          <img src="https://freight.cargo.site/t/original/i/6b4abed70e1ed7ac5dbb3e7b6992012d09c685e7e9265400ae0271ea051914e7/2P7A6158-copy.jpg" class="image" height="200" width="140">
          <figcaption>Camera Obscura<br>5 photographs</figcaption>
        </figure>
      </a>
    </li>
    <li>
      <a href="Camera-Obscura-1" rel="history" class="image-link">
        <figure>
          <img src="https://freight.cargo.site/t/original/i/6b4abed70e1ed7ac5dbb3e7b6992012d09c685e7e9265400ae0271ea051914e7/2P7A6158-copy.jpg" class="image" height="200" width="140">
          <figcaption>
            Camera Obscura<br>
            5 photographs
          </figcaption>
        </figure>
      </a>
    </li>

    <li>
      <a href="Madness-of-Ming-1" rel="history" class="image-link">
        <figure>
          <img src="https://freight.cargo.site/t/original/i/73ed5ec47bf4e860f4532a00d1764c839645f3ebeae4fb34b3191753e818101f/3.jpg" height="200" width="140">
          <figcaption>
            Madness of Ming
            5 photographs
          </figcaption>
        </figure>
      </a>
    </li>

    <li class="video">
      <a href="Side-by-Side-Sisters" rel="history">
        <figure>
          <video width="300" height="200" autoplay="" muted="" loop="">
            <source src="https://files.cargocollective.com/c782770/Side-by-Side-Sisters---no-sound-resized.mp4" type="video/mp4">
          </video>
          <figcaption>
            Side by Side, Sisters<br>
            SHOWstudio Fashion Film Awards 2019<br>
            <span>Film 1:38</span>
          </figcaption>
        </figure>
      </a>
    </li>

    <li><a href="Josey-Hongjoo-1" rel="history" class="image-link">
        <figure>
          <img src="https://freight.cargo.site/t/original/i/54b17dd106f4f800bcba00f2cb189c5b344e0f8e449a03f0bea1fd3e156b140f/CSM5477.jpg" height="200" width="140">
          <figcaption>
            Josey<br>
            Hongjoo Yeom
            <span>5 photographs</span>
          </figcaption>
        </figure>
      </a>
    </li>
    <li><a href="Sholly-1" rel="history" class="image-link">
        <figure>
          <img src="https://freight.cargo.site/t/original/i/49d382dd2b6cfbba905fe82968773b732e18293d61bb44b4d978cc2a50ed7165/19-copy.jpg" height="200" width="140">
          <figcaption>
            Sholly<br>
            Charlene Ong<br>
            <span>6 photographs</span>
          </figcaption>
        </figure>
      </a>
    </li>
    <li><a href="Portrait-of-Eman-1" rel="history" class="image-link">
        <figure>
          <img src="https://freight.cargo.site/t/original/i/5056d0456084d753bbd26fa196e4361c72c470129199708477f6cda722c20f36/CSM5249-1.jpg" height="200" width="140">
          <figcaption>
            Portrait of Eman<br>
            Noctis Magazine<br>
            <span>9 photographs</span>
          </figcaption>
        </figure>
      </a>
    </li>

    <li class="video"><a href="Portrait-of-Eman-Film" rel="history">
        <figure>
          <video width="300" height="200" autoplay="" muted="" loop="">
            <source src="https://files.cargocollective.com/c997240/Portrait-of-Eman-no-sound.mp4" type="video/mp4">
          </video>
          <figcaption>
            Portrait of Eman<br>
            Noctis Magazine<br>
            <span>Film 1:52</span>
          </figcaption>
        </figure>
      </a>

    </li>
    <li><a href="Josey-Izy-1" rel="history" class="image-link">
        <figure>
          <img src="https://freight.cargo.site/t/original/i/883b11ffa48393f1dc8798a1fca8011bc653a6f150cc072f16b17f731cdc4d90/CSM2128.jpg" height="200" width="140">
          <figcaption>
            Josey<br>
            Izy Mckinlay<br>
            <span>2 photographs</span>
          </figcaption>
        </figure>
      </a>
    </li>
    <li><a href="Madness-of-Ming-1" rel="history" class="image-link">
        <figure>
          <img src="https://freight.cargo.site/t/original/i/7d235852264701ee37e9e28dd3efe7134ef6d15fe004b3fabf9d75ef37d81984/14.jpg" height="200" width="140">
          <figcaption>Madness of Ming<br>5 photographs</figcaption>
        </figure>
      </a>
    </li>
    <li>
      <a href="Portrait-of-Eman-1" rel="history" class="image-link">
        <figure>
          <img src="https://freight.cargo.site/t/original/i/83712e11b9016058361a285c53a8313157d696c08ae90bfd011645fd1707f7ed/csm-23512.jpg" height="200" width="140">
          <figcaption>Portrait of Eman<br>Noctis Magazine<br><span>9 photographs</span></figcaption>
        </figure>
      </a>
    </li>

    <li class="video"><a href="Dancing-Around-the-Violins" rel="history">
        <figure>
          <video width="300" height="200" autoplay="" muted="" loop="">
            <source src="https://files.cargocollective.com/c997240/Dancing-around-the-violins-no-sound.mp4" type="video/mp4">
          </video>
          <figcaption>
            Dancing Around the Violins<br>
            Film 1:36
          </figcaption>
        </figure>
      </a>
    </li>

    <li><a href="Gracie" rel="history" class="image-link">
        <figure>
          <img src="https://freight.cargo.site/t/original/i/c3df9300957093ecdc903453488421df6712567eb8eb9ec47a2153309a21781b/MOORE_ESME_0001.jpg" height="200" width="155">
          <figcaption>Gracie<br>1 photograph</figcaption>
        </figure>
      </a>
    </li>
    <li class="video">
      <a href="Sabirah" rel="history">
        <figure>
          <video width="300" height="200" autoplay="" muted="" loop="">

            <source src="https://files.cargocollective.com/c997240/SABIRAH-Fashion-film_upload-new-new.mp4" type="video/mp4">
          </video>
          <figcaption>Sabirah<br>London Fashion Week SS'21<br><span>Film 1:45</span></figcaption>
        </figure>
      </a>
    </li>

    <li class="video"><a href="The-Beautifully-Grotesque-and-Us" rel="history">
        <figure>
          <video width="300" height="200" autoplay="" muted="" loop="">

            <source src="https://files.cargocollective.com/c997240/beautifully-grotesque-no-sound.mp4" type="video/mp4">
          </video>

          <figcaption>
            The Beautifully Grotesque, and Us<br>
            <span>Film 2:06</span>
          </figcaption>
        </figure>
      </a>
    </li>

    <li><a href="Panoramic-Bodies-1" rel="history" class="image-link">
        <figure>
          <img src="https://freight.cargo.site/t/original/i/821ec7852a5ecf0490ed398f30e0741c60a6891f4762451e304edf59cff40e3d/8-copy.jpg" height="200" width="300">
          <figcaption>Panoramic Bodies<br>2 photograph</figcaption>
        </figure>
      </a>
    </li>

    <li><a href="Francis-de-Lara-1" rel="history">
        <figure>
          <video autoplay="" muted="" loop="" width="300" height="200">
            <source src="https://files.cargocollective.com/c997240/Gold-Earring---Index-new---no-sound.mp4">
          </video>
          <figcaption>Francis de Lara Campaign '20<br>3 Films</figcaption>
        </figure>
      </a>
    </li>

    <li><a href="The-Beautifully-Grotesque-and-Us-1" rel="history" class="image-link">

        <figure>
          <img src="https://freight.cargo.site/t/original/i/38b8c4e639c631700ff4a178ed589857e9d53dfb57c96174b54497eddf2ee101/GREY.jpg" height="200" width="300">
          <figcaption>The Beautifully Grotesque, and Us<br>5 photographs</figcaption>
        </figure>
      </a>
    </li>

    <li><a href="Gracie" rel="history" class="image-link">
        <figure>
          <img src="https://freight.cargo.site/t/original/i/3700f628c0b6243ad4c317131ed93f436cc5047e243e3c4a96a6e1737a90fc5f/0001.jpg" height="200" width="155">
          <figcaption>Portrait of Eman<br>Noctis Magazine<br>9 photographs</figcaption>
        </figure>
      </a>
    </li>
  </ul>
</div>

body {
  background-color: #fff;
  font: 0.95em / 1.32em sans-serif;
  color: rgba(255, 255, 255, 1);
  font-family: sans-serif;
}

#gallery {
  display: flex;
  position: relative;
  flex-wrap: wrap;
  list-style-type: none;
  align-items: center;
  max-width: 1280px;
  margin: auto;
  background: #ccc;
  gap: 2rem;
  padding: 2rem;
}
#gallery {
  box-sizing: border-box;
}
#gallery * {
  box-sizing: inherit;
}
#gallery li {
  position: relative;
  flex: 1 0 16.6%;
  flex-basis: calc(16.6% - 3rem);
  background-color: rgba(210, 207, 207, 0);
  overflow: hidden;
  max-width: 25%;
}
.h3 {
  font-size: 5em;
}
#gallery img {
  display: block;
  width: 100%;
  height: auto;
}
#gallery .video {
  flex: 1 0 25%;
}
#gallery video {
  width: 100%;
  height: auto;
}
#gallery figcaption,
#gallery figure {
  display: block;
  margin: 0;
  padding: 0;
}
#gallery figcaption {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: absolute;
  padding: 10px;
  overflow: auto;
  text-align: center;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  font-family: sans-serif;
  font-weight: bold;
  font-size: 1em;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  text-align: left;
  opacity: 0;
  transition: 0.5s ease;
  pointer: events none;
}

#gallery li:hover figcaption {
  opacity: 1;
}
#gallery figure {
  display: inline-flex;
  flex-direction: column;
  margin: auto;
  position: relative;
}

Screen Shot 2021-02-28 at 14.44.02
Screen Shot 2021-02-28 at 14.44.021381Ă—959 171 KB

The caption is aligned centrally (horizontally and vertically) in respect to the image by using flex and absolute positioning. Don’t try to position every little snippet of text. (Also validate your code to find any typos. I have validated the html code I posted.)

Obviously as Sam said above once the screen gets smaller the text won’t fit on the images so you would need media queries perhaps to go down to 3 a row or less. You would also need to factor in what behaviour you need for touch.

Also don’t make up your html tags. Use classes if you need an element to behave differently. there is no such element as span2, span3 or li2 or li3 etc.:slight_smile:

Lastly those images are massive as some are several megabytes. Small images like that should only be a few K so use thumbnails instead of the real image. Even when displaying the large image at full whole page size you should be looking to optimise to around a tenth of the file size you have.

9

Hi,

Thank you for all your help and advice, I have now managed to get my website exactly how I would like.

1 Like
11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.