Glow effect when hovering over icons
How can I make a neon hover effect on social network icons?
I already tried box-shadow: 0 0 20px #......;
, when hovering over it, a neon square is created, and I need the icon itself to glow, not the area around it.
1
2 answers
Since Font Awesome are font icons, therefore, they should not be applied to box-shadow
, a text-shadow
.
@import url('https://use.fontawesome.com/releases/v5.5.0/css/all.css');
body {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
min-height: 100vh;
margin: 0;
background: #111;
}
.icon-hover-neon > i {
font-size: calc(50vw / 3);
color: #fff;
}
.icon-hover-neon > i:not(:last-child) {
margin-right: 5vw;
}
.icon-hover-neon > i:hover {
text-shadow:
0 0 2vw rgba(255,255,255,.5),
0 0 5vw #09f;
}
<div class="icon-hover-neon">
<i class="fab fa-vk"></i>
<i class="fab fa-facebook-square"></i>
<i class="fab fa-instagram"></i>
</div>
4
Author: CbIPoK2513, 2020-07-02 15:43:08
Example
.social-icon-link:hover .social-icon {
fill: var(--text-white-color);
Sets the hover on the icon
0
Author: Олеся, 2020-09-08 20:46:44