Zmieniające się zdjęcia

treść karty

<style type="text/css">

div#zdjęcie1 {

position: relative;

   background: url('link do zdjęcia');

   width:500px; /*szerokość*/

   height:669px; /*wysokość*/

background-size:cover;

z-index: 1!important;

 transition:all 2.5s;

   -moz-transition:all 2.5s; /* Firefox 4 */

   -webkit-transition:all 2.5s; /* Safari i Chrome */

   -o-transition:all 2.5s; /* Opera */

}

div#zdjęcie2 {

position: relative;

   background: url('link do zdjęcia');

   width:500px;

   height:669px;

opacity:0;

background-size:100%; /*rozmiar zdjęcia*/

   transition:all 2.5s;

   -moz-transition:all 2.5s; /* Firefox 4 */

   -webkit-transition:all 2.5s; /* Safari i Chrome */

   -o-transition:all 2.5s; /* Opera */

z-index: 2!important;

}

div#zdjęcie2:hover {

position: relative;

   transition:all 2s;

background-size:120%; /*zwiększony rozmiar zdj po najechaniu*/

   -moz-transition:all 2s; /* Firefox 4 */

   -webkit-transition:all 2s; /* Safari i Chrome */

   -o-transition:all 2s; /* Opera */

   opacity:3;

   width:500px;

   height:669px;

}

</style><br />

<center>

<div id="zdjęcie1">

<div id="zdjęcie2">

</div>

</div>

</center>

<div style="margin-top: 10px; text-align: center;">

tutaj wklej treść karty</div>

Przy korzystać jeszcze z innych efektów, nie tylko tych związanych z rozmiarem drugiego zdjęcia. Ze stron CSS Filter Effects lub CSS Filters można wziąć to co ma pojawić się na obrazku, np: div#zdjęcie2:hover { grayscale(1); filter: grayscale(1); } wówczas zdjęcie będzie czarno-białe.