Responsive background image

Status
Niet open voor verdere reacties.

glompie

Gebruiker
Lid geworden
24 dec 2011
Berichten
196
Hoe maak je een plaatje wat hovert ook nog responsive?

De code op deze pagina werkt niet in Chrome.
Hij laadt er het 2e plaatje niet. Wat is hier niet goed aan?

Op deze pagina werkt het wel maar dan heb ik een background-image in css, wat dan
weer niet werkt is het responsive maken van die banner.

Hoe doe je dit??
 
Het is mooier dit met css op te lossen. Hieronder een voorbeeld met een transition effect, dit werkt in alle browsers; bij IE vanaf IE10 (IE9 misschien ook, weet ik niet).
Code:
<div id="wrapper">
<img src="foto1.png" alt="">
<img src="foto2.png" alt="">
</div>

... en in je CSS ...

#wrapper { /* aan je layout aanpassen */
  width: 50%;
  margin: 0 auto;
  position: relative;
  line-height: 1;
}
#wrapper img {
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  display: block;
  position: absolute;
  top: 0; /* leg fotos op elkaar */
  left: 0;
  opacity: 1;
  -webkit-transition: opacity .5s;
     -moz-transition: opactiy .5s;
       -o-transition: opacity .5s;
          transition: opacity .5s;
}
#wrapper img:last-child:hover {
  opacity: 0;
  -webkit-transition: opacity .5s;
     -moz-transition: opactiy .5s;
       -o-transition: opacity .5s;
          transition: opacity .5s;
}
Zorg dat beide foto's (in dit voorbeeld foto1.png en foto2.png) even groot zijn.
Met min-width en max-width kun je begrenzingen toevoegen aan #wrapper

Suc6. Have fun :)
 
Laatst bewerkt:
Hartelijk dank!
Ik moet er nog wat aan aanpassen maar het principe van over elkaar plakken en
bij hover de opacity van de bovenste op 0 zetten werkt in ieder geval prima.
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan