CSS-Image border glow when hover with individual color

I would like to ask how should I apply different colour glow to an image border when a user hover over? like say that in this JSFiddle file, I have a green thumb and a red thumb. I want each image border to glow according to the colour of the image, or any colour that I specify. How should I achieve that?

我想问一下,当用户将鼠标悬停在图像边框上时,应该如何对图像边框应用不同的颜色?比如说在这个JSFiddle文件中,我有一个绿拇指和一个红拇指。我希望每个图像边框根据图像的颜色或我指定的任何颜色发光。我该怎么做?

PS** For example purposes the image are converted to base64 in the JSFiddle.

PS **例如,图像在JSFiddle中转换为base64。

This is how I do in my CSS

这就是我在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);
}

Thank You

4 个解决方案

#1

If I understand your question then here is an example DEMO

如果我理解你的问题,那么这里是一个示例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);
}

#2

As written in the comment, there is no way for HTML/CSS to determine the main color of the image displayed. If you know the predominant color of each image, give them class names accordingly and write the related CSS.

如评论中所述,HTML / CSS无法确定所显示图像的主要颜色。如果您知道每个图像的主要颜色,请相应地为它们命名并编写相关的CSS。

See demo for a simple version.

有关简单版本,请参阅演示。

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);
}

#3

Change:

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

to:

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

DEMO

box-shadow Syntax:

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

#4

Box shadow also worked for,

Box shadow也适用于,

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

If you want to more style in css

如果你想在CSS中更多的风格

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

or use your custom image like this

或使用这样的自定义图像

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

#1