Make an element grab the entire screen using Hover

Asked

Viewed 37 times

1

I was making a layout in fig, and I’m passing it to html and css, but I wanted to make an animation. As you can see I have a pink triangle, and I wanted to pass the mouse over it, it zoom in and "catch" the blue part (written when you have it), and the whole screen would be pink overlapping the blue color.

body{
            background-color:#3ED3F3;
        }
        .triangulo {
            width: 0;
            height: 0;
            border-top: 300px solid transparent;
            border-bottom: 300px solid transparent;
            border-left: 600px solid #F33E8A;
            position: absolute;
            left: 0px;
            top:0px;
        }
        .triangulo:hover{

         }
<body>
    <div class="container">
        <div class="triangulo"> </div>
    </div>
   
</body>

html css css3 css-hover css-animations

1 answer

0

You can use the property Transform with the value Scale to increase the size of the triangle. I also suggest including the property Transition to soften the effect. I don’t know if that’s right, because maybe if you include the texts that you mentioned that’s not the best option, but based on what you went through that seems to be the simplest solution.

Don’t forget to check the compatibility of the properties with the browser.

body{
            background-color:#3ED3F3;
        }
        .triangulo {
            width: 0;
            height: 0;
            border-top: 300px solid transparent;
            border-bottom: 300px solid transparent;
            border-left: 600px solid #F33E8A;
            position: absolute;
            left: 0px;
            top:0px;
            transition: transform .5s ease-in-out; /* deixa o efeito suave */
        }
        .triangulo:hover{
            /* aumenta o tamanho do triângulo 10 vezes 
            este é um valor um pouco exagerado, altere à seu gosto */
            transform: scale(10);
         }
<body>
    <div class="container">
        <div class="triangulo"> </div>
    </div>
   
</body>

Browser other questions tagged html css css3 css-hover css-animations

You are not signed in. Login or sign up in order to post.