SCSS

by maya tominaga

HTML

<div class="image-body">
  <div class="image-content">
    <div class="image">
      <img src="https://cdn.pixabay.com/photo/2015/09/09/11/01/animal-931355_1280.jpg" alt="Miniature Dachshund">    
    </div>
    <div class="name">
      Miniature Dachshund
    </div>
  </div>
  <div class="image-content">
    <div class="image">
      <img src="https://cdn.pixabay.com/photo/2017/07/25/14/15/akita-2538276_1280.jpg">
    </div>
    <div class="name">
      Akita Dog
    </div>
  </div>
  <div class="image-content">
    <div class="image">
     <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a1/Shibainu_Maru.jpg/1599px-Shibainu_Maru.jpg">  
    </div>
    <div class="name">
      Shiba Dog
    </div>
  </div>
</div>

SCSS

body {
  background: #fff;
  padding: 10px;
  font-family: Helvetica;
}

.image-body {
  display: flex;
}

.image-content {
  width: 240px;
  height: 150px;
  margin-right: 5px;
  position: relative;
  background-color: #000;
  overflow: hidden;

  &:hover .name {
    opacity: 1;
  }
  
  &:hover .image {
    opacity: 0.5;
    transform: scale(1.1, 1.1)
  }
}

.image {
  transition: all 0.5s;  
}

.name {
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  transition: all 0.5s;  
}

img {
  height: 150px;
}