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">&#9660;</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 …”