Running hover for social network

Question

Running hover for social network

Navigation

#1 by (0 votes)

1

How do you do that when hover execution occurs in the partner networks, it does not move all the partner networks, only the one with the mouse and the others are fixed?

They are all moving when I place 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

asked by anonymous 27.07.2018 / 18:03

1 answer

DateTimePicker post and book the next business days Field input result NaN

score 0 · Accepted Answer

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

One of the solutions and using transform:scale to increase the size of the icons in :hover . In 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 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>