Éclaircissement d'une image
Vu sur https://aide.jimdo.com/aller-plus-loin-avec-jimdo/effets-de-rollover/effet-d-%C3%A9claircissement/
Effet 1
Ajouter ceci au head :
img[alt="effet1"]:hover {
filter: brightness(1.2);
-webkit-filter: brightness(1.2);
-moz-filter: brightness(1.2);
-o-filter: brightness(1.2);
-ms-filter: brightness(1.2);
}
... puis modifier la balise alt en y ajoutant effet1
Effet 2
Ajouter ceci au head :
img[alt="effet2"]:hover {
filter: brightness(1.5);
-webkit-filter: brightness(1.5);
-moz-filter: brightness(1.5);
-o-filter: brightness(1.5);
-ms-filter: brightness(1.5);
}
Autres exemples :
Effet 3
img[alt="effet3"] {
transition: all .2s ease-in-out;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
}
img[alt="effet3"]:hover {
transform: scale(1.05);
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
-o-transform: scale(1.05);
}
Effet 4
img[alt="effet4"] {
transition: all .2s ease-in-out;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
}
img[alt="effet4"]:hover {
transform: scale(1.05);
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
-o-transform: scale(1.05);
filter: brightness(1.2);
-webkit-filter: brightness(1.2);
-moz-filter: brightness(1.2);
-o-filter: brightness(1.2);
-ms-filter: brightness(1.2);
}
Effet 5
img[alt="effet5"] {
transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
}
img[alt="effet5"]:hover {
border-radius: 200px;
}
Effet 6
img[alt="effet6"] {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-o-filter: grayscale(100%);
-ms-filter: grayscale(100%);
opacity: 0.8;
}
img[alt="effet6"]:hover {
filter: grayscale(0%);
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
-o-filter: grayscale(0%);
-ms-filter: grayscale(0%);
opacity: 1;
}
- Remplacer Brightness par :
- http://angrytools.com/css-generator/filter/
- https://cssgenerator.org/filter-css-generator.html
- https://www.bestagencies.com/tools/filter-effects-css-generator/