JSFiddle - React, Tailwind, and code Playground

by wrxsti85

HTML

<div class="dock" id="dock">
  <div class="dock-container">
      <a class="dock-item" href=""><img src="http://diy-code.com/ui/img/icons/layout.png" alt="Layout" /></a> 
  <a class="dock-item" href=""><img src="http://diy-code.com/ui/img/icons/nav.png" alt="Navigation" /></a> 
  <a class="dock-item" href=""><img src="http://diy-code.com/ui/img/icons/style.png" alt="Style" /></a> 
  <a class="dock-item" href=""><img src="http://diy-code.com/ui/img/icons/elements.png" alt="Elements" /></a> 
  <a class="dock-item" href=""><img src="http://diy-code.com/ui/img/icons/settings.png" alt="Settings" /></a> 
  <a class="dock-item" href=""><img src="http://diy-code.com/ui/img/icons/mail.png" alt="Web Mail" /></a> 
  <a class="dock-item" href=""><img src="http://diy-code.com/ui/img/icons/cpanel.png" alt="Control Panel" /></a> 
  <a class="dock-item" href=""><img src="http://diy-code.com/ui/img/icons/help.png" alt="Help" /></a> 
</div>
</div>

CSS

#dock {  
    height: 200px;    
    position:relative;
    top: 30px;    
}

.dock-container {
    height: 200px;        
}

.dock-item {
    width: 70px;   
    display: block;
    position: absolute;
}

.dock-item img {
    width: 70px;    
}

.label {
    text-decoration: none;
    color: black;
    position: relative;
    bottom: 20px;
    width: 105px;
    text-align: center;
 //    opacity: 0;
}

JavaScript

$(function(){
    var px = 0;
    $('.dock-item').each(function(){
        $(this).animate({'left': + px +'px'},1000);
        px = px + 70;
    });
    
    $('.dock-item img').hover(
        function(){
            $(this).animate({'width':'100px'},100);    
            $(this).parent().animate({'left':'-=15px', 'top':'-=5px'},100);
            label = $(this).attr('alt');
            $(this).parent().append('<p class="label">'+ label +'</p>');                
        },
        function(){
            $(this).animate({'width':'70px'},500); 
            $(this).parent().animate({'left':'+=15px', 'top':'+=5px'},500);
            $('.label').remove();          
        }
    );
});