web-dev-qa-db-fra.com

Les bordures CSS-Image brillent lorsque vous survolez avec une couleur individuelle

J'aimerais demander comment appliquer une lueur de couleur différente à une bordure d'image lorsqu'un utilisateur survole son pointeur. comme dire que dans ce fichier JSFiddle , j'ai un pouce vert et un pouce rouge. Je souhaite que chaque bordure d’image brille en fonction de la couleur de l’image ou de la couleur que je spécifie. Comment devrais-je y parvenir? 

PS ** À titre d'exemple, l'image est convertie en base64 dans le JSFiddle.

C'est comme ça que je fais dans mon CSS

img{
    width: 16px;
    cursor: pointer;
    padding: 10px;
}

img:hover{
  border-color: #66afe9;
  outline: 0;
  -webkit-box-shadow: inset 5px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
  box-shadow: inset 5px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
}

Je vous remercie

htmlcsscss3hover
11
Kenny Yap

Si j'ai bien compris votre question, voici un exemple DEMO

img{
    width: 48px;
    cursor: pointer;
    /*padding: 10px;*/
   /* border:1px solid #fff;*/
  margin-right: 20px;
}

img:hover{
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
 -webkit-box-shadow: 0px 0px 30px 0px rgba(0, 255, 0, 0.67);
-moz-box-shadow:    0px 0px 30px 0px rgba(0, 255, 0, 0.67);
box-shadow:         0px 0px 30px 0px rgba(0, 255, 0, 0.67);
}
img:last-of-type:hover{
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
 -webkit-box-shadow: 0px 0px 30px 0px rgba(232, 0, 0, 0.67);
-moz-box-shadow:    0px 0px 30px 0px rgba(232, 0, 0, 0.67);
box-shadow:         0px 0px 30px 0px rgba(232, 0, 0, 0.67);
}
18
Alex Wilson

Comme indiqué dans le commentaire, HTML/CSS n’a aucun moyen de déterminer la couleur principale de l’image affichée. Si vous connaissez la couleur prédominante de chaque image, donnez-leur les noms de classe en conséquence et écrivez le code CSS associé.

Voir demo pour une version simple.

img.green:hover{
  border-color: #66afe9;
  box-shadow: 0 0 8px rgba(0,255,0, 0.6);
}
img.red:hover{
  border-color: #66afe9;
  box-shadow: 0 0 8px rgba(255,0,0, 0.6);
}
4
Paul

Changement:

 box-shadow: inset 5px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);

à:

 box-shadow: inset 0 0 5px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);

DÉMO

box-shadow Syntaxe:

Formal syntax: none | [inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ] ]#
0
Gildas.Tambo

Box shadow a également travaillé pour,

img:hover{ box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); }

Si vous voulez plus de style en css

http://ianlunn.github.io/Hover/

ou utilisez votre image personnalisée comme ça

img:hover{background:url('http://www.addglitter.com/link-sparkle.gif');
0
punitha subramani v