How to make a hover box [closed]

Question

How to make a hover box [closed]

Navigation

#1 by (3 votes)

2

Good night, I saw on the following site link an interesting hover box, it has a card format and turns when the mouse goes over, I researched the component but did not find an example equal to the above site, only variations. Would anyone have this example or know the exact name of this effect?

html5 css3

asked by anonymous 05.12.2018 / 00:31

1 answer

Open word file through .jar Opening page via AJAX with Lightbox

score 3 · Accepted Answer

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

But you can search tutorials wherever you find the hills, right here has one of our dear Maujor link

The basic tips I will give you are as follows. The element of :hover should be the outermost container , otherwise when the card flips its "active area" will disappear from the screen for a moment and go buggar It is made. Include the perspective in the container external too, to give the correct depth of the effect. Ex of code with this bug in :hover : link

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

Another important point is the backface-visibility: hidden property, which causes the back part of your card to appear only when it is rotated forward and also hides the front of card when it is rotated backwards if the card does not have a background.

The transform-style: preserve-3d is what will give the 3D effect when the card rotate on the axis itself, along with perspective will give the impression of the card "jump" the screen towards the user looking at the Ex code without the effect perspective link

Once again, to understand better, do not hesitate to read, here is another article link

Here is 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: link