Ajax Loader
×
HTML 
<div class="wrap">
1
<div class="wrap">
2
  <article>
3
    <h2>H2 Header</h2>
4
    <img src="//placehold.it/150x100" alt="">
5
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
6
    <button>Push Me!</button>
7
  </article>
8
  <article>
9
    <h2>H2 Header</h2>
10
    <img src="//placehold.it/150x100" alt="">
11
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
12
    <button>Push Me!</button>
13
  </article>
14
  <article>
15
    <h2>H2 Header</h2>
16
    <img src="//placehold.it/150x100" alt="">
17
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
18
    <button>Push Me!</button>
19
  </article>
20
  <article>
21
    <h2>H2 Header</h2>
22
    <img src="//placehold.it/150x100" alt="">
23
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
24
    <button>Push Me!</button>
25
  </article>
26
  <article>
27
    <h2>H2 Header</h2>
28
    <img src="//placehold.it/150x100" alt="">
29
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
30
    <button>Push Me!</button>
31
  </article>
32
  <article>
33
    <h2>H2 Header</h2>
34
    <img src="//placehold.it/150x100" alt="">
35
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
36
    <button>Push Me!</button>
37
  </article>
38
  <article>
39
    <h2>H2 Header</h2>
40
    <img src="//placehold.it/150x100" alt="">
41
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
42
    <button>Push Me!</button>
43
  </article>
44
  <article>
45
    <h2>H2 Header</h2>
46
    <img src="//placehold.it/150x100" alt="">
47
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
48
    <button>Push Me!</button>
49
  </article>
50
  <article>
51
    <h2>H2 Header</h2>
52
    <img src="//placehold.it/150x100" alt="">
53
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
54
    <button>Push Me!</button>
55
  </article>
56
</div>
 
CSS 
*{
1
*{
2
  margin: 0;
3
  padding: 0;
4
}
5
body{
6
  background: #bbb;
7
  }
8
.wrap {
9
  width:681px;
10
  margin:50px auto;
11
12
}
13
article {
14
  width:180px;
15
  display:block;
16
  float: left;
17
  border:1px solid black;
18
  padding:10px;
19
  margin:0 25px 25px 0;
20
  transition:all .3s;
21
  box-shadow:0 0 10px 5px rgba(255,255,255,1);
22
23
}
24
.wrap:hover>article {
25
  opacity:0.2;
26
  box-shadow:none;
27
}
28
.wrap>article:hover{
29
  opacity:1;
30
  -webkit-transform:scale(1.2);
31
  background: yellow;
32
  box-shadow:none;
33
}
34
 
 

Untitled

CSSDeck G+