Bilder mit Hover-Effekt 1
Bewegliches Fernglas!
- Hintergrundbild mit Zoom Funktion ❘ Animierte Box mit Keyframes
Bei einem Klick auf das Fernglas wird die Zoom-Funktion erhöht.
<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">▼</div> <div id="gluecksrad"><img src="rad.png"></div>
smoke on the water
- Image-Highlight (Spotlight) Generator
<style> div#smoke { width: 390px; height: 207px; background: linear-gradient(30deg, Transparent 10%, #DDDDDD), url(bild.png); } div#smoke:hover { width: 390px; height: 207px; background: linear-gradient(30deg, Transparent 100%, #DDDDDD), url(bild.png); } </style> <div id="smoke"></div>
Licht und Schatten
<style> div#schattenlicht { width: 390px; height: 207px; background: linear-gradient(0deg, Transparent 1%, #000000 80%), url(bild.png); } div#schattenlicht:hover { width: 390px; height: 207px; background: linear-gradient(0deg, Transparent 1%, #ffd700 80%), url(bild.png); } </style> <div id="schattenlicht"></div>
Orange County

<style> div#boxshadow > div { position: relative; } div#boxshadow > div > #innen { position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; width: 444px; /* Die Breite des Bildes */ box-shadow:inset 1px 1px 0px 0px rgba(255, 112, 43, 0.5); transition: box-shadow 800ms linear; } div#boxshadow > div > #innen:hover { box-shadow:inset 1px 1px 100px 100px rgba(255, 112, 43, 0.5); transition: box-shadow 800ms linear; } div#boxshadow img { display: block; } </style> <div id="boxshadow"><div><div id="innen"></div> <img src="bild.png" alt=""> </div> </div>

Ein weiteres Beispiel bei: Mobirise Tutorials
<style> div#rahmen-innen > div { position: relative; width: 444px; /* Die Breite des Bildes */ } div#rahmen-innen > div > #rahmen { position: absolute; border-width: 104px; border-style: solid; border-color: rgba(255, 155, 106, 0.5); top: 0px; bottom: 0px; left: 0px; right: 0px; transition: border-width 800ms linear; } div#rahmen-innen > div > #rahmen:hover { border-width: 15px; transition: border-width 500ms linear; } div#rahmen-innen img { display: block; } </style> <div id="rahmen-innen"><div><div id="rahmen"></div> <img src="bild.png" alt=""> </div> </div>
Rasenmäher
<style> #schaf { width: 586px; height: 220px; margin: Auto; background: url(img/schaf.png); border: Solid 3px #989D31; } #window { width: 586px; height: 220px; margin: Auto; } #window:hover { background-position: left top; animation:button2Animation 1s both running; } @keyframes button2Animation { from { background: url(img/maeh.png); background-repeat: No-Repeat; background-position: left top; } to { background: url(img/maeh.png); background-repeat: No-Repeat; background-position: right bottom; } } </style> <div id="schaf"><div id="window"></div></div>
Nord Nord-West
- Kompass-Animation
<style> #kompass { width: 313px; height: 313px; margin: Auto; background: url("img/kompass.webp"), radial-gradient(circle, #3DB7FF 10%, #FFFFFF 84%); border-radius: 100%; box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.7); } #nadel { width: 313px; height: 313px; margin: Auto; background-image: url("img/nadel.webp"); filter: drop-shadow(0px 0px 5px rgba(70, 70, 70,0.8)); margin-top: -313px; animation: Nadel 3.8s ease-in-out infinite alternate; } #nadel:hover { animation-play-state: paused; } @keyframes Nadel{ 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } </style> <div id="kompass"></div> <div id="nadel"></div>
Hamster, ganz allein Zuhause

<style> div#kaefig { text-align: center; margin: 25px; background-image: url("kaefig.png"); background-repeat: No-Repeat; background-position: Center Center; height: 200px; line-height: 360px; } .derHamster { animation-duration: .3s; animation-timing-function: ease-in-out; animation-fill-mode: forwards; animation-iteration-count: infinite; cursor: Pointer; } .derHamster:hover { animation-name: zittern; } @keyframes zittern { 10% { transform: translate(-2px, -3px) scale(1.01, 1.01); } 20% { transform: translate(3px, 2px) scale(.99, .99); } 30% { transform: translate(-4px, -5px) scale(1.01, 1.01); } 40% { transform: translate(2px, 3px) scale(1, 1); } 50% { transform: translate(-1px, -2px) scale(.98, .98); } 60% { transform: translate(0px, 3px) scale(1.02, 1.02); } 70% { transform: translate(-2px, -4px) scale(1, 1); } 80% { transform: translate(3px, 5px) scale(.99, .99); } 90% { transform: translate(-5px, -3px) scale(1.1, 1.1); } 100% { transform: translate(3px, 1px) scale(.95, .95); } } </style> <div id="kaefig"><img class="derHamster" src="hamster.png" alt=""></div>
„Fortsetzung folgt …”