使用悬停在CSS上的圆形图像发光

Question

我希望在圆形图像周围有一个“发光”效果（它看起来像一个圆圈，但它确实是一个带有透明像素的方形图像以使其显示作为一个圆圈）。

有没有一种简单而有效的方式来做到这一点与CSS？我试过盒子阴影，但它似乎没有正常工作。

Answer 1

你可以做这样的事情与box-shadow和CSS animation

img { 
 
    margin: 30px; 
 
    border-radius: 50%; 
 
    box-shadow: 0px 0px 9px 4px #747DE8; 
 
    animation: glow 1.5s linear infinite alternate; 
 
} 
 

 
@keyframes glow{ 
 
    to { 
 
    box-shadow: 0px 0px 30px 20px #535FED; 
 
    } 
 
}

<img src="http://placehold.it/150x150/000000/ffffff">

你也可以使用一些Filters上img。 Support

.element { 
 
    margin: 50px; 
 
    border-radius: 50%; 
 
    width: 150px; 
 
    height: 150px; 
 
    box-shadow: 0px 0px 9px 4px #747DE8; 
 
    animation: glowShadow 1.5s linear infinite alternate; 
 
} 
 

 
img { 
 
    width: 100%; 
 
    height: 100%; 
 
    animation: glowImage 1.5s linear infinite alternate; 
 
} 
 

 
@keyframes glowShadow{ 
 
    to { 
 
    box-shadow: 0px 0px 35px 15px #535FED; 
 
    } 
 
} 
 

 
@keyframes glowImage{ 
 
    to { 
 
    -webkit-filter: brightness(2); 
 
    filter: brightness(2); 
 
    } 
 
}

<div class="element"> 
 
    <img src="http://www.officialpsds.com/images/thumbs/Blue-Planet-psd85316.png"> 
 
</div>

Answer 2

这应该对你有所帮助。

.box-shadow { 
 
    -webkit-box-shadow: 0px 0px 8px 5px black; 
 
    -moz-box-shadow: 0px 0px 8px 2px light green; 
 
    box-shadow: 0px 0px 8px 2px light blue; 
 
}

<div class="box-shadow"> 
 
    <img src="path to image" /> 
 
    <h1> Text In a Glowing Box.</h1> 
 
</div>

Answer 3

您需要使用边界半径的组合：属性和：hover伪类来获得预期的效果。

基本上，将图像边界半径设置为50％ - 这将使您的图像成为一个完美的圆。使用：hover psuedoclass将允许您设置鼠标悬停事件的样式。

HTML：

<img src="https://aedesnoyers.files.wordpress.com/2011/12/night11.jpg" class="round-hover" /> 

你的CSS看起来类似：

.round-hover { 
    height: 200px; /*Resize for Fiddle*/ 
    width: 200px; 
    border-radius: 50%; 
} 

.round-hover:hover{ 

    /* thank you @Morgan Clark */ 
    -webkit-box-shadow: 0px 0px 8px 5px black; 
    -moz-box-shadow: 0px 0px 8px 2px light green; 
    box-shadow: 0px 0px 8px 2px light blue; 
} 

在小提琴这里看到：

Shadow over image when hovering

--side NOTE--第一box-shadow：属性的两个0使得它在盒子阴影中没有偏移。这使得出现“发光”

编辑 看到@雷纳德的回答后，我可能误解了被要求的“发光”效果。