Archiv-Modus von Basti1012 Lösungspage

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

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>

basti1012.bplaced.net

Bild gegen Bild tauschen ( css Lösung 2)

Code