JSFiddle - React, Tailwind, and code Playground

by slawe

HTML

<div class="gw_right_buttons">
		<a href="#" class="mitem">
			<img src="http://static.wallbase.cc/front/7/images/spr/bigicon-random.png" alt="" class="image_file">
			<span class="caption">Eshop</span>
		</a>
		<a href="#" class="mitem">
			<img src="http://static.wallbase.cc/front/7/images/spr/bigicon-comments.png" alt="" class="image_file">
			<span class="caption">Website</span>
		</a>
		<a href="#" class="mitem">
			<img src="http://static.wallbase.cc/front/7/images/spr/bigicon-zombie.png" alt="" class="image_file">
			<span class="caption">Logout</span>
		</a>
	</div>

CSS

.gw_right_buttons {
    margin: 45px auto 0 auto;
    width: 500px;
    text-align: center;
    position: relative;
    z-index: 10;
}
.gw_right_buttons .mitem {
    display: inline-block;
    margin: 0 20px;
    vertical-aling: top;
    position: relative;
    height: 50px;
    width: 57px;
}
.gw_right_buttons .mitem:hover {
    margin-top: -10px;
}
.gw_right_buttons .mitem:hover .caption {
    bottom: -25px;
    opacity: 1;
}
.gw_right_buttons .mitem:hover .image_file {
    top: -10px;
}
.gw_right_buttons .mitem .image_file {
    max-height: 50px;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transition-duration: 0.15s;
    -moz-transition-duration: 0.15s;
    -o-transition-duration: 0.15s;
    transition-duration: 0.15s;
    -webkit-transition-timing-function: ease-in;
    -moz-transition-timing-function: ease-in;
    -o-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
}
.gw_right_buttons .mitem .caption {
    position: absolute;
    display: block;
    width: 50px;
    left: -5px;
    bottom: 0;
    text-align: center;
    font-size: 20px;
    font-size: 20px;
    color: #ccc;
    opacity: 0;
    -webkit-text-stroke: .25px;
    -webkit-transition-duration: 0.15s;
    -moz-transition-duration: 0.15s;
    -o-transition-duration: 0.15s;
    transition-duration: 0.15s;
    -webkit-transition-timing-function: ease-in;
    -moz-transition-timing-function: ease-in;
    -o-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
}