Social Icon Hover Boxes

Developer
Nicholas M. Smith
Size
2,790 Kb
Views
22,264
  1. Social Icon Hover Boxes Previews
  2. Social Icon Hover Boxes HTML Codes
  3. Social Icon Hover Boxes CSS Codes

How do I make an social icon hover boxes?

What is a social icon hover boxes? How do you make a social icon hover boxes? This script and codes were developed by Nicholas M. Smith on 26 August 2022, Friday.

Social Icon Hover Boxes Previews
IQ Test

Social Icon Hover Boxes - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Social Icon Hover Boxes</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="social-icons-services"> <div class="social-figure"> <div class="facebook"> <h2 class="entypo-facebook"></h2> </div> <div class="social-hover"> <h2 class="entypo-facebook"></h2> </div> </div> <div class="social-figure"> <div class="twitter"> <h2 class="entypo-twitter"></h2> </div> <div class="social-hover"> <h2 class="entypo-twitter"></h2> </div> </div> <div class="social-figure"> <div class="gplus"> <h2 class="entypo-gplus"></h2> </div> <div class="social-hover"> <h2 class="entypo-gplus"></h2> </div> </div> <div class="social-figure"> <div class="pinterest"> <h2 class="entypo-pinterest"></h2> </div> <div class="social-hover"> <h2 class="entypo-pinterest"></h2> </div> </div> <div class="social-figure"> <div class="vimeo"> <h2 class="entypo-vimeo"></h2> </div> <div class="social-hover"> <h2 class="entypo-vimeo"></h2> </div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Social Icon Hover Boxes - Script Codes CSS Codes

@import url(http://weloveiconfonts.com/api/?family=entypo);
body { background: #303030; padding: 20px;
}
.social-icons-services { width: 100%; height: auto; margin: 0; padding: 0;
}
.social-figure { position: relative; float: left; width: 20%; height: 100px; overflow: hidden;
}
@media (min-width: 767px) { .social-figure { width: 20%; height: 150px; }
}
@media (min-width: 1024px) { .social-figure { width: 20%; height: 200px; }
}
[class*="entypo-"]:before { font-family: 'entypo', sans-serif; font-size: 2em; color: white; display: block; text-align: center;
}
@media (min-width: 767px) { [class*="entypo-"]:before { font-size: 4em; }
}
@media (min-width: 1024px) { [class*="entypo-"]:before { font-size: 6em; }
}
.facebook { position: absolute; top: 0; left: 0; width: 100%; height: 200px; background: #CF4430; -moz-transition: 0.3s; -o-transition: 0.3s; -webkit-transition: 0.3s; transition: 0.3s;
}
.twitter { position: absolute; top: 0; left: 0; width: 100%; height: 200px; background: #34495E; -moz-transition: 0.3s; -o-transition: 0.3s; -webkit-transition: 0.3s; transition: 0.3s;
}
.gplus { position: absolute; top: 0; left: 0; width: 100%; height: 200px; background: green; -moz-transition: 0.3s; -o-transition: 0.3s; -webkit-transition: 0.3s; transition: 0.3s;
}
.pinterest { position: absolute; top: 0; left: 0; width: 100%; height: 200px; background: #25b695; -moz-transition: 0.3s; -o-transition: 0.3s; -webkit-transition: 0.3s; transition: 0.3s;
}
.vimeo { position: absolute; top: 0; left: 0; width: 100%; height: 200px; background: #CF4430; -moz-transition: 0.3s; -o-transition: 0.3s; -webkit-transition: 0.3s; transition: 0.3s;
}
.social-hover { position: absolute; width: 100%; height: 200px; top: -200px; left: 0; background: #0b337d; -moz-transition: 0.3s; -o-transition: 0.3s; -webkit-transition: 0.3s; transition: 0.3s;
}
.social-figure:hover .facebook { top: 200px;
}
.social-figure:hover .social-hover { top: 0;
}
.social-figure:hover .twitter { top: 200px;
}
.social-figure:hover .gplus { top: 200px;
}
.social-figure:hover .pinterest { top: 200px;
}
.social-figure:hover .vimeo { top: 200px;
}
.social-figure:hover .social-hover { top: 0;
}
Social Icon Hover Boxes - Script Codes
Social Icon Hover Boxes - Script Codes
Home Page Home
Developer Nicholas M. Smith
Username icutpeople
Uploaded August 26, 2022
Rating 4.5
Size 2,790 Kb
Views 22,264
Do you need developer help for Social Icon Hover Boxes?

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!

Nicholas M. Smith (icutpeople) Script Codes
Name
Pure CSS Minecraft Enderman
Scss animated button
Flip Navicon
CSS 8-Bit Box Shadow DuckTales
Button
ReactJS Filter
Animated Image Hovers
Aside Nav Animated
CSS Off Canvas Menu
Hover Effects
Create amazing Facebook ads 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!