How to make a Hover box

Question

Good evening, I saw on the following website https://cheftech.com.br/funcionalidades/ an interesting box Hover, it has a card format and turns when the mouse passes over, I researched about the component but did not find an example like the site above, only variations. Would anyone have that example or know the exact name of that effect ?

Answer 1

The name of this type of "component" is flipcard, it is widely used around and it is not difficult to work with it after you understand the way it works.

But you can search for tutorials out there that you find in the hills, right here has one of our dear Maujor https://www.maujor.com/tutorial/criando-animacao-flipping-com-css.php

The basic tips I’ll give you are as follows. The element of :hover must be the container external, otherwise when the card turns its "active area" will disappear from the screen for an instant and will bugging the effect. Even put the perspective in the container external also, to give the correct depth of the effect.
Ex code with this bug in :hover: https://codepen.io/wandersonsilva/pen/rVpPOW

.container { perspective: 800; } /* brinque com esse valor para entender melhor */  

Another important point is the property backface-visibility: hidden she makes the back part of her card only appear when it is rotated forward and also hides the front of the card when it is rotated back in case the card does not have a background.

The transform-style: preserve-3d is what will give the effect of 3D when the card rotate on the axis itself, together as the perspective will give the impression of the card "jump" the screen towards the user looking at the screen.
Ex code without the effect perspective https://codepen.io/provob/pen/ogLEww

Again, to better understand don’t forget to read, here is another article https://davidwalsh.name/css-flip

Here follows a practical example. (I left the comments in the code)

h1, h2 {
  font-size: 2.2em;
  margin: 0;
}

.card-container {
  /* é a "distancia relativa" entre o movimento do cartão e o quento ele se "aproxima" na tela do usuário - Brinque com esse valor pra testar */
  perspective: 800px;
  display: inline-block;
}

.card {
  position: relative;
  line-height: 200px;
  text-align: center;
  color: #000;
  margin: 20px;
  width: 200px;
  height: 200px;
  transition: all 0.6s ease;
  /* faz o efeito do flip no proprio eixo parecer em 3D */
  transform-style: preserve-3d;
}


.front, .back {
  background: #f00;
  position: absolute;
  width: 200px;
  height: 200px;
  top: 0;
  left: 0;
  /* esconde o lado que estiver na parte de traz do card caso não tenha um background no card */
  backface-visibility: hidden;
}

.back {
  transform: rotateY(180deg);
}

/* quando fizer o hover o carde dentro do containr flipa */
.card-container:hover .card {
  transform: rotateY(180deg);
  cursor: default;
}

<div class="card-container">
    <div class="card">
        <div class="front">
            <h1>Hello</h1>
        </div>
        <div class="back">
            <h2>Goodbye</h2>
        </div>
    </div>
</div>

Source: https://codepen.io/jeffaustin81/pen/qERoqR