.container {
      position: relative;
      width: 30%;
      float: left;
     
    }
    
    .image2 {
      display: inline-block;
      width: 100%;
      height: auto;
      box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.8);
      border-radius: 50%;
    }
    
    .overlay {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      height: 100%;
      width: 100%;
      opacity: -0;
      transition: .5s ease-in;
      background-color: #fed51c;
      border-radius: 50%;
    }
    
    .container:hover .overlay {
      opacity: 100%;
      font-family: 'Archer 8r', 'Archer A', 'Archer B';
    }
    
    .text {
      color: white;
      font-weight: 800;
      font-size: 40px;
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      text-align: center;
    }
    
    
    
    /* If the screen size is 600px wide or less, set the text size to 15px */
@media screen and (max-width: 600px) {
  .text {
    font-size: 12px;
  }
}