.card {position: relative;width:300px;height:171.6px;perspective: 1000px;margin:10px;}
.souhait {position: relative;width:300px;height:200px;perspective: 1000px;margin:20px;}
.anniversaire {position: relative;width:300px;height:388.2px;perspective: 1000px;margin:20px;}
.invitation {position: relative;width:300px;height:388.2px;perspective: 1000px;margin:20px;}
.carnet {position: relative;width:200px;height:297px;perspective: 1000px;margin:20px;}
.signet img {margin:5px;filter:drop-shadow(0px 0px 20px #00afef);}
.post img {width:300px;margin:5px;filter:drop-shadow(0px 0px 20px #00afef);}
.web img {margin:5px;filter:drop-shadow(0px 0px 20px #00afef);}


.card img, 
.souhait img, 
.anniversaire img,
.invitation img,
.carnet img
{
    position: absolute;
    top: 0;
    left: 0;
    width:100%;
    height:auto;
    filter:drop-shadow(0px 0px 10px #00afef);
    transition: transform 1s ease , opacity 0.5s ease;
}

.card img#image1,
 .souhait img#image1, 
 .anniversaire img#image1,
 .invitation img#image1,
 .carnet img#image1
 {
    transform-style: preserve-3d;
}

.card img#image2, 
.souhait img#image2, 
.anniversaire img#image2,
.invitation img#image2,
.carnet img#image2
{
    transform: rotateY(180deg);
    transform-style: preserve-3d;
    opacity: 0;
}

.card:hover img#image1, 
.souhait:hover img#image1, 
.anniversaire:hover img#image1,
.invitation:hover img#image1,
.carnet:hover img#image1
{
    transform: rotateY(-180deg);
}

.card:hover img#image2, 
.souhait:hover img#image2, 
.anniversaire:hover img#image2,
.invitation:hover img#image2,
.carnet:hover img#image2
{
    transform: rotateY(0deg);
    opacity: 1;
}