web-dev-qa-db-fra.com

Illuminez l'image en vol stationnaire

Jetez un oeil à http://www.kickstarter.com .

Lorsque vous survolez leur logo, l'image s'allume. Cet effet est-il faisable sans utiliser une image différente en survol?

Ma première idée était d’utiliser ::after:hover et d’ajouter un carré blanc très transparent recouvrant le logo, mais comme mon logo est placé sur un fond bleu, cela ne fonctionnerait pas. Une autre idée est de définir l'opacité sur 0,9 et de la placer en position stationnaire sur 1. Toutefois, cela donne une image trop sombre par défaut.

htmlcssopacity
5
lawls

Autant que je sache, vous ne pouvez pas faire ce que vous voulez avec du CSS pur à ce stade, à cause du fond bleu. Je pense que votre meilleur pari est d’éditer l’image dans Photoshop avec sa luminosité :hover, puis d’utiliser quelque chose comme:

img { 
  opacity: 0.7; 
} 

img:hover { 
  opacity: 1; 
}

Changer l'opacité en vol stationnaire fonctionnera:

img:hover {
   opacity: 0.5;
}

Fiddle

19
Andy

Vous pourrez peut-être utiliser les filtres d’image css, comme ceci:

img:hover {-webkit-filter: brightness(150%); }


Cela semble parfois drôle et ne fonctionnera que dans les navigateurs Web, mais c’est la meilleure solution à laquelle je puisse penser. Cela vous permettra de garder votre fond bleu aussi.

Voici un clavier montrant le logo de Kickstarter sur un fond bleu.

http://jsfiddle.net/62bCB/



À votre santé,

19
jerboa88

Le CSS original a:

img:hover {
    filter: alpha(opacity=80);
    opacity: .8;
}

Fiddle: http://jsfiddle.net/praveenscience/hfUpk/

1
Praveen Kumar Purushothaman

Vous pouvez utiliser ce code CSS qui rend la transition de la lumière plus douce que instantanément lumineuse. Techpp.com et Techlivewire.com utilisent également ce même css ou un système similaire dans les sections de leur page d'accueil. Je ne pouvais pas obtenir de CSS pour poster ici puisque stackoverflow continuait à me donner des erreurs, donc je le mettais dans un pâté. http://paste2.org/1L9H2XsF

0
user3268442

vous pouvez utiliser une valeur d'opacité comprise entre 0,1 et 1 très claire et une valeur sombre (par défaut)

img {
    filter: alpha(opacity=100);
    opacity: 1;
}
img:hover {
    filter: alpha(opacity=70);
    opacity: 0.7;
}
0
Shahnawaz

Vous avez le choix entre plusieurs navigateurs que vous devez prendre en charge. Vous pouvez transformer le logo en image d’arrière-plan, puis modifier l’image en survol. (ou Sprite l'image pour ne pas faire scintiller)

Vous pouvez également essayer une combinaison d'opacité CSS et de filtres Microsoft pour les anciennes versions d'IE. http://www.w3schools.com/cssref/css3_pr_opacity.asp

Puisque vous mentionnez que vous avez un arrière-plan sombre, vous pouvez essayer certains des nouveaux filtres CSS (saturation, luminosité, etc.), mais vous n’avez pas de chance pour IE. http://www.html5rocks.com/en/tutorials/filters/understanding-css/

0
smurfarita