Des effets au survol d'images

Table des matières

La fonction hover permet de modifier un élément (un lien, une image) lors du survol de la souris. En utilisant le CSS voici quelques exemples d’effets à réaliser simplement.

Un zoom sur image

Le html

<a class="zoom"><img  src="url_de_l_image" /></a>

Le css

a.zoom{
   display: inline-block;
   overflow: hidden;
   position: relative;
   text-decoration: none;
}

a.zoom:before{
   display: block;
   background-color: black;
   content: "";
   height: 100%;
   opacity: 0;
   position: absolute;
   width: 100%;
   z-index: 2;
}

a.zoom img{
   border: none;
   display: block;
   z-index: 1;
}

a.zoom:before,a:after,a img{
   -webkit-transition: all 200ms ease;
   -moz-transition: all 200ms ease;
   -o-transition: all 200ms ease;
   transition: all 200ms ease;
}

a.zoom:hover img{
   -webkit-transform: scale(1.2);
   -moz-transform: scale(1.2);
   -ms-transform: scale(1.2);
   -o-transform: scale(1.2);
   transform: scale(1.2);
}

a.zoom:hover:before{
  # opacity: 0.3;     
}

a.zoom:hover:after{
   left: 0;
}

Passer du noir & blanc à la couleur

Le html

<img class="greyscale" src="url_de_l_image" />

Le css

img.greyscale {
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
img.greyscale:hover  {
	-webkit-filter: grayscale(0);
	filter: grayscale(0);
}

Éclaircir une image

Le html

<img class="opacity1" src="url_de_l_image" />

Le css

img.opacity1  {
	opacity: 1;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
img.opacity1:hover {
	opacity: .5;
}

Déplacer latéralement une image

Le html

<img class="slide" src="url_de_l_image" />

Le css

img.slide  {
	margin-left: 0px;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
img.slide:hover  {
	margin-left: -50px;
}

Rotation d’une image

Le html

<img class="rotate" src="url_de_l_image" />

Le css

img.rotate {
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
 
img.rotate:hover {
  -webkit-transform: rotate(-15deg);
  transform: rotate(-15deg);
}

Arrondir une image

Le html

<img class="rounded" src="url_de_l_image" />

Le css

img.rounded{
  width: 400px; /* largeur de l'image */
  height: auto; /* hauteur de l'image */
  -webkit-transition: .3s ease-in-out !important; 
  transition: .3s ease-in-out !important; 
}
img.rounded:hover {
  width: 300px; /* on affiche l'image au carré */
  height: 300px;
  border-radius: 50%; 
}

Mélanger les effets

Arrondir une image et la faire tourner sur elle-même.

Le html

<img class="morph" src="url_de_l_image" />

Le css

img.morph {
  width: 400px;
  height: 300px;
  -webkit-filter: grayscale(0) blur(0px);
  filter: grayscale(0) blur(0px);
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
 
img.morph:hover {
  width: 300px; /* on affiche l'image au carré */
  height: 300px;
  border-radius: 50%;  /* on arrondit l'image */
  -webkit-transform: rotate(360deg); /* rotation de l'image */
  transform: rotate(360deg);
}

Sur le même sujet

comments powered by Disqus