5 astuces CSS pour vos images
Avez-vous déjà pensé à adapter le style CSS de votre site ? Que vous ayez développé votre site entièrement ou utilisé un CMS comme WordPress, vous pouvez retravailler votre CSS pour personnaliser votre site, ou pour ajouter des effets de style. Pour travailler votre style sous WordPress, utilisez l’éditeur de style dans Apparence -> Editeur de thème et pensez au thème enfant !
Aujourd’hui, quelques idées pour personnaliser les photos de votre site : vous trouverez ci-après une liste de 5 astuces CSS pour dynamiser graphiquement votre web design !
Rappel : le hover
Le hover est une pseudo-classe CSS qui permet d’ajouter un style différent à un élément lorsque la souris le survole. On l’utilise souvent pour montrer à l’utilisateur qu’il y a un lien sur un élément, comme sur un bouton qui change de couleur par exemple :
Les images peuvent elles aussi proposer des liens, vous pouvez donc leur donner un style différent lorsque l’utilisateur les survole !
1. Border et Shadow
Une première idée toute simple : travailler sur le contour et l’ombre de vos images. Que ce soit pour les présenter de manière originale ou pour souligner le hover, vous pouvez ajouter simplement un contour, une ombre ou les deux ! Pour définir une bordure, on utilise la propriété CSS « border » qui condense les 3 caractéristiques d’une bordure à définir : l’épaisseur (« border-width »), le style (« border-style ») et la couleur (« border-color »). Par exemple :
Je rajoute une bordure de 2 pixels d’épaisseur, de forme solide et de couleur noire.
img {
border : 2px solid #000000;
}
l’effet dépend de la couleur choisie
l’effet dépend de la couleur choisie
l’effet dépend de la couleur choisie
l’effet dépend de la couleur choisie
Une ombre simple décalée de 8px horizontalement et verticalement, avec un léger flou et une épaisseur discrète.
img {
box-shadow:8px 8px 10px 0 rgba(0,0,0,0.5);
}
img {
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
img:hover {
border : 2px solid #000000;
box-shadow:8px 8px 10px 0 rgba(0,0,0,0.5);
}
2. Transform : scale
Scale, qui signifie échelle en anglais, permet de faire des jeux de zoom sur vos éléments. Pour vos images, il permet de faire une animation de hover simple mais efficace. Attention : à doser avec modération !
Un zoom simple permettra de grossir votre image dès que la souris passe dessus :
Pour grossir votre image à 120% :
img {
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
img:hover {
transform:scale(1.2);
}
Le HTML :
<div class="container-img">
<img src="mon-image" />
</div>
Le CSS :
.container-img{
display:block;
overflow:hidden;
border:1px solid #000;
}
.container-img img{
width:100%;
height:100%;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
.container-img:hover img{
transform:scale(1.2);
}
3. Grayscale
On peut jouer sur le pourcentage de l’échelle pour diminuer plus ou moins les couleurs, ou les supprimer entièrement :
img{
filter: grayscale(100%);
}
img.galerie{
filter: grayscale(100%);
width:100%;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
img.galerie:hover{
filter: grayscale(0);
transform:scale(1.4);
}
4. Un bloc d’information
Le HTML :
<div class="container-img">
<img src="mon-image" />
<div class="infos-hover">
<i class="fa fa-eye"></i>
<p>Découvrez plus d'images</p>
</div>
</div>
Le CSS :
.container-img{
display:block;
position:relative;
overflow:hidden;
border:1px solid #000;
}
.container-img img{
width:100%;
height:100%;
}
.container-img .infos-hover{
display:block;
position:absolute;
left:0;
bottom:0;
width:100%;
height:0;
color:#fff;
text-align:center;
background:rgba(0,0,0,0.8);
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
.container-img .infos-hover i{
margin-top:60px;
font-size:50px;
}
.container-img .infos-hover p{
text-align:center;
}
.container-img:hover .infos-hover{
height:100%;
}
Découvrez plus d’images
5. Ça tourne !
La rotation est intéressante sur un hover, et peu se combiner pour un effet plus sympa à un zoom. En reprenant notre zoom bloqué à l’intérieur d’un bloc :
Le HTML :
<div class="container-img">
<img src="mon-image" />
</div>
Le CSS :
.container-img{
display:block;
overflow:hidden;
border:1px solid #000;
}
.container-img img{
width:100%;
height:100%;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
.container-img:hover img{
transform:rotate(5deg) scale(1.2);
}
On peut ainsi s’amuser à faire faire un demi-tour à son image sur l’axe Y :
img{
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
img:hover{
transform:rotate3d(0,1,0,180deg);
}
A lire aussi dans Webdesign / UX design
Comment mettre en page mon footer, avec quelles informations, dans quel ordre ? Vous manquez d'inspiration ? Voici 10 idées de footer pour votre site internet !
Vous vous demandez sûrement comment bien utiliser la bibliothèque médias WordPress ? Pas de stress cet article va vous aider, avec ce tutoriel vous saurez vous en servir à la perfection !
Nous avons déjà évoqué les différents critères de choix pour son thème WordPress, cet article vous permettra de trouver des thèmes WordPress dans plusieurs bibliothèques.
