Advertisement
teenagegoths

image split on hover

Oct 5th, 2021
1,574
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!-- full code @ https://codepen.io/tubbox/pen/qBjzWJb -->
  2.  
  3. <style>#top {transform:translate(0,1.5em); transition:0.3s;}
  4.  
  5. #bottom {transition:0.3s; transform:translate(0,-1.5em);}
  6.  
  7. #split:hover #top {transform:translate(0,0em); transition:0.3s;}
  8.  
  9.  #split:hover #bottom {transform:translate(0,0em); transition:0.3s;}</style>
  10.  
  11. <style>#right{transform:translate(6em, -11em); transition:0.3s;}
  12.  
  13. #left {transition:0.3s;
  14. transform:translate(-6em, 10em);}
  15.  
  16. #break:hover #right {transform:translate(7.5em, -11em); transition:0.3s;}
  17.  
  18. #break:hover #left{transform:translate(-7.5em, 10em);transition:0.3s;}</style>
Advertisement
Advertisement
Advertisement
RAW Paste Data Copied
Advertisement