Avez-vous lu cet article :
Chronique d'alain01 : Tutoriel "Ajout d'un cadre de photo" ?
A la fin de l'article, j'indiquais qu'on pouvait aller encore plus loin dans les effets sur les photos.
Je vous donne ici quelques pistes.
Rassurez-vous, je ne suis pas expert en CSS, je suis allé butiner, glaner, piocher des infos sur de superbes sites. certains ont apporté également leur expertise et leur expérience dans ce domaine, suite à cet article, sur xoops.org
Des sites magnifiques traitant de CSS :
http://www.css3create.com/Galeries-Photoshttp://designshack.net/articles/css/joshuajohnson-2/http://designshack.net/articles/css/4 ... s-you-can-copy-and-paste/ Effect polaroid avec titre sur la cadre : (voir le lien 3)
Code HTML :
<div class="polaroid">
<p>Sarah, Dec '02</p>
<img src="http://lorempixum.com/200/200/people/1">
</div>
Code CSS :
.polaroid {
position: relative;
width: 220px;
}
.polaroid img {
border: 10px solid #fff;
border-bottom: 45px solid #fff;
-webkit-box-shadow: 3px 3px 3px #777;
-moz-box-shadow: 3px 3px 3px #777;
box-shadow: 3px 3px 3px #777;
}
.polaroid p {
position: absolute;
text-align: center;
width: 100%;
bottom: 0px;
font: 400 18px/1 'Kaushan Script', cursive;
color: #888;
}
Positionnez vos photos parfaitement dans le texte ? 
Code HTML :
<div class="img-box right">
<img src="1.jpg" />
<p>Image right</p>
</div>
Code CSS :
.img-box {
display: table;
}
.img-box.left {
float: left;
margin: 10px 15px 10px 0;
}
.img-box.right{
float: right;
margin: 10px 3px 10px 15px;
}
.img-box.center {
margin: 10px auto;
}
.img-box img {
border-color: #FFFFFF;
border-image: none;
border-style: solid;
border-width: 5px 5px 26px;
box-shadow: 5px 5px 15px #404040;
}
.img-box p {
margin-top: -24px;
margin-left:5px;
padding: 0;
text-align: left;
}
Placez un effet dynamique d'enfoncement : 
Code CSS :
.img-box img:hover {
box-shadow: 1px 1px 3px #404040;
}
Placez un effet dynamique de Zoom avant ? (voir
lien)
Code CSS :
.img-box img:hover {
transform: scale(1.5);
-moz-transition: all 0.6s ease-in-out 0s;
-webkit-transition: all 0.6s ease-in-out 0s;
-o-transition: all 0.6s ease-in-out 0s;
-ms-transition: all 0.6s ease-in-out 0s;
transition: all 0.6s ease-in-out 0s;
}
Un effet de rotation sur la photo : 
Code HTML :
<div class="tilt pic">
<img src="http://lorempixel.com/300/300/transport/5" alt="car">
</div>
Code CSS :
/*TILT*/
.tilt {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.tilt:hover {
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
transform: rotate(-10deg);
}
Au final, allez visiter
ce très beau site qui vient tout juste de mettre en place ce genre d'effets !
![Open in new window](javascript:CaricaFoto("http://nsa33.casimages.com/img/2013/07/05/130705034012710172.jpg");)
![Open in new window](javascript:CaricaFoto("http://designshack.co.uk/wp-content/uploads/imagetreatments-1.jpg");)
![Open in new window](javascript:CaricaFoto("http://uiut.org/master/imageboxshadow/ing-box-shadow.jpg");)
![Open in new window](javascript:CaricaFoto("http://uiut.org/master/imageboxshadow/img-box.gif");)
![Open in new window](javascript:CaricaFoto("http://designshack.co.uk/wp-content/uploads/cssimagehovers-6.jpg");)
![Open in new window](javascript:CaricaFoto("https://www.frxoops.org/uploads/newbb/14931_532567582b8c4.png");)
)
