ffej Posted July 8, 2016 Share Posted July 8, 2016 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 More sharing options...
dsonesuk Posted July 9, 2016 Share Posted July 9, 2016 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 More sharing options...
Ingolme Posted July 9, 2016 Share Posted July 9, 2016 The z-index can also be set with position: relative. Link to comment Share on other sites More sharing options...
dsonesuk Posted July 9, 2016 Share Posted July 9, 2016 The fact is that z-index can be used for position elements using relative, absolute, or fixed, but in this situation just using position: relative; only, is enough. Link to comment Share on other sites More sharing options...
ffej Posted July 9, 2016 Author Share Posted July 9, 2016 Works great. Thanks for the example and info. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now