<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<style>
nav a {
position: relative;
display: inline-block;
outline: none;
color: #c2c2c2!important;
}
nav a:hover, nav a:focus {
outline: none;
}
.sigbar {
width: 450px;
padding: 20px;
background: #cd4436;
position: relative;
display: inline-block;
outline: none;
color: #FFFFFF!important;
text-decoration: none;
text-transform: uppercase;
text-align: center;
font-size: 15px;
line-height: 15px;
font-family: 'Oswald', sans-serif;
font-weight: lighter;
}
h1 {
font-size: 50px;
color: #d64738;
margin-top: 15px;
margin-bottom: 10px;
text-shadow: 1px 1px 1px #9b362b;
}
.sigbar img {
width: 50px;
height: 50px;
float: right;
border: 5px solid #FFFFFF;
margin-left: 20px;
}
.sigbareffect a {
overflow: hidden;
padding: 0 4px;
height: 1em;
}
.sigbareffect a span {
position: relative;
display: inline-block;
-webkit-transition: -webkit-transform 0.3s;
-moz-transition: -moz-transform 0.3s;
transition: transform 0.3s;
}
.sigbareffect a span::before {
position: absolute;
top: 100%;
content: attr(data-hover);
font-weight: 700;
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.sigbareffect a:hover span, .sigbareffect a:focus span {
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
transform: translateY(-100%);
}
</style>
<center>
<section class="sigbar">
<img src="//jegvirag.gportal.hu/portal/jegvirag/image/gallery/1427046637_63.jpg">
<h1>JgVirg Design</h1>
<nav class="sigbareffect" id="sigbareffect">
<a href="LINK URL"><span data-hover="MENU">MENU</span></a>
<a href="LINK URL"><span data-hover="MENU">MENU</span></a>
<a href="LINK URL"><span data-hover="MENU">MENU</span></a>
<a href="LINK URL"><span data-hover="MENU">MENU</span></a>
<a href="LINK URL"><span data-hover="MENU">MENU</span></a>
</nav>
</section>
</center>
AJÁNLOM AZ OLDALT
Sg
Archvum
ARCHVUM
