CSS3: Créer un Effet de Zoom au Survol des Images

Découvrez comment réaliser très simplement avec CSS3 un effet de zoom au survol d’une image de votre site. Pour réussir cet effet sympa qui attirera l’attention de vos visiteurs, nous allons utiliser les transitions de CSS3.
Nous allons en effet définir dans notre fichier CSS pour les images visées, un agrandissement de l’image quand la souris est au-dessus de l’image et appliquée une transition à cette transformation. L’image est contenue dans un div, dont la taille et fixée et les dépassements masqués.

La démo, le code:

.divImageZoom{
	/* on définit la taille du div et on empêche les débordements */
	width:300px;
	height:225px;
	overflow:hidden;
	/* on ajoute une ombre à notre div */
	-webkit-box-shadow: 5px 5px 5px #111;
	box-shadow: 5px 5px 5px #111;  
}

.divImageZoom img{
	-webkit-transition: all 1s ease; /* Safari and Chrome */
	-moz-transition: all 1s ease; /* Firefox */
	-o-transition: all 1s ease; /* IE 9 */
	-ms-transition: all 1s ease; /* Opera */
	transition: all 1s ease;
	max-width: 100%;
}
			
.divImageZoom img:hover{
	-webkit-transform:scale(1.25); /* Safari and Chrome */
	-moz-transform:scale(1.25); /* Firefox */
	-ms-transform:scale(1.25); /* IE 9 */
	-o-transform:scale(1.25); /* Opera */
	transform:scale(1.25);
}
Publié dans CSS

quand j’aurai le temps

  • les filtres wordpress
  • plugin wordpress et enregistrement de données
  • les wordpress custom post type
  • la bdd d'un blog wordpress
  • la balise more de wp
  • personnaliser une galerie wp
  • gérer les longueurs des extraits de wp
  • les animations css3
  • le memento symphony2
  • le squelette d'une page html5
  • liste sur plusieurs colonnes
  • le responsive design
  • exemple d'un jeu basique en html5
  • la réplication des bases de données
  • mettre en place une architecture en silo avec wp
  • parser un fichier xml (donc un rss) avec php5
  • mettre en place lightbox sans plugin
  • améliorer les performances de son wp
  • ajouter un bouton à l'éditeur de texte de wp
  • ...