Create custom interactive HTML banner Hover overlay style

Question

Hello, I would like to create a banner in the style Overlay Hover similar to the one found on this site: http://www.gruporedservicos.com.br/

Basically, when you move the mouse over the image, the layer where "Experience" is written moves, and when you remove the mouse from the image, it goes back to the point of origin.

I broke my head trying to do something similar. I know that the site runs wordpress, so if this is a plugin, I accept names.

Thanks in advance.

Answer 1

Example using only css, by hovering over the size of the div daughter will be 100% of div father

.container {
  position: relative;
  width: 25%;
}

.imagem {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #008CBA;
  overflow: hidden;
  width: 100%;
  height: 30px;
  transition: .5s ease;
}

.container:hover .overlay {
  height: 100%;
}

.texto {
  white-space: nowrap; 
  color: white;
  font-size: 20px;
  position: absolute;
  overflow: hidden;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

<div class="container">
  <img src="https://cdn.pixabay.com/photo/2016/08/08/09/17/avatar-1577909_960_720.png" alt="Avatar" class="imagem">
  <div class="overlay">
    <div class="texto">Texto aqui</div>
  </div>
</div>