Create custom HTML banner hover overlay style

Question

Create custom HTML banner hover overlay style

Navigation

#1 by (2 votes)

-2

Hello, I would like to create a hover overlay banner similar to the one found on this site: link

Basically,whenyouhoverovertheimage,thelayerwhere"Experiencia" is written moves, and when you remove the mouse from the top of the image, it returns to the origin point.

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

Thank you in advance.

javascript html css wordpress

asked by anonymous 18.08.2018 / 23:08

1 answer

I would like to know how I put this fixed header equal the menu of this site next to the logo [closed] Value rounding up php does not work [closed]

score 2 · Accepted Answer

Example using only css , hovering over the size of the div child will be 100% of div parent

.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>