Werner-Zenk.de - Zur Startseite

Bilder mit Hover-Effekt

Fernglas - Hintergrundbild mit Zoom FunktionAnimierte Box mit Keyframes

<style>
#landschaft {
 width: 344px;
 height: 210px;
 background: url("landschaft.jpg");
 background-size: 100% 100%;
 background-position: center left;
 transition: all 2.5s;
 animation: bewegeHintergrund 10s ease 1s infinite alternate;
}

div#fernglas {
 width: 344px;
 height: 210px;
 position: Absolute;
 background-image: url("fernglas.png");
}

div#fernglas:hover ~ #landschaft {
 background-size: 270% 270%;
}

@keyframes bewegeHintergrund {
 100% {
  background-position: center right;
 }
}
</style>

<div>
 <div id="fernglas"></div>
 <div id="landschaft"></div>
</div>

Blumengarten

Siehe auch: Bilder wieder langsam schließen

<style>
div#blumenGarten {
 width: 640px;
 height: 120px;
 background: url("01.jpg") center left 0px, url("02.jpg")  center left 0px, url("03.jpg") center left 0px, url("04.jpg") center left 0px;
 background-repeat: no-repeat;
}

div#blumenGarten:hover {
 animation: bewegeBlumen 2s;
 animation-fill-mode: forwards;
}

@keyframes bewegeBlumen {
 100% {
  background: url("01.jpg") center left 0px, url("02.jpg")  center left 160px, url("03.jpg") center left 320px, url("04.jpg") center left 480px;
  background-repeat: no-repeat;
 }
}
</style>

<div id="blumenGarten"></div>

Glücksrad

▼  
<style>
div#gluecksrad {
 width: 300px;
 height: 300px;
 margin: Auto;
 animation: spin .5s linear infinite;
 animation-play-state: paused;
}

@keyframes spin {
 to {
  transform: rotate(1turn); /* Umdrehungen: 1turn, 2turn, 10turn, ... */
 }
}

div#gluecksrad:hover {
 animation-play-state: running;
}

div#zeiger {
 font-size: 2rem;
 margin: Auto;
 margin-bottom: -15px;
 width: 0px;
}
</style>

<div id="zeiger">&#9660;</div>
<div id="gluecksrad"><img src="rad.png"></div>

Fortsetzung folgt …


Seite: