borrowed this snippet for practice..However, I'm trying to add text to the trigger, under the box that can be seen when the box moves. When I use a text element, example <p> hi </p> ..on the .trigger the .box is moved under the text instead of over it.
Not sure how to go about this. Any help is appreciated!
<div class ="trigger"> <div class="box"> </div> </div>
body {padding:20px}
.box {background:pink ;width:100px ;height:100px ; transition:transform 2s ease-in-out 0s ;pointer-events:none}
.trigger {border:20px solid #999 ; background: #ddd ; width:100px ;height:100px}
.trigger:hover .box {transform:translate(150px, 100px)rotate(20deg)}