logo
  Fotowissel
  Leuk effect voor je foto. Als je met je muis er over gaat, dan verschijnt er een andere foto. Leuk als je bijvoorbeeld een foto maakt van een gebouw en even later staat ie er niet meer.
Als je bij <a class="nowandthen"> alt zet.. dus zo: <a class="nowandthen alt">, dan gaat hij de andere kant op.

 

 
IN DE CSS
a.nowandthen{
position:relative;
display: block;
overflow:hidden;
cursor: pointer;
width: 300px; /* set width of image container */
height: 200px; /* set height of image container */
}
a.nowandthen img{
position:absolute;
left:0;
top:0;
width: 100%;
height: 100%;
-moz-transition: all 0.5s ease; /* enable transition */
-webkit-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
z-index: 2;
clip: rect(0,300px,200px,0); /* clip values should be rect(0,image_width,image_height,0) */
}
a.nowandthen img:nth-of-type(2){ /* hide "after" image beneath "before" so it's initially out of view */
z-index: 1;
}
a.nowandthen:hover img:nth-of-type(1){ /* clip "before" image to reveal "after" */
clip: rect(0,0,434px,0); /* clip values should be rect(0,0,image_height,0) */
opacity: 0;
}
a.nowandthen.alt{
width: 300px; /* set width of image container */
height: 200px; /* set height of image container */
}
a.nowandthen.alt img{
clip: rect(0,300px,200px,0); /* clip values should be rect(0,image_width,image_height,0) */
}
a.nowandthen.alt:hover img:nth-of-type(1){
clip: rect(0,0,200px,0); /* clip values should be rect(0,0,image_height,0) */
}

 
TUSSEN DE BODY TAGS
<a class="nowandthen">
<img src="01.jpg" alt="">
<img src="02.jpg" alt=""></a>

 
eind