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="/js_webseite/jquery.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>