<ul><li class="hoverImg">
<ul><li class="hoverImg">
<span class="nameOfImage"></span>
<span id="img">
<img src="http://lorempixel.com/150/100/sports/" alt="image1">
</span>
</li>
<li class="hoverImg">
<span class="nameOfImage"></span>
<span id="img">
<img src="http://lorempixel.com/150/100/food/" alt="image2">
</span>
</li>
<li class="hoverImg">
<span class="nameOfImage"></span>
<span id="img">
<img src="http://lorempixel.com/150/100/transport/" alt="image3">
</span>
</li>
<li class="hoverImg">
<span class="nameOfImage"></span>
<span id="img">
<img src="http://lorempixel.com/150/100/people/" alt="image4">
</span>
</li>
</ul>
<a href="http://google.fr"></a>
<a href="http://faceboooogle.fr"></a>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"
type="text/javascript"></script>
/*=======
/*=======
* Copyright (c) 2013 Lucas Bonomi
* Smooth alert stylesheet
=======*/
/*=========
reset&setup
=========*/
@import url(http://weloveiconfonts.com/api/?family=fontawesome|entypo);
@font-face{
font-family:'Raleway';
font-style:normal;
font-weight:400;
src:local('Raleway'), url(http://themes.googleusercontent.com/static/fonts/raleway/v6/IczWvq5y_Cwwv_rBjOtT0w.woff) format('woff');
}
@font-face{
font-family: 'Raleway';
font-style: normal;
font-weight: 700;
src: local('Raleway Bold'), local('Raleway-Bold'), url(http://themes.googleusercontent.com/static/fonts/raleway/v6/JbtMzqLaYbbbCL9X6EvaIxsxEYwM7FgeyaSgU71cLG0.woff) format('woff');
}
@font-face {
font-family: 'todayShop';
src: url('http://lab.web-gate.fr/fonts/todayshopregular/fonts/todayshopregular.eot?') format('eot'), url('http://lab.web-gate.fr/fonts/todayshopregular/fonts/todayshopregular.woff') format('woff'), url('http://lab.web-gate.fr/fonts/todayshopregular/fonts/todayshopregular.ttf') format('truetype');
}
[class*="entypo-"]:before{
font-family:'entypo', sans-serif;
}
*,h1,h2{
font-family:Raleway,helvetica Neue;
font-smoothing:antialiased;
box-sizing:border-box;
font-weight:200;
text-decoration:none;
text-align:center;
}
body{
width:100%;
height:100%;
padding:0;
margin:0;
background:url(http://subtlepatterns.com/patterns/brickwall_@2X.png);
/*background-size*/
background-size:110px 69px;
background-size:110px 69px;
background-size:110px 69px;
background-size:110px 69px;
background-position:initial initial;
background-repeat:initial initial;
:;
}
ul,li{margin:0;padding:0;list-style:none}
#img{
display:block;
width:150px;
margin:40px auto;
}
.hoverImg{
width:150px;
height:100px;
display:block;
margin:auto;
float:left;
margin:4px;
}
.hoverImg:hover #img:after{
content:'';
display:block;
position:absolute;
z-index:-1;
margin:-104px -0px;
z-index:10;
width:150px;
height:100px;
background:rgba(0,0,0,.4);
}
.nameOfImage{
position:absolute;
text-align:center;
margin:40px -75px;
width:150px;
height:100px;
color:#fff;
z-index:30;
line-height:6;
font-size:16px;
font-family:todayShop;
font-weight:bold;
text-transform:uppercase;
}
$().ready(function(){
$().ready(function(){
var img = $(".hoverImg");
var dImg = $("img");
img.hover(function(){
var name = $(this).find('img').attr('alt');
var nameOf = $(this).find(".nameOfImage").on('mouseenter');
$(this).addClass('me');
nameOf.text(name);
}, function(){
var nameOf = $(this).find(".nameOfImage").on('mouseenter');
$(this).removeClass('me');
nameOf.text("");
});
img.on("mouseleave",function(){
nameOf.empty().text();
});
//$('a').each(function(index, value){
// console.log($(this).attr('href'));
//});
});