Links on Images, With Fade Effect

The title is missing some adjective such that "stylish" or something, but found none suitable. I've said before that the titles of the entries is not my thing. What we tried this time is an image and it overlap a series of links. Something very simple but with a little CSS can look good and offer a curious result.

As utility occurs to me that could serve to place in the sidebar with some priority links to the site, which would be more highlighted by the image that will accompany. That or anything else you can think of, of course.

This would result and passing over the links will see the effect.

See Live Demo

To achieve this we have to use a couple of boxes. One that includes what are the links ( links ) and another father also contains links image ( imagelinks ). Consequently, the HTML would look like:

<Div class = "imagelinks"> 
<div class = "links"> 
<a href = " URL1 "> Home </a> | <a href = " URL2 "> Bio </a> | <a href = " url3 "> Contact </a> 
</ div> 
<img src = " URL_IMAGEN "/> 
</ div>

Now it's just a matter of adding our CSS to make the magic :

.imagelinks { 
display: block; 
position: relative; 
width: 100%; 
max-width: 300px; 
margin: 0 auto; 
padding: 0; 
border: 4px solid black; 
} 
img {.imagelinks 
max-width: 100%; 
border : 0; 
vertical-align: top; 
} 
.links { 
width: 100%; 
position: absolute; 
bottom: 0; 
text-align: center; 
background: #FFFFFF; 
-moz-transition: all 0.6s ease; 
-webkit- transition: all 0.6s ease; 
transition: all 0.6s ease; 
zoom: 1; 
filter: alpha (opacity = 50); 
opacity: 0.5; 
} 
.links a { 
display: inline-block; 
padding: 8px; 
color: # 000000 ; 
} 
.links: hover { 
zoom: 1; 
filter: alpha (opacity = 100); 
opacity: 1; 
}

If it were not for the diversity of browsers the code would remain at about half, but the gist of this is to make the inner box ( .links ), the links, has absolute positioning ( position: absolute; ) with relative to its container ( position: relative; ) so that we can put overlapped and just down completely ( bottom: 0; ).

The second important issue is that the links are displayed initially semi-transparent ( opacity: .5; ) and is when you hover when we fully opaque. The rest only serves to make the adaptive design and configure padding , colors and fonts. Ah, yes! ..and the transition to come out with the effect fade we announced in the title.