SocialStickyv2

Houses social buttons for Adrienne Adams landing page.

by Koubenec

HTML

<script type="text/javascript">
  $(document).ready(function(){
    $(".socicon").hover(function() {
      $(this).stop().animate({opacity: "0.0"}, 'fast');
    },
    function() {
      $(this).stop().animate({opacity: "1"}, 'fast');
    });
  });
</script>
<div class='container';><div class='box'><div id='fb'><img class='socicon' src='http://www.adrienneadams.org/wp-content/uploads/images/FB_35px_dark.png'></div><div id='tw'><img class='socicon' src='http://www.adrienneadams.org/wp-content/uploads/images/TW_35px_dark.png'></div><div id='in'><img class='socicon' src='http://www.adrienneadams.org/wp-content/uploads/images/IN_dark.png'></div>
<div id='yt'><img class='socicon' src='http://www.adrienneadams.org/wp-content/uploads/images/YT_35px_dark.png'></div>    
</div></div>

CSS

.container {
  height: 35px;
  width: 300px;
  background: #eee;
  margin-top: 0px;
  margin-bottom: 0px;    
  margin-left: auto;
  margin-right: auto;
  padding-top: 10px;
  position: relative;
}

#fb {
    top: 0px;
    left: 0px;
    width: 35px;
    height: 35px;
    position: relative;
    background-image: url('http://www.adrienneadams.org/wp-content/uploads/images/FB_35px_light.png');
    background-repeat: no-repeat;
    float: left;
}

#tw {
    top: 0px;
    left: 19px;
    width: 35px;
    height: 35px;
    position: relative;
    background-image: url('http://www.adrienneadams.org/wp-content/uploads/images/TW_35px_light.png');
    background-repeat: no-repeat;
    float: left;
}

#in {
    top: 0px;
    left: 38px;
    width: 35px;
    height: 35px;
    position: relative;
    background-image: url('http://www.adrienneadams.org/wp-content/uploads/images/IN_35px_light.png');
    background-repeat: no-repeat;
    float: left;
}

#yt {
    top: 0px;
    left: 57px;
    width: 88px;
    height: 35px;
    position: relative;
    background-image: url('http://www.adrienneadams.org/wp-content/uploads/images/YT_35px_light.png');
    background-repeat: no-repeat;
    float: left;
}

.box {
  height: 35px;
  width: 250px;
  margin-left: auto;
  margin-right: auto;
  background: #414042;
  text-align: center;
  padding-top: 0px;
}

.social {
    width: 100%;
    margin-top: 0px;
    position: absolute;
    top: 0px;
    left: 0px;
}

.socicon {
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
}