Advertisement
dianakko

floating image with grayscale filter on hover

Oct 19th, 2021
2,621
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 0.56 KB | None | 0 0
  1. <style>
  2. .imagen {
  3. animation-name: floating;
  4. animation-duration: 3s;
  5. animation-iteration-count: infinite;
  6. animation-timing-function: ease-in-out;
  7. filter: saturate(100%); transition: all 0.01s ease;
  8. }
  9.  
  10. img:hover { filter: saturate(0%);}
  11.  
  12. @keyframes floating {
  13. 0% { transform: translate(0, 0px); }
  14. 50% { transform: translate(0, 15px); }
  15. 100% { transform: translate(0, -0px); }
  16. }
  17.  
  18.  
  19. </style>
  20.  
  21. <img src="https://64.media.tumblr.com/1f2d81472f0476d82cc222b269d773d8/tumblr_osu0r3yF3K1w4fe0do1_500.jpg" class="imagen">
  22.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement