Need Help in Div inside Div

1

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

11
11960×523 12.1 KB

Results from this code

12
121366×768 57 KB

13
131366×768 62.6 KB

For Further Explanation here is my codepen link

2

Give the divs a class name.

	<div class="tf">This div apply CSS Tranformation</div>
	<div class="ta"><div>This div apply CSS Transition</div></div>

.tf:hover {
  transform: translate(15px, 15px) rotate(25deg) scale(1, 1) skew(15deg, 15deg);
  color: blue;
}
.ta > div:hover {
  font-size: 50px;
  transition: font-size 3s;
}