How to scale a div without changing the child elements?

Question

How to scale a div without changing the child elements?

Navigation

#1 by (3 votes)
#2 by (3 votes)

3

How do I make the opacity and size of the content within the 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 html5 css css3

asked by anonymous 22.12.2017 / 21:11

2 answers

3

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

pseudo-elementos are like child elements created virtually, where you can change your styles in CSS 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>

22.12.2017 / 21:53

Textarea increase as text Keep script running

score 3 · Accepted Answer

You can change opacity by rgba in attributes border , thus:

.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 transform from affecting the child, you can put another transform inside the child elements when :hover occurs, for example:

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

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

Note:

I applied the transition to the child elements .quadrado > * to avoid the effect of increases and decreases in the child elements
.quadrado, .quadrado > * {
   transition: all .2s ease-in-out;
}

First example

It should look like this:

Note: The link image is test-only

#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 , except that the AP (author of the question) stated that opacity is required because it is using background images in each frame by adding one

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

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

It was necessary to apply the z-index to the .quadrado p element so that it does not fall below:

.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 , it follows the complete 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>