Bilder mit Hover-Effekt 1 2

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

<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

<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>

„Fortsetzung folgt …”