How to make a div Scale without changing the child elements?

Asked

Viewed 507 times

3

How do I make the content opacity and size within paragraphs not change when the transition occurs?!

#quadrados{
    padding-top: 2vw;
    overflow: hidden;
    width: 100%;
    height: 30.5vw;
    background:url(imgs/parede.jpg);
    background-position: bottom;
    background-size: 100%;
}

.quadrado{
    width: 18.5vw;
    margin-left: 5vw;
    height: 18.5vw;
    overflow: hidden;
    float: left;
    display: inline-block;
    box-sizing: border-box;
    border-radius: 1vw;
    opacity: 0.9;
    border: 2px solid black;
}

.quadrado p{
    text-align: center;
    margin-top: 8.2vw;
    opacity: 1;
    font-size: 2vw;
}


.quadrado{
    transition: all .2s ease-in-out;
}


.quadrado:hover{
    transform: scale(1.1);
    opacity: .3;
}
<section id="quadrados">
        <div class="quadrado" id="quadrado1">
            <p>O texto altera</p>
        </div>
        <div class="quadrado" id="quadrado2">
            <p>Quero que o texto</p>
        </div>
        
        <div class="quadrado" id="quadrado3">
            <p>Permaneça</p>
        </div>
        
        <div class="quadrado" id="quadrado4">
            <p>Inalterado</p>
        </div>
    </section>

html css html5 css3 css-transitions
  • 1

    Remove all reference opacity of the CSS

  • 1

    the size of the text will increase equally...

2 answers

3


Can exchange opacity for rgba in the attributes border, being like this:

.quadrado{
    width: 18.5vw;
    margin-left: 5vw;
    height: 18.5vw;
    overflow: hidden;
    float: left;
    display: inline-block;
    box-sizing: border-box;
    border-radius: 1vw;
    border: 2px solid rgba(0, 0, 0, .9);
}

.quadrado:hover{
    transform: scale(1.1);
    border-color: rgba(0, 0, 0, .3);
}

And to prevent the transform affects the child, can place within the other child elements transform when the :hover, for example:

.quadrado:hover > * {
    transform: scale(.9);
}

The .9 makes up for the .1 augmentation used in scale(1.1), that is, in the element .quadrado is increased +0.1 and the child(s) element(s) is reduced -0.1

Note:

I applied the transition for the child elements .quadrado > * to avoid the effect of increases and decreases in child elements

.quadrado, .quadrado > * {
   transition: all .2s ease-in-out;
}

First example

Should stay like this:

Note: The image https://i.stack.Imgur.com/Minz1.png is only for testing

#quadrados{
    padding-top: 2vw;
    overflow: hidden;
    width: 100%;
    height: 30.5vw;
    background:url(https://i.stack.imgur.com/MinZ1.png);
    background-position: bottom;
    background-size: 100%;
}

.quadrado{
    width: 18.5vw;
    margin-left: 5vw;
    height: 18.5vw;
    overflow: hidden;
    float: left;
    display: inline-block;
    box-sizing: border-box;
    border-radius: 1vw;
    border: 2px solid rgba(0, 0, 0, .9);
}

.quadrado p{
    text-align: center;
    margin-top: 8.2vw;
    opacity: 1;
    font-size: 2vw;
}

.quadrado, .quadrado > * {
    transition: all .2s ease-in-out;
}

.quadrado:hover{
    transform: scale(1.1);
    border-color: rgba(0, 0, 0, .3);
}

.quadrado:hover > * {
    transform: scale(.9);
}
<section id="quadrados">
    <div class="quadrado" id="quadrado1">
        <p>O texto altera</p>
    </div>
    <div class="quadrado" id="quadrado2">
        <p>Quero que o texto</p>
    </div>
    
    <div class="quadrado" id="quadrado3">
        <p>Permaneça</p>
    </div>
    
    <div class="quadrado" id="quadrado4">
        <p>Inalterado</p>
    </div>
</section>

Second example

The effect of transform still causes some Blur, Apart from the fact that the PA (author of the question) stated that it is necessary opacity as it is using background images in each frame adding another element

The element . photo will be position: absolute; and will be related to the parent element, it was also necessary to remove the overflow: hidden; of .quadrado, so with this:

.quadrado:hover .foto {
    transform: scale(1.1);
    opacity: .3;
}

It was necessary to apply the z-index in the element .quadrado p so he doesn’t get down:

.quadrado p{
    position: relative;
    z-index: 101; /*necessário para que fique na frente*/

The opacity and the transform are only applied to the element .foto, follows the full code:

#quadrados{
    padding-top: 2vw;
    overflow: hidden;
    width: 100%;
    height: 30.5vw;
    background:url(https://i.stack.imgur.com/MinZ1.png);
    background-position: bottom;
    background-size: 100%;
}

.quadrado{
    width: 18.5vw;
    margin-left: 5vw;
    height: 18.5vw;
    float: left;
    display: inline-block;
    box-sizing: border-box;
    position: relative; /*posiciona a imagem dentro do quadrado*/
}

.quadrado p{
    position: relative;
    z-index: 101; /*necessário para que fique na frente*/
    text-align: center;
    margin-top: 8.2vw;
    opacity: 1;
    font-size: 2vw;
}

.quadrado .foto {
    position: absolute;
    z-index: 100;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 1vw;
    border: 2px solid black;
    opacity: .9;
    transition: all .2s ease-in-out;

    background-size: cover; /* a imagem ocupa o elemento todo */
}

.quadrado:hover .foto {
    transform: scale(1.1);
    opacity: .3;
}
<section id="quadrados">
    <div class="quadrado" id="quadrado1">
        <p>O texto altera</p>
        <div class="foto" style="background-image: url(https://i.stack.imgur.com/xTaZV.jpg);"></div>
    </div>
    <div class="quadrado" id="quadrado2">
        <p>Quero que o texto</p>
        <div class="foto" style="background-image: url(https://i.stack.imgur.com/Yo2KL.jpg);"></div>
    </div>
    
    <div class="quadrado" id="quadrado3">
        <p>Permaneça</p>
        <div class="foto" style="background-image: url(https://i.stack.imgur.com/xTaZV.jpg);"></div>
    </div>
    
    <div class="quadrado" id="quadrado4">
        <p>Inalterado</p>
        <div class="foto" style="background-image: url(https://i.stack.imgur.com/Yo2KL.jpg);"></div>
    </div>
</section>

  • 1

    I had already found a similar solution and the problem that everyone complains about is the Blur in the text during the transformation, the rgba is out of the question, I put here a div with border as an example, in fact these Divs will be filled by images... Thank you very much for the suggestion, I will apply it until I find a more effective method

  • 1

    @Droopy the images in div are <img> or backgrounds?

  • 1

    are backgrounds

  • 1

    @Droopy I will edit, I have a suggestion to avoid Blur and at the same time use opacity

  • my idea is to do something similar to the menu made of squares on this site (scroll down maximo) http://www.wix.com/mystunningwebsites/hiker?experiment_id=cake_33315425%5E214&utm_campaign=af_17%40www.webcreate.io%2F&utm_medium=paid_referral&utm_source=Affiliate

  • 2

    @Droopy edited response, see the second example

  • That’s exactly what I was looking for, thanks for the help was great, I just have one more small detail to adjust, I want the text initially hidden so I used visibility:Idden; in the paragraph and in the Hover I used visibility:Visible; but would like to have a smooth transition from Hidden to Visible and an instant transition from Visible to Hidden, so I used Transition: . 2s Ease-in; but when I take the mouse from the image the text is still visible 0.2 seconds, which I must use in Transition to have the animation only when I pass the mouse over and as soon as the mouse takes the text away?!

  • @Droopy to see if this is what you want https://jsfiddle.net/hxqyeebt/

  • It wasn’t quite that way but I liked the effect so I will use =))

Show 4 more comments

3

You can create a pseudo-element ::before who will suffer the scale, leaving the content of div inert.

pseudo-elementos are like child elements virtually created, where you can change your CSS styles independently, without changing the element that created them (learn more about pseudo-elementos).

#quadrados{
    padding-top: 2vw;
    overflow: hidden;
    width: 100%;
    height: 30.5vw;
    background:url(imgs/parede.jpg);
    background-position: bottom;
    background-size: 100%;
}

.quadrado{
    width: 20.6vw;
    margin-left: 3vw;
    height: 20.6vw;
    float: left;
    display: inline-block;
    position: relative;
}

.quadrado p{
    text-align: center;
    margin-top: 9vw;
    font-size: 2vw;
}

.quadrado::before{
   content:'';
    transition: all .2s ease-in-out;
    width: 18.5vw;
    height: 18.5vw;
    display: inline-block;
    border-radius: 1vw;
    border: 2px solid black;
    position: absolute;
    top: 1vw;
    left: 1vw;

}

.quadrado:hover::before{
    transform: scale(1.1);
    opacity: .3;
}
<section id="quadrados">
     <div class="quadrado" id="quadrado1">
         <p>O texto altera</p>
     </div>
     <div class="quadrado" id="quadrado2">
         <p>Quero que o texto</p>
     </div>
     
     <div class="quadrado" id="quadrado3">
         <p>Permaneça</p>
     </div>
     
     <div class="quadrado" id="quadrado4">
         <p>Inalterado</p>
     </div>
 </section>

  • 1

    I pasted the changed code part to my Brackets and for some reason Hover doesn’t work

  • 1

    @Droopy, make sure it’s not a CSS cache problem.

  • 1

    @Droopy see if the code has been copied correctly... the slightest difference may not work. CSS is very boring in this regard.

  • 1

    Thanks for the answer, there were no copying errors, at least I didn’t notice any, I started studying html/css recently and found the @Guilherme Nascimento P. method simpler, at least I understood better that way than using :before

  • 1

    @Droopy quiet. I’m glad you found the solution. But when you learn the pseudo-elements, surely you will see that it is much simpler to work with them in these cases.

Browser other questions tagged html css html5 css3 css-transitions

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