21 septembre 2018   Webmaster   Images Css    3 min de lecture  

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);
}
commentaires produits par Disqus

© 2018 - 90v3Z - L3 P1n90U1n - Propulsé par Hugo