<h1>Clip-Path <span class="header-span">Hover Effect</span></h1><hr>
<div class="all-the-foods">
  <div class="clip-path-container">
    <div class="description-holder">
      <h4>Bibimbap</h4>
      <p>Bibimbap means "mixed rice." The origin of bibimbap is unknown but has become popular in many countries despite its unknown ancestry.</p>
    </div>
    <div class="food bibimbap"></div>
  </div>

  <div class="clip-path-container">
    <div class="description-holder">
      <h4>Pizza</h4>
      <p>Pizza is a yeasted flatbread topped with tomato sauce and cheese. The term was first recorded in 10th century Italy, making it older than everything.</p>
    </div>
    <div class="food pizza"></div>
  </div>
  
  <div class="clip-path-container">
    <div class="description-holder guac-holder">
      <h4>Guacamole</h4>
      <p>Guacamole is an avocado-based dip created by the Aztecs in what is now Mexico. Avocados were frequently called alligator pears.</p>
    </div>
    <div class="food guacamole"></div>
  </div>
  
  <div class="clip-path-container">
    <div class="description-holder">
      <h4>Cookie</h4>
      <p>Cookies are a baked or cooked food that is small, flat, and sweet. Its American name derives from the Dutch word koekje, meaning little cake.</p>
    </div>
    <div class="food cookie"></div>
  </div>
  
  <div class="clip-path-container">
    <div class="description-holder">
      <h4>Donut</h4>
      <p>Donuts have been found at many ancient sites, the earliest origins are generally traced back to the olykoek Dutch settlers of early New York.</p>
    </div>
    <div class="food donut"></div>
  </div>
  
  <div class="clip-path-container">
    <div class="description-holder">
      <h4>Pancake</h4>
      <p>Archaeological evidence suggests that pancakes were probably the earliest and most widespread cereal food eaten in prehistoric societies.</p>
    </div>
    <div class="food pancake"></div>
  </div>

</div>

body { 
  font-family: 'Overpass', sans-serif;
  text-transform: uppercase; 
  color: #fff;
}

h1 {
  font: 700 36px 'Oswald', sans-serif;
  text-align: center;
  color: #000;
}

.header-span {
  display: block;
  font-weight: 100;
}

hr { 
  max-width: 5em; 
  margin-bottom: 30px; 
}

.all-the-foods {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

div.clip-path-container {
  display: inline-block;
  position: relative;
  height: 250px;
  width: 250px;
  margin: 10px ;
  padding: 3px;
  cursor: pointer;
  transition: all .2s ease-in-out;
  overflow: hidden;  
  border-radius: 50%;
  border-collapse: separate; 
  background-color: #222;
}

.clip-path-container:focus,
.clip-path-container:active,
.clip-path-container:hover {
  border-radius: 50%;
  outline: none;
} 

.food {
  height: 250px;
  width: 250px;
  background-size: cover;
  transition: all .2s ease-in-out;
  transform: scale(1.5); 
  outline: none;
  overflow: hidden;  
  clip-path: polygon(0 100%, 0 0, 52% 0, 52% 100%);
  clip-path: polygon(0 100%, 0 0, 100% 0, 100% 100%);
}


.clip-path-container:hover .food {
  clip-path: polygon(50% 100%, 50% 0, 100% 0, 100% 100%);
  transform: scale(1.1);
  
}

.clip-path-container:hover .description-holder { 
  left: 20px;
  opacity: 1;
}

.description-holder {
  position: absolute;
  top: 35px;
  left: 120px;
  height: 300px;
  width: 100px;
  transition: all .4s ease-in-out;
  transition-delay: .1s;
  opacity: 0;
  text-align: right;
}

/*.guac-holder {
  top: 45px;
}*/

.description-holder h4 {
  font-size: 14px;
  margin-bottom: -8px;
}

.description-holder p {
  max-width: 100px;
  font-size: 12px;
  line-height: 14px;
  text-transform: none;
  
}

.bibimbap {
  background-image: url('https://www.unclebens.ca/-/media/unclebens/media/recipedetailbanner/13-korean-bibimbap.png?h=500&la=en&w=500&hash=1436C7B3A67D31A23D164C836E148C914BFB5686');
  background-position: 0 0;
}

.pizza {
  background-image: url('https://68.media.tumblr.com/0611cb5f1f60e58690483ef61f507161/tumblr_inline_mthhxpDHvE1rpjrqw.png');
}

.guacamole {
  background-image: url('https://cabofresh.com/wp-content/themes/cabofresh/assets/images/homepage/homepage-guacbowl.png');
  background-position: 50% 90%;
}

.cookie {
  background-image: url('http://purepng.com/public/uploads/large/purepng.com-american-cookiecookieamericandelicioussnacksweetyummybiscuit-21525886868xdoig.png');
  background-position: 50% 90%;
}

.donut {
  background-image: url('https://images-na.ssl-images-amazon.com/images/I/91AKQkCR3UL._AC_SX522_.jpg');
  background-position: 50% 70%;
}

.pancake {
  background-image: url('https://selfproclaimedfoodie.com/wp-content/uploads/pumpkin-buttermilk-pancakes-top.jpg');
  background-position: 50% 90%;
}