Image Thumbnail Gallery View With Text Overlay

Hola!

This time I faced a problem with grid layout for image thumbnails and to show text overlay on them. So let me share my solution with you…

I will be making here a three column grid layout with text overlay on them which will appear on hover on each image thumbnail.

I recently got used to very interesting feature of CSS i.e., flex. So try to use it in all the places that needs symmetrically vertical as well as horizontal alignment. So the strategy which I followed is that I will have a parent wrapper which will wrap my rows. So the parent wrapper will be:

<div class="galDivWrap"></div>

and each of my rows will contain three thumbnail divs, with row div wrapping around them like,

<div class="rowOfGridWrap"> 
<!-- IMG 1 -->
<div class="thumbDiv">
<div class="imgDiv">
<img src="img/slide1.png" />
</div>
<span class="text">
<h2>Image 1</h2>
<p>Subtitle Text here.</p>
</span>
</div>
<!-- IMG 2 -->
<div class="thumbDiv">
<div class="imgDiv">
<img src="img/slide2.png" />
</div>
<span class="text">
<h2>Image 2</h2>
<p>Subtitle Text here.</p>
</span>
</div>
<!-- IMG 3 -->
<div class="thumbDiv">
<div class="imgDiv">
<img src="img/slide3.png" />
</div>
<span class="text">
<h2>Image 3</h2>
<p>Subtitle Text here.</p>
</span>
</div>
</div>

Now when we have skeleton ready, let’s start with the necessary css. Each row will be displayed as flex and aligned center and justified space around. This acts like magic! You will notice that grids are aligned automatically centrally aligned and justified.

.rowOfGridWrap { 
width: 100%;
display: flex;
align-items: center;
justify-content: space-around;
}

Now let’s talk about each thumbnail. The necessary properties that needs to be given is: width, position should be relative, left float and display as block. Viola here we have our grid structure ready!

.thumbDiv { 
width: 50%;
overflow: hidden;
height: 300px;
margin: 0 auto;
position: relative;
}