Execution of Hover for social network

Asked

Viewed 64 times

1

How to make so that when the execution of the Hover occurs in the partner networks it does not move all the partner networks, only the one with the mouse and the others stay fixed?

They’re all moving when I put the mouse. 

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.fa {
  padding: 10px;
  font-size: 20px;
  width: 20px;
  text-align: center;
  text-decoration: none;
   margin: auto -1px auto auto;
  border-radius: 50%;
}

.fa:hover {
    opacity: 0.7;
    padding: 10px;
  font-size: 22px;
  width: 22px;
  margin: auto -5px auto auto;
  border-radius: 50%;
 }

.fa-facebook {
  background: #3B5998;
  color: white;
}

.fa-twitter {
  background: #55ACEE;
  color: white;
}

.fa-google {
  background: #dd4b39;
  color: white;
}

.fa-linkedin {
  background: #007bb5;
  color: white;
}

.fa-youtube {
  background: #bb0000;
  color: white;
}

.fa-instagram {
  background: #125688;
  color: white;
}
</style>
</head>
<body>

<a href="#" class="fa fa-facebook"></a>
<a href="#" class="fa fa-twitter"></a>
<a href="#" class="fa fa-google"></a>
<a href="#" class="fa fa-linkedin"></a>
<a href="#" class="fa fa-youtube"></a>
<a href="#" class="fa fa-instagram"></a>
      
</body>
</html>

html5 css3 css-hover

1 answer

0


Increasing the font size to have this effect is not ideal.

One of the solutions is using the transform:scale to increase the size of icons in the :hover. In this case I passed the normal size icon 100% Scale(1), to 110% Scale(1.1), which would be the same as passing the font from 20px to 22px (10% more than the original size)

See in the example below how it looks.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.fa {
  padding: 10px;
  font-size: 20px;
  width: 20px;
  text-align: center;
  text-decoration: none;
   margin: auto -1px auto auto;
  border-radius: 50%;
}

.fa:hover {
    opacity: 0.7;
    transform: scale(1.1);
}

.fa-facebook {
  background: #3B5998;
  color: white;
}

.fa-twitter {
  background: #55ACEE;
  color: white;
}

.fa-google {
  background: #dd4b39;
  color: white;
}

.fa-linkedin {
  background: #007bb5;
  color: white;
}

.fa-youtube {
  background: #bb0000;
  color: white;
}

.fa-instagram {
  background: #125688;
  color: white;
}
</style>
</head>
<body>

<a href="#" class="fa fa-facebook"></a>
<a href="#" class="fa fa-twitter"></a>
<a href="#" class="fa fa-google"></a>
<a href="#" class="fa fa-linkedin"></a>
<a href="#" class="fa fa-youtube"></a>
<a href="#" class="fa fa-instagram"></a>
      
</body>
</html>

Browser other questions tagged html5 css3 css-hover

You are not signed in. Login or sign up in order to post.