Publié le par benoit
dans la ou les catégorie(s) : code

Voici ci-dessous un exemple de code assez disgracieux qui utilise l’attribut style sur une div pour afficher une image (de fond). J’ai sans doute déjà utilisé la même technique pour faire des cascades de codeur, mais il s’agit de contourner le problème avec la mauvaise manière. Nous allons procéder à un petit nettoyage (Action de débarrasser un lieu de ce qui l’encombre) pour rendre le code plus fluide.

Pour rappel : le style se place prioritairement dans la feuille de styles.

Le mauvais code

Attention, ce code n’est pas des plus mauvais, on le voit souvent sur le web. Son plus gros défaut est la suppression de l’image du html et par conséquent du précieux alt.
Autre point négatif, le nom de la classe « textoverimage » devait être lié au data-text, mais l’ajout du texte a été supprimer dans le CSS, le code devient ambigu. Au passage, il manque une ) dans le html. 

 
 

.textoverimage{
    width: 300px;
    height: 200px;
    margin:4px;
    background-size:100%;
    background-position: center;
    transition: 0.5s;
}

.textoverimage:hover{
    background-size: 110%;
}

Nettoyage

Le challenge est d’avoir un html « classique », lisible et facile à maintenir ou modifier. Sauf usage d’une propriété récente comme object-fit, il n’y a pas d’autre solution que d’ajouter un élément autour de l’image pour prévoir son recadrage. 


  dummy

.vignette{
  width:320px;     /* à fixer sinon c’est 100% */
  height:240px;    /* idem */
  overflow:hidden; /* rien ne doit dépasser de 320 sur 240 */
}

.vignette-img{
  transition:transform .5s; /* pour l'effet */
}

.vignette-img:hover{
  transform:scale(1.2); 
  /* zoom × 1.2
  si on veut plus de zoom, il faut une image avec plus de pixel 
  sinon, c'est un peu trop flou sur retina
  */
}

Démo

See the Pen zoom img over by Benoît Wimart (@benoitwimart) on CodePen.