Styling Div Inside Div

[mustajab]

Hello everyone. I am stuck in problem.
I want to apply CSS transition and transformation property on DIV tag only separately. I got a logic and use one div to apply CSS transformation property and then applied div inside div(two div’s) for CSS transition property.

But first div is affecting child div’s. Please help me out to solve this problem. I want separate property for each div. Below are screenshots for my problem explanation

Code

https://codepen.io/mustajab/pen/jZdqgJ?editors=1100

[Xiija]

try adding an ID the div ?
div id=”one”>div #1 apply CSS Tranformation
div id=”two”>div #2 apply CSS Transition

https://codepen.io/Xiija/pen/ddaNje?editors=1100

[mustajab]

xiija thanks for replying. Just to confirm can the above problem be solved without using id or class

[Paulie_D]

It’s not clear what it is you are trying to do.

Do you want to combine the transform / transition on a single div?

So you want the parent’s transform to not affect the child?

Please clarify…in detail.

[Xiija]

Without an ID, you could do this in the css…?
div
{ background-color: khaki;
border:1px solid #222;
}
div:nth-child(1):hover
{ transform: translate(15px,15px) rotate(25deg) scale(1,1) skew(15deg,15deg);
color: blue;
}
div:nth-child(2):hover
{ font-size: 50px;
transition: font-size 3s;
}

[Author]

Posts