Untitled

<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;

-webkit-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*/

-webkit-background-size:110px 69px;

   -moz-background-size:110px 69px;

     -o-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(){

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'));

//});

});