Display a grid of images with hover effects

by Tan

HTML

<div class="container">


<div id="thumb_container" class="thumb_container stage1">
	
<div class="thumb_item">
<div><img src="https://www.hloe.co.uk/sample.jpg" width="300" height="400" alt="Enfys" fetchpriority="high"/></div>
<a href="/campervans/enfys/">Enfys</a>
</div>

<div class="thumb_item sold">
<div><img src="https://www.hloe.co.uk/sample.jpg" width="300" height="400" alt="Enfys" fetchpriority="high"/></div>
<a href="/campervans/enfys/">Enfys 2</a>
</div>

<div class="thumb_item">
<div><img src="https://www.hloe.co.uk/sample.jpg" width="300" height="400" alt="Enfys" fetchpriority="high"/></div>
<a href="/campervans/enfys/">Enfys</a>
</div>

<div class="thumb_item">
<div><img src="https://www.hloe.co.uk/sample.jpg" width="300" height="400" alt="Enfys" fetchpriority="high"/></div>
<a href="/campervans/enfys/">Enfys</a>
</div>

<div class="thumb_item">
<div><img src="https://www.hloe.co.uk/sample.jpg" width="300" height="400" alt="Enfys" fetchpriority="high"/></div>
<a href="/campervans/enfys/">Enfys</a>
</div>

<div class="thumb_item">
<div><img src="https://www.hloe.co.uk/sample.jpg" width="300" height="400" alt="Enfys" fetchpriority="high"/></div>
<a href="/campervans/enfys/">Enfys</a>
</div>




	

	
</div>	
	
</div>

CSS

* {box-sizing: border-box;}
html {font-size: 62.5%;font-family: Arial;}	
body {background-color:#ffffff;}
.container {max-width:1600px;margin:40px auto 0 auto;padding:0 5%;}

.thumb_container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-content: flex-start;
    align-content: flex-start;
    -webkit-align-items: stretch;
    align-items: stretch;
	gap: 2rem;
    }
	
.thumb_item {width:300px;height:360px;background-color:#ffffff;position:relative;overflow:hidden;cursor:pointer;padding:20px;border-radius:5px;box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.2),0px 0px 50px 0px rgba(0,0,0,0.1);}
.thumb_item div {width:260px;height:260px;overflow:hidden;}
.thumb_item:hover img {transform: rotate(3deg) scale(1.1);-webkit-transform: rotate(3deg)  scale(1.1);transition:all 0.5s ease;}	
.thumb_item img {object-fit: cover;object-position: center;width: 260px;height: 260px;transition:all 0.5s ease;}
.thumb_item a {position:absolute;top:0;bottom:0;left:0;right:0;text-align:center;display:flex;justify-content: center;align-items: flex-end;padding:0 0 20px 0;}	

.thumb_title {color:var(--gs_e);width:100%;text-align:center;font-family: 'Amatic SC';font-size:4rem;margin:0;padding:1rem 1rem;background-color: rgba(0, 0, 0, 0.6);}

.sold::after {width:100%;padding:2px 0;background-color:red;content: "SOLD!";position:absolute;top:10%;left:-35%;rotate:-45deg;text-align:center;color:#ffffff;font-size:16px;}