Social media hovers

Developer
Wojciech
Size
2,574 Kb
Views
32,384
  1. Social media hovers Previews
  2. Social media hovers HTML Codes
  3. Social media hovers CSS Codes

How do I make an social media hovers?

What is a social media hovers? How do you make a social media hovers? This script and codes were developed by Wojciech on 01 September 2022, Thursday.

Social media hovers Previews
IQ Test

Social media hovers - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Social media hovers</title> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css?ver=4.5.2''> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<link rel='stylesheet' id='fontawesome-css' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css?ver=4.5.2' type='text/css' media='all' />
<a class="facebook" target="_blank" href="http://www.facebook.com/sharer/sharer.php?u=link>"> <i class="fa fa-facebook" aria-hidden="true"></i> <i class="fa fa-facebook" aria-hidden="true"></i>
</a>
<a class="twitter" target="_blank" href="http://www.twitter.com/share?url=link"> <i class="fa fa-twitter" aria-hidden="true"></i> <i class="fa fa-twitter" aria-hidden="true"></i>
</a>
<a class="pinterest" href="http://pinterest.com/pin/create/button/?url=link&media=image&description=title"> <i class="fa fa-pinterest-p" aria-hidden="true"></i> <i class="fa fa-pinterest-p" aria-hidden="true"></i>
</a>
<a class="google" target="_blank" href="https://plus.google.com/share?url=link"> <i class="fa fa-google-plus" aria-hidden="true"></i> <i class="fa fa-google-plus" aria-hidden="true"></i>
</a>
<a class="rss" target="_blank" href="/feed"> <i class="fa fa-rss" aria-hidden="true"></i> <i class="fa fa-rss" aria-hidden="true"></i>
</a>
<a class="mail" target="_blank" href="mailto:?subject=link"> <i class="fa fa-envelope" aria-hidden="true"></i> <i class="fa fa-envelope" aria-hidden="true"></i>
</a>
</body>
</html>

Social media hovers - Script Codes CSS Codes

a { display: inline-block; width: 27px; height: 27px; overflow: hidden; text-align: center; position: relative; background: #0089D0; color: #FFF; margin: 2px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;
}
a i { display: block; position: absolute; line-height: 27px !important; width: 27px; height: 27px; text-align: center; font-size: 13.5px; top: 0; left: 0; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;
}
a i:last-child { top: 40px; color: #FFF !important;
}
a:hover i { top: -40px;
}
a:hover i:last-child { top: 0;
}
a.facebook:hover { background: #3B5998;
}
a.twitter:hover { background: #00ACEE;
}
a.pinterest:hover { background: #C8232C;
}
a.google:hover { background: #DD4B39;
}
a.rss:hover { background: #EE802F;
}
a.mail:hover { background: #6567A5;
}
Social media hovers - Script Codes
Social media hovers - Script Codes
Home Page Home
Developer Wojciech
Username wojtek1150
Uploaded September 01, 2022
Rating 3
Size 2,574 Kb
Views 32,384
Do you need developer help for Social media hovers?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Wojciech (wojtek1150) Script Codes
Name
JQuery toogle boxes
Simple eye follower
Get third wednesday
A Pen by Wojciech
Falling snow
Swiper tests
Google maps SVG
CSS only Transparent tooltip
React Chat App
Angular advanced table filter
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!