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>

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>

Fortsetzung folgt …


Seite: