<div class="container">
<div class="gallery cf">
<div class="image">
<figure>
<img src="https://www.topgear.com/sites/default/files/styles/fit_1960x1102/public/images/news-article/carousel/2020/02/24a6d62af5a265a38dc8f7459ed5f439/5e3b42c10aeb12935afbf21c_tuatara_07.jpg?itok=LCcLbqwk" alt="" />
</figure>
<figcaption>
MERCEDES
</figcaption>
</div>
<div class="image">
<figure>
<img src="https://www.topgear.com/sites/default/files/styles/fit_1960x1102/public/images/news-article/carousel/2020/02/24a6d62af5a265a38dc8f7459ed5f439/5e3b44a60aeb122e45fbf8b0_tuatara_08.jpg?itok=DQmuPfvV" alt="" />
</figure>
<figcaption>
TUATARA
</figcaption>
</div>
<div class="image">
<figure>
<img src="http://www.hdcarwallpapers.com/walls/bugatti_veyron_grand_sport_vitesse_3-HD.jpg" alt="" />
</figure>
<figcaption>
BUGATTI
</figcaption>
</div>
<div class="image">
<figure>
<img src="https://t2.gstatic.com/images?q=tbn:ANd9GcTh5H9kzc39yUFKOrjYNxXA7IYDtUpj6rC6fYz9G6LHxmnlAIRt" alt="" />
</figure>
<figcaption>
LAMBORGHINI
</figcaption>
</div>
<div class="image">
<figure>
<img src="https://www.topgear.com/sites/default/files/styles/fit_1960x1102/public/images/news-article/carousel/2020/02/24a6d62af5a265a38dc8f7459ed5f439/5e3b42c10aeb12935afbf21c_tuatara_07.jpg?itok=LCcLbqwk" alt="" />
</figure>
<figcaption>
PORSCHE
</figcaption>
</div>
<div class="image">
<figure>
<img src="https://www.hdcarwallpapers.com/walls/honda_nsx_5k_2-HD.jpg" alt="" />
</figure>
<figcaption>
HONDA
</figcaption>
</div>
<div class="image">
<figure>
<img src="https://www.topgear.com/sites/default/files/styles/fit_1960x1102/public/images/news-article/carousel/2020/02/24a6d62af5a265a38dc8f7459ed5f439/5e3b44a60aeb122e45fbf8b0_tuatara_08.jpg?itok=DQmuPfvV" alt="" />
</figure>
<figcaption>
FORD
</figcaption>
</div>
<div class="image">
<figure>
<img src="https://t2.gstatic.com/images?q=tbn:ANd9GcTh5H9kzc39yUFKOrjYNxXA7IYDtUpj6rC6fYz9G6LHxmnlAIRt" alt="" />
</figure>
<figcaption>
MASERATI
</figcaption>
</div>
</div>
</div>
*{
margin: 0;
padding:0;
}
.cf:before,.cf:after{
content: '';
display: table;
}
.cf:after{
clear:both;
}
h1{
text-transform: uppercase;
text-align: center;
margin-top: 10px;
color:#444;
background-color: #f1f1f1;
padding: 10px;
font-size: 14px;
}
.container{
position: relative;
margin: 50px auto;
max-width: 80%;
background-color: #f1f1f1;
padding: 10px;
border:1px solid #c5c5c5;
}
.gallery{
width: 100%;
overflow: hidden;
}
.image{
/* float:left not working in mozilla*/
display: inline-block;
padding: 2%;
background-color: #fff;
margin: 1%;
width: 18%;
box-shadow: 2px 2px 4px rgba(0,0,0,0.6);
text-align: center;
border:1px solid #c3c3c3;
cursor: pointer;
}
.image figure{
width: 100%;
margin-bottom: 5px;
}
.image figure img{
width: 100%;
}
figcaption{
background-color: rgba(0,0,0,0.8);
text-transform: uppercase;
text-align: center;
padding: 5px;
font-size: 16px;
font-family: sans-serif;
cursor: pointer;
color: slategrey;
max-width:100%;
font-weight: bold;
}
figcaption:hover{
color: #fff;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.