See similar

by pj_js15

HTML

<div class="card-container">
  <div class="see-similar">
    <div class="icon-see-sim">&nbsp;</div>
    <span class="hover-text">See Similar</span>
  </div>

</div>

SCSS

.card-container {
  margin: 20px;
  border: 1px solid gray;
  height: 300px;
  width: 250px;
  background-color: brown;
  position: relative;
  
  .see-similar {
    margin: 5px;
    width: 40px;
    height: 40px;
    border-radius: 50px;
    background-color: rgba(255, 255, 255, 0.75);
    z-index: 20;
    transition: width 0.5s;
    //position: absolute;
    //right: 10px;
    
    .icon-see-sim {
      position: absolute;
      top: 8px;
      left: 8px;
      width: 20px;
      height: 20px;
      border: 1px solid blue;
      //display: inline-block;
    }
    
    .hover-text {
      display: none;
      //animation: fadeOut 1s;
    }
    
    @keyframes fadeIn {
      0% { opacity: 0; }
      100% { opacity: 1; }
    }
    
    &:hover {
      cursor: pointer;
      width: 120px;
      border-radius: 50px;
      transition: width 0.5s;
      
      .hover-text {
        display: inline-block;
        position: absolute;
        top: 10px;
        left: 35px;
        animation: fadeIn 4s;
      }
    }
  }
}