Ajax Loader
×
HTML
<ul><li class="hoverImg">
1
<ul><li class="hoverImg">
2
<span class="nameOfImage"></span> 
3
<span id="img">
4
  <img src="http://lorempixel.com/150/100/sports/" alt="image1">
5
</span>
6
</li> 
7
<li class="hoverImg"> 
8
<span class="nameOfImage"></span> 
9
<span id="img">
10
  <img src="http://lorempixel.com/150/100/food/" alt="image2"> 
11
</span>
12
</li> 
13
<li class="hoverImg">
14
<span class="nameOfImage"></span> 
15
<span id="img">
16
  <img src="http://lorempixel.com/150/100/transport/" alt="image3">
17
</span>
18
</li> 
19
<li class="hoverImg">
20
<span class="nameOfImage"></span> 
21
<span id="img">
22
  <img src="http://lorempixel.com/150/100/people/" alt="image4">
23
</span>
24
</li> 
25
</ul> 
26
<a href="http://google.fr"></a>
27
<a href="http://faceboooogle.fr"></a>
28
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"
29
  type="text/javascript"></script>
 
CSS
/*=======
1
/*=======
2
* Copyright (c) 2013 Lucas Bonomi
3
* Smooth alert stylesheet
4
=======*/
5
 
6
 
7
/*=========
8
reset&setup
9
=========*/
10
 
11
@import url(http://weloveiconfonts.com/api/?family=fontawesome|entypo);
12
@font-face{
13
font-family:'Raleway';
14
font-style:normal;
15
font-weight:400;
16
src:local('Raleway'), url(http://themes.googleusercontent.com/static/fonts/raleway/v6/IczWvq5y_Cwwv_rBjOtT0w.woff) format('woff');
17
}
18
@font-face{
19
font-family: 'Raleway';
20
  font-style: normal;
21
  font-weight: 700;
22
  src: local('Raleway Bold'), local('Raleway-Bold'), url(http://themes.googleusercontent.com/static/fonts/raleway/v6/JbtMzqLaYbbbCL9X6EvaIxsxEYwM7FgeyaSgU71cLG0.woff) format('woff');
23
}
24
@font-face {
25
  font-family: 'todayShop';
26
  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');
27
}
28
[class*="entypo-"]:before{
29
font-family:'entypo', sans-serif;
30
}
31
*,h1,h2{
32
font-family:Raleway,helvetica Neue;
33
-webkit-font-smoothing:antialiased;
34
box-sizing:border-box;
35
font-weight:200;
36
text-decoration:none;
37
text-align:center;
38
}
39
body{
40
width:100%;
41
height:100%;
42
padding:0;
43
margin:0;
44
background:url(http://subtlepatterns.com/patterns/brickwall_@2X.png);
45
/*background-size*/
46
-webkit-background-size:110px 69px;
47
   -moz-background-size:110px 69px;
48
     -o-background-size:110px 69px;
49
        background-size:110px 69px;
50
background-position:initial initial;
51
background-repeat:initial initial;
52
:;
53
}
54
ul,li{margin:0;padding:0;list-style:none}
55
#img{
56
  display:block;
57
  width:150px;
58
  margin:40px auto;
59
}
60
.hoverImg{
61
  width:150px;
62
  height:100px;
63
  display:block;
64
  margin:auto;
65
  float:left;
66
  margin:4px;
67
}
68
.hoverImg:hover #img:after{
69
  content:'';
70
  display:block;
71
  position:absolute;
72
  z-index:-1;
73
  margin:-104px -0px;
74
  z-index:10;
75
  width:150px;
76
  height:100px;
77
  background:rgba(0,0,0,.4);
78
}
79
 
80
.nameOfImage{
81
  position:absolute;
82
  text-align:center;
83
  margin:40px -75px;
84
  width:150px;
85
  height:100px;
86
  color:#fff;
87
  z-index:30; 
88
  line-height:6;
89
  font-size:16px;
90
  font-family:todayShop;
91
  font-weight:bold;
92
  text-transform:uppercase;
93
  
94
}
 
JavaScript
$().ready(function(){
1
$().ready(function(){
2
var img = $(".hoverImg");
3
var dImg = $("img");
4
  
5
  img.hover(function(){
6
    var name = $(this).find('img').attr('alt');
7
    var nameOf = $(this).find(".nameOfImage").on('mouseenter');
8
    $(this).addClass('me');
9
    nameOf.text(name); 
10
 
11
  }, function(){
12
    var nameOf = $(this).find(".nameOfImage").on('mouseenter');
13
        $(this).removeClass('me');
14
    nameOf.text(""); 
15
 
16
  });   
17
  
18
   img.on("mouseleave",function(){
19
      nameOf.empty().text(); 
20
   });  
21
 
22
 
23
//$('a').each(function(index, value){
24
  //    console.log($(this).attr('href'));
25
//});
26
});
 

Untitled

CSSDeck G+