Ajax Loader
×
HTML 
<div id="box">
1
<div id="box">
2
    <div class="image">
3
        <img src="http://365webb.se/exp/wp-content/uploads/2014/06/4921f95baf824205e1b13f22d60357a1-290x183.jpg" />
4
    </div>
5
    <div class="text">
6
        <a class="mylink">link</a>
7
    </div>
8
</div>
9
<div id="box">
10
    <div class="image">
11
        <img src="http://365webb.se/exp/wp-content/uploads/2014/06/4921f95baf824205e1b13f22d60357a1-290x183.jpg" />
12
    </div>
13
    <div class="text">
14
        <a class="mylink">link</a>
15
    </div>
16
</div>
 
CSS 
body{
1
body{
2
    background:#ffa000;
3
}
4
#box {
5
  text-align: center;
6
    margin: auto;
7
    overflow: hidden;
8
    position: relative;
9
    width:290px;
10
    height:183px;
11
}
12
 
13
.image img {
14
    display:block;
15
}
16
.image img {
17
    transform:scale(1);
18
    -ms-transform:scale(1);
19
    -moz-transform:scale(1);
20
    -webkit-transform:scale(1);
21
    -o-transform:scale(1);
22
  -webkit-transition: all 1s ease;
23
    -moz-transition: all 1s ease;
24
    -o-transition: all 1s ease;
25
    transition: all 1s ease;
26
}
27
 
28
#box:hover .image img {  
29
  cursor: pointer;
30
    transform:scale(1.5);
31
    -ms-transform:scale(1.5);
32
    -moz-transform:scale(1.5);
33
    -webkit-transform:scale(1.5);
34
    -o-transform:scale(1.5);
35
}
36
 
37
.text{
38
    position: absolute;  
39
    width: 100%;
40
    height: 100%;
41
    top: 0;
42
    -webkit-transition: all 1s ease;
43
    -moz-transition: all 1s ease;
44
    -o-transition: all 1s ease;
45
    transition: all 1s ease;
46
    background:rgba(0,0,0,0.5);
47
}
48
 
49
.text:hover{
50
    background: rgba(255, 255, 255, 0.5);  
51
}
52
 
53
.text a{
54
    position: absolute;
55
  top: -100%;  
56
     -webkit-transition: all 1s ease;
57
    -moz-transition: all 1s ease;
58
    -o-transition: all 1s ease;
59
    transition: all 1s ease;
60
}
61
 
62
.text:hover a{  
63
    top: 50%;
64
}
 

Untitled

CSSDeck G+