Jump to content

aniamations and text


ffej
 Share

Recommended Posts

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)}

Link to comment
Share on other sites

The box will always position itself under prev element unless you move bov over text, or take text out of flow using position absolute

<!DOCTYPE html>
<html>
<head>
<style> 
body {padding:20px}

.box {background:pink ;width:100px ;height:100px ; 
  transition:transform 2s ease-in-out 0s ;pointer-events:none; position: relative;}

 .trigger {border:20px solid #999; background: #ddd;
           width:100px;height:100px;
position: relative;}
.trigger div:first-child {max-width:100px;
max-height: 100px;
position: absolute; top:0; left: 0;
z-index:0;
}
.trigger:hover .box
  {transform:translate(150px, 100px)rotate(20deg);}
}


</style>
</head>
<body>

<div class ="trigger">
<div><p>hi</p></div>
<div class="box">
</div>
</div>

 



</body>
</html>
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...