Bild gegen Bild tauschen ( css Lösung 2)

Wie kann man ein Bild tauschen , wenn man mit der Maus über das Bild geht ?

Der hier verwendete Code

<html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <style> body { background: #F44336; } .menu-wrapper { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 100px; height: 60px; cursor: pointer; } .hamburger-menu, .hamburger-menu:after, .hamburger-menu:before { width: 100px; height: 10px; } .hamburger-menu { position: relative; transform: translateY(25px); background: white; transition: all 0ms 300ms; } .hamburger-menu.animate { background: rgba(255, 255, 255, 0); } .hamburger-menu:before { content: ""; position: absolute; left: 0; bottom: 25px; background: white; transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1); } .hamburger-menu:after { content: ""; position: absolute; left: 0; top: 25px; background: white; transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1); } .hamburger-menu.animate:after { top: 0; transform: rotate(45deg); transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1); } .hamburger-menu.animate:before { bottom: 0; transform: rotate(-45deg); transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1); } </style> </head> <body> <div class="menu-wrapper"> <div class="hamburger-menu"></div> </div> <script> (function () { $('.menu-wrapper').hover(function() { $('.hamburger-menu').toggleClass('animate'); }) })(); </script> </body> </html>

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!