Demo for Blur Social Buttons with Hovering Text Effect Code

Preview

Source Code

                            <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from www.devanswer.com -->


<style>
body {
  font-family: system-ui;
  color: black;
  text-align: center;
}
.redes_sociales{
    height: 50vh;
    justify-content: center;
    display: flex;
    align-items: center;
}
.redes_sociales ul li{
    font-size: 80px;
    display: inline-block;
    margin: 0px 15px;
    text-align: center;
}
.redes_sociales ul li a{
    display: block;
    padding: 0 10px;
    color: black;
    box-shadow: 0px 3px 10px 0px;
    transition: .2s;
    filter: blur(3px);
}
.redes_sociales ul li a:hover {
    transform: translateY(-3px)      scale(1.50);
    color: rgba(0, 0, 0, .8);
    filter: blur(0px); 
}
.fa-facebook-square:hover {
    color:blue;
}
.fa-instagram-square:hover {
    color: #dd36ba;
}
.fa-youtube-square:hover {
    color:red;
}
.fa-twitter-square:hover {
    color: #49cae4;
}
.redes_sociales span {
    display:none;
}
.redes_sociales:hover span {
    display:block;
    position:fixed;
    overflow:hidden;
}
</style>

</head>
<body>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css'>
<script src='https://code.jquery.com/jquery-3.3.1.slim.min.js'></script>
<div class="redes_sociales">
    <ul>
      <li><a href=""><i class="fab fa-facebook-square"></i>
        </a><span id="nom_red">Follow Me!</span>
        </li>
      <li><a href="#"  target="_blank"><i class="fab fa-instagram-square"></i></a>
       </li><li><a href="#"  target="_blank"><i class="fab fa-youtube-square"></i></a></li>
      <li><a href="#"  target="_blank"><i class="fab fa-twitter-square"></i></a></li>
    </ul>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>
<script>
var tooltips = document.querySelectorAll('.redes_sociales span');
window.onmousemove = function (e) {
    var x = (e.clientX + 20) + 'px',
        y = (e.clientY + 20) + 'px';
    for (var i = 0; i < tooltips.length; i++) {
        tooltips[i].style.top = y;
        tooltips[i].style.left = x;
    }
};
</script>

</body>
</html>

Other Codes

Pure CSS Expanding Social Buttons on Hover

There are a number of social buttons in a row in this code. In hover mode, the names of these icons are written next to them and the background of each . . .

Collapsing Social Buttons Code in Left Sidebar

In this post, a number of social buttons are located on the left side of the page and vertically below each other. These buttons are displayed in hover . . .

Drop Down Social Links with Cursor Change . . .

In this code we have a drop-down list. This drop-down list consists of social icons with their names. The overall theme of this drop-down list is also . . .

Social Buttons Code with Counter on Hover

In this post, the social buttons are square and in hover mode, the number of likes or followers is shown. In addition, the background color of the buttons . . .