Skip to main content

5) Prism Social Media Icons


Copy the following code :

<style>
* {
    box-sizing: border-box;
}
#bhero-cssanime:hover li { opacity:0.2; }
#bhero-cssanime li { -webkit-transition-property: opacity; -webkit-transition-duration: 500ms;-moz-transition-property: opacity; -moz-transition-duration: 500ms; }
#bhero-cssanime li a strong { opacity:0; -webkit-transition-property: opacity, top; -webkit-transition-duration: 300ms; -moz-transition-property: opacity, top; -moz-transition-duration: 300ms; }
#bhero-cssanime li:hover { opacity:1; }
#bhero-cssanime li:hover a strong { opacity:1; top:-10px; }
/* Mobile Responsive */
@media only screen and (max-width : 900px) {
ul.bhero-s1-social {
    margin: 6% 5%;
    float: none;
    padding: 0!important;}
li.bhero-s1 {
    width: 50px;
    height: 50px;
    margin: 5px;
    list-style: none;
    display: inline-block;
}
li.bhero-s1 {
  
    width: 55px;
    height: 55px;
}
}
@media only screen and (min-width : 900px) {

li.bhero-s1 {
    list-style-type: none;
    width: 50px;
    height: 50px;
    list-style: none;
    display: inline-block;
    margin: 2px;
}
}
/* START TOOLTIP STYLES */
[tooltip] {
  position: relative; /* opinion 1 */
}

/* Applies to all tooltips */
[tooltip]::before,
[tooltip]::after {
  text-transform: none; /* opinion 2 */
  font-size: 14px; /* opinion 3 */
  line-height: 1;
  user-select: none;
  pointer-events: none;
  position: absolute;
  display: none;
  opacity: 0;
}
[tooltip]::before {
  content: '';
  border: 5px solid transparent; /* opinion 4 */
  z-index: 1001; /* absurdity 1 */
}
[tooltip]::after {
  content: attr(tooltip); /* magic! */
  
  /* most of the rest of this is opinion */
  font-family: Helvetica, sans-serif;
  text-align: center;
  
  /* 
    Let the content set the size of the tooltips 
    but this will also keep them from being obnoxious
    */
  min-width: 3em;
  max-width: 21em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 1ch 1.5ch;
  border-radius: .3ch;
  box-shadow: 0 1em 2em -.5em rgba(0, 0, 0, 0.35);
  background: #333;
  color: #fff;
  z-index: 1000; /* absurdity 2 */
}

/* Make the tooltips respond to hover */
[tooltip]:hover::before,
[tooltip]:hover::after {
  display: block;
}
/* don't show empty tooltips */
[tooltip='']::before,
[tooltip='']::after {
  display: none !important;
}

/* FLOW: UP */
[tooltip]:not([flow])::before,
[tooltip][flow^="up"]::before {
  bottom: calc(100% + 30px);
  border-bottom-width: 0;
  border-top-color: #333;
}
[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::after {
  bottom: calc(100% + 35px);
}
[tooltip]:not([flow])::before,
[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::before,
[tooltip][flow^="up"]::after {
  left: 50%;
  transform: translate(-50%, -20px);
}
/* FLOW: DOWN */
[tooltip][flow^="down"]::before {
  top: 100%;
  border-top-width: 0;
  border-bottom-color: #333;
}
[tooltip][flow^="down"]::after {
  top: calc(100% + 5px);
}
[tooltip][flow^="down"]::before,
[tooltip][flow^="down"]::after {
  left: 50%;
  transform: translate(-50%, .5em);
}
/* FLOW: LEFT */
[tooltip][flow^="left"]::before {
  top: 50%;
  border-right-width: 0;
  border-left-color: #333;
  left: calc(0em - 5px);
  transform: translate(-.5em, -50%);
}
[tooltip][flow^="left"]::after {
  top: 50%;
  right: calc(100% + 5px);
  transform: translate(-.5em, -50%);
}
/* FLOW: RIGHT */
[tooltip][flow^="right"]::before {
  top: 50%;
  border-left-width: 0;
  border-right-color: #333;
  right: calc(0em - 5px);
  transform: translate(.5em, -50%);
}
[tooltip][flow^="right"]::after {
  top: 50%;
  left: calc(100% + 5px);
  transform: translate(.5em, -50%);
}
/* KEYFRAMES */
@keyframes tooltips-vert {
  to {
    opacity: .9;
    transform: translate(-50%, 0);
  }
}
@keyframes tooltips-horz {
  to {
    opacity: .9;
    transform: translate(0, -50%);
  }
}
/* FX All The Things */ 
[tooltip]:not([flow]):hover::before,
[tooltip]:not([flow]):hover::after,
[tooltip][flow^="up"]:hover::before,
[tooltip][flow^="up"]:hover::after,
[tooltip][flow^="down"]:hover::before,
[tooltip][flow^="down"]:hover::after {
  animation: tooltips-vert 300ms ease-out forwards;
}
[tooltip][flow^="left"]:hover::before,
[tooltip][flow^="left"]:hover::after,
[tooltip][flow^="right"]:hover::before,
[tooltip][flow^="right"]:hover::after {
  animation: tooltips-horz 300ms ease-out forwards;
}
</style>
<br />
<div id="social-1">
<ul class="bhero-s1-social" id="bhero-cssanime">
<li class="bhero-s1">
<a href="#" rel="nofollow" target="_blank"><span tooltip="Like On Facebook"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrVP8PFiHsbe5Ah8ZbEsE55vtgqyTcCcQaBZ6qo_97Z7YVwS9E16MRudbr9tpKToKajEDZLFqaO-gQRMY6LxLYoxe8VFMueM9ICHK-i3frPbGrFYoCNmqapDEWdKKxhSqcg8WLZrLyeEQ/s200/facebook.png" /></span></a>
</li>
<li class="bhero-s1">
<a href="#" rel="nofollow" target="_blank"><span tooltip="Follow on Google+"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3_4Tl5NvN5aWYwb6yNf_Fr5u1IIXvrwbrl7GoVtkPp90Z1ysD9VJPCeHgUJFJIzG38cxJ8EuqSP1NPwH8zetzT2R-2i8SkzfdJwaWsndcoZhtyqnqcv5Q0A2cNYmrbSEgbE7XlDCHT_s/s200/google-plus.png" /></span></a>
</li>
<li class="bhero-s1">
<a href="#" target="_blank"><span tooltip="Follow on Twitter"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_kxKtU0O950BRd78EogAPNu9fC5VknvTgvBNm7H0-6v6qhXTeGalvctYP7PwfxmHwA2xGCxmqSQ2rjFn9km8j0OxAsJJXP8mFfz0OGzEJs9Y1x8mMYmVJm-ETZo9vymNipQg4NwZy7EA/s1600/twitter.png" /></span></a>
</li>
<li class="bhero-s1">
<a href="#" rel="nofollow" target="_blank"><span tooltip="Follow on Instagram"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrGjr4CfYYKG-MocJgU36VkFwoogbMwMemtfi8xkl5T4YYHS1bdPuyPlhH0djSJjx3NEVYsQo92pRh9hGRlMFGgccJQVGK01HpbudDFthejkagv6HPUudwTizgdBHyHYGPoPnyKLLBkZE/s200/instagram.png" /></span></a>
</li>
<li class="bhero-s1">
<a href="#" rel="nofollow" target="_blank"><span tooltip="Connect on WhatsApp"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsePjg8ucdVXIy3K7l_Gyr2lxiWqTd9NRBNAvRywkvX9Ftm8V_jmco0Khq7obs86YmyGR0L1cpqgm_3CXgRCSnk_d2xqf9iDYGWmuoCmhEpGojpjm60Hx3VL2qh-pBcBv79NSUbVhPCkk/s1600/whatsapp.png" /></span></a>
</li>
<li class="bhero-s1">
<a href="#" rel="nofollow" target="_blank"><span tooltip="Subscribe on Youtube"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg__3tnTbC9b4D0UQ59750gopCu9AgQ_wpf6C3p9ZnCpkVDIvPIW55WjSmBmbdAhHl4T9SGMjE7DzclcvSJo2gWMaExCBETdUbNTezk89-k4dh7bLW6GPjoR_qs_Lf5W4VVHtNH2ky2dnY/s1600/youtube.png" /></span></a>
</li>
<li class="bhero-s1">
<a href="#" rel="nofollow" target="_blank"><span tooltip="Connect with LinkedIn"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWtdcdU2KbEOxMnKkb4lT86_VMWl-LAvCVzmsUUm8fBWmZLslJfiKY-6vkOtNrCsZ71N3txj_F9-QSFYHVZBNX_PFys68_FCTMVBA24UXcPGMBxr1LsrhGUXvzyQNe3Y4izMu-vawME2w/s1600/linkedin.png" /></span></a>
</li>
<li class="bhero-s1">
<a href="#" rel="nofollow" target="_blank"><span tooltip="Subscribe to RSS"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEho8FbP-4FTtkokW56tAwo4L6i63hikxJaiELFQQI2EIHL8WAl6e4u-6dpptp5nlAzFmFIS8-a-Fe2AeD5aYH_7xnukck2QYlqfMEWZy4Id8wi1c9_rM3GB75Kg93biB0YI6g9JVHEAGgE/s1600/rss.png" /></span></a>
</li>
</ul>
</div>

Comments

Post a Comment

Popular posts from this blog

1) Simple Elegant Icons

Copy the Following Code : <style> * { box-sizing: border-box; } #bhero-cssanime:hover li { opacity: 0.2; } #bhero-cssanime li { -webkit-transition-property: opacity; -webkit-transition-duration: 500ms; -moz-transition-property: opacity; -moz-transition-duration: 500ms; } #bhero-cssanime li a strong { opacity: 0; -webkit-transition-property: opacity, top; -webkit-transition-duration: 300ms; -moz-transition-property: opacity, top; -moz-transition-duration: 300ms; } #bhero-cssanime li:hover { opacity: 1; } #bhero-cssanime li:hover a strong { opacity: 1; top: -10px; } /* Mobile Responsive */ @media only screen and (max-width: 900px) { ul.bhero-s1-social { margin: 6% 5%; float: none; padding: 0!important; } li.bhero-s...
2 comments
Read more

2) Cute Flat Social Icons

Copy the following Code : <style> * { box-sizing: border-box; } #bhero-cssanime:hover li { opacity: 0.2; } #bhero-cssanime li { -webkit-transition-property: opacity; -webkit-transition-duration: 500ms; -moz-transition-property: opacity; -moz-transition-duration: 500ms; } #bhero-cssanime li a strong { opacity: 0; -webkit-transition-property: opacity, top; -webkit-transition-duration: 300ms; -moz-transition-property: opacity, top; -moz-transition-duration: 300ms; } #bhero-cssanime li:hover { opacity: 1; } #bhero-cssanime li:hover a strong { opacity: 1; top: -10px; } /* Mobile Responsive */ @media only screen and (max-width: 900px) { ul.bhero-s1-social { margin: 6% 5%; float: none; padding: 0!important; } li.bhero-s1 ...
1 comment
Read more

4) Real Social Media Icons

Copy the following code : <style> * { box-sizing: border-box; } #bhero-cssanime:hover li { opacity: 0.2; } #bhero-cssanime li { -webkit-transition-property: opacity; -webkit-transition-duration: 500ms; -moz-transition-property: opacity; -moz-transition-duration: 500ms; } #bhero-cssanime li a strong { opacity: 0; -webkit-transition-property: opacity, top; -webkit-transition-duration: 300ms; -moz-transition-property: opacity, top; -moz-transition-duration: 300ms; } #bhero-cssanime li:hover { opacity: 1; } #bhero-cssanime li:hover a strong { opacity: 1; top: -10px; } /* Mobile Responsive */ @media only screen and (max-width: 900px) { ul.bhero-s1-social { margin: 6% 5%; float: none; padding: 0!important; } li.bhero-s1...
Post a Comment
Read more