<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;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.