<h2>Welcome</h2>
<div class="container">
<div class="card card1">
  <img class="adve" src="https://cdn.cnn.com/cnnnext/dam/assets/170407220921-07-iconic-mountains-pitons-restricted.jpg" alt="Mountains">
  <div class="text">
    <h4 class="adv">Adventure</h4> 
    <h5>Mountain</h5>
  </div>
</div>
  <div class="card card2">
  <div class="text">
    <h4 class="fash">Fashion</h4> 
    <h5>dresses</h5>
  </div>
</div>
  <div class="card card3">
    <img class="food" src="https://www.rockrecipes.com/wp-content/uploads/2011/04/DSC3343-e1458916544317.jpg">
  <div class="text">
    <h4 class="cook">Cooking</h4> 
    <h5 class="pic">This is a pastry</h5>
  </div>
</div>
  <div class="card card1">
  <img class="adve" src="https://upload.wikimedia.org/wikipedia/commons/2/23/Lake_mapourika_NZ.jpeg" alt="Mountains">
  <div class="text">
    <h4 class="adv">Adventure</h4> 
    <h5>lake</h5>
  </div>
</div>
  <div class="card card2">
  <div class="text">
    <h4 class="fash">Fashion</h4> 
    <h5>shirts</h5>
  </div>
</div>
  <div class="card card3">
    <img class="food" src="https://img.buzzfeed.com/thumbnailer-prod-us-east-1/fc7068ad8096421e8ce04e9e3dcc4fbd/BFV37839_PuffPastryBreafkastCups_FB1080SQ.jpg">
  <div class="text">
    <h4 class="cook">Cooking</h4> 
    <h5 class="pic">This is an egg</h5>
  </div>
</div>
  <div class="card card1">
  <img class="adve" src="http://www.bravotv.com/sites/nbcubravotv/files/styles/blog-post--mobile/public/field_blog_image/2018/02/jet-set-sinking-sailboat.jpg?itok=0ZiCpp3c&timestamp=1518547470" alt="Mountains">
  <div class="text">
    <h4 class="adv">Adventure</h4> 
    <h5>boat</h5>
  </div>
</div>
  <div class="card card2">
  <div class="text">
    <h4 class="fash">Fashion</h4> 
    <h5>shorts</h5>
  </div>
</div>
  <div class="card card3">
    <img class="food" src="https://www.jennieo.com/docs/how-to-season-a-turkey_a_v2_square.jpg">
  <div class="text">
    <h4 class="cook">Cooking</h4> 
    <h5 class="pic">How to season</h5>
  </div>
</div>
  <div class="card card1">
  <img class="adve" src="https://shorelinebeachservices.com/wp-content/uploads/2016/04/Beach2131.jpg" alt="Mountains">
  <div class="text">
    <h4 class="adv">Adventure</h4> 
    <h5>Shorline Adventures</h5>
  </div>
</div>
  <div class="card card2">
  <div class="text">
    <h4 class="fash">Fashion</h4> 
    <h5>sandals</h5>
  </div>
</div>
  <div class="card card3">
    <img class="food" src="https://d3cizcpymoenau.cloudfront.net/images/33382/SFS_oven_fried_bacon_bw_014.jpg">
  <div class="text">
    <h4 class="cook">Cooking</h4> 
    <h5 class="pic">Morning Food!</h5>
  </div>
</div>
</div>
@import url('https://fonts.googleapis.com/css?family=Roboto');

body{
  font-family: Roboto;
  background: #cecece;
}

h5{
  margin-top: -15px;
  font-size: 20px;
}

.container{
  width: 100%; 
  padding: 2px 16px;
}
.card {
    transition: .75s;
    margin-left: 10px;
    margin-top: 10px;
    background: white;
    border-radius: 5px;
    float: left;
    width: 200px;
    height: 250px;
}
.card:hover{
  z-index: 10 !important;
  transform: scale(1.05);
  
}

.adve{
  width: 200px;
  height: auto;
  border-bottom: 6px solid #2155a8;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
}

.text{
  padding: 2px 16px;
  
}

.card1{
  
}

.card2{
  border-top: 6px solid #bc1c1c;
  height: 125px;
}

.adv{
  color: #2155a8;
  margin-top: 0;
}

.fash{
  color: #bc1c1c;
  margin-top: 0;
}
.cook{
  position: absolute;
  color: #145b09;
  margin-top: -170px;
}
.pic{
  margin-top: -145px;
}
.food{
  width: 200px;
  height: auto;
  border-bottom: 6px solid #145b09;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
}

$('.container').isotope({
  itemSelector: '.card',
  layoutMode: 'masonry',
  sortBy : 'random'
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://code.jquery.com/jquery-3.3.1.min.js
  2. https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js