Apologies for the specific title, but this finalizes the look of my website. Check out my current code below:
.social {
background-color: rgba(150,150,150,0.75);
height: 150px;
width:200px;
margin: 20px;
display: inline-block;
transition: background .25s ease, box-shadow 0.20s ease-in-out, color 0.20s ease;
font-weight: bold;
}
.social:hover {
background-color: rgb(118, 118, 118);
box-shadow: 0px 0px 2px 3px rgba(125,125,125,0.75);
color: rgb(255,255,255);
}
.social:hover a {
color: rgb(255,255,255);
}
a {
color: rgb(20, 0, 255);
transition: color 0.5s;
}
a:hover {
color: rgb(0, 255, 10);
text-decoration: underline;
}<div class="social"> <span>Blank</span> <br> <span> Blank</span> <p> <a href="http://www.twitter.com"> Hello <i class="fa fa-twitter"></i></a> <a href="http://www.facebook.com" target="_blank"><i class="fa fa-facebook-official"></i></a> <a href="http://www.plus.google.com" target="_blank"><i class="fa fa-google-plus"></i></a> <a href="http://www.instagram.com" target="_blank"><i class="fa fa-instagram"></i></a></p> </div>Many thanks in advance!