<div class="container"> 
  <div class="box">
    <div class="img-box">
      <img src="https://images.pexels.com/photos/1367105/pexels-photo-1367105.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Landscape" title="Landscape">
    </div>
    
    <div class="content">
      <h2>
        Tittle
      </h2>
      
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
          tempor incididunt ut labore et dolore magna aliqua.
      </p>
      
      <a href="javascript:void(0);">
        Read More
      </a>
    </div>
  </div>
  
  <div class="box">
    <div class="img-box">
      <img src="https://images.pexels.com/photos/1482927/pexels-photo-1482927.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Landscape" title="Landscape">
    </div>
    
    <div class="content">
      <h2>
        Tittle
      </h2>
      
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
          tempor incididunt ut labore et dolore magna aliqua.
      </p>
      
      <a href="javascript:void(0);">
        Read More
      </a>
    </div>
  </div>
  
  <div class="box">
    <div class="img-box">
      <img src="https://images.pexels.com/photos/1955134/pexels-photo-1955134.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Landscape" title="Landscape">
    </div>
    
    <div class="content">
      <h2>
        Tittle
      </h2>
      
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
          tempor incididunt ut labore et dolore magna aliqua.
      </p>
      
      <a href="javascript:void(0);">
        Read More
      </a>
    </div>
  </div>
  
  <div class="box">
    <div class="img-box">
      <img src="https://images.pexels.com/photos/1743165/pexels-photo-1743165.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Landscape" title="Landscape">
    </div>
    
    <div class="content">
      <h2>
        Tittle
      </h2>
      
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
          tempor incididunt ut labore et dolore magna aliqua.
      </p>
      
      <a href="javascript:void(0);">
        Read More
      </a>
    </div>
  </div>
</div>

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

*:focus {
  outline: 0;
}

html {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
  align-items: center;
  display: flex;
  font-family: consolas;
  justify-content: center;
  min-height: 100vh;
}

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  position: relative;
  width: 1200px;
}

.container .box {
  height: 400px;
  margin: 20px 0;
  overflow: hidden;
  position: relative;
  width: 280px;
}

.container .box .img-box {
  background-color: #000000;
  clip-path: circle(400px at center 100px);
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  transition: clip-path 0.5s 0.5s ease;
  width: 100%;
}

.container .box:hover .img-box {
  clip-path: circle(80px at center 100px);
}

.container .box .img-box img {
  height: 100%;
  left: 0;
  object-fit: cover;
  position: absolute;
  top: 0;
  width: 100%;
}

.container .box .content {
  bottom: 0;
  height: 55%;
  left: 0;
  padding: 20px;
  position: absolute;
  text-align: center;
  width: 100%;
}

.container .box .content h2,
.container .box .content p,
.container .box .content a {
  margin: 5px 0 10px 0;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease,
              transform 0.5s ease;
}

.container .box .content a {
  background-color: #000000;
  color: #ffffff;
  display: inline-block;
  padding: 5px; 
  text-decoration: none;
}

.container .box:hover .content h2,
.container .box:hover .content p,
.container .box:hover .content a {
  opacity: 1;
  transform: translateY(0);
}

.container .box:hover .content h2 {
  transition-delay: 0.5s;
}

.container .box:hover .content p {
  transition-delay: 0.7s;
}

.container .box:hover .content a {
  transition-delay: 0.9s;
}