Ajax Loader
×
HTML
<figure>
1
<figure>
2
  <img src="http://91ef69bade70f992a001-b6054e05bb416c4c4b6f3b0ef3e0f71d.r93.cf3.rackcdn.com/fresh-fish-mackerel-100326612.jpg" alt="" />
3
  <figcaption>smelly fish</figcaption>
4
</figure>
 
CSS
figure {
1
figure {
2
  position: absolute;
3
  top: 50%;
4
  left: 50%;
5
  transform: translate(-50%,-50%);
6
}
7
 
8
figcaption {
9
  position: absolute;
10
  width: 90%;
11
  bottom: 0;
12
  left: 0;
13
  padding: 5px 5%;
14
  background-color: black;
15
  color: white;
16
  text-align: center;
17
  opacity: 0;
18
  transition: opacity 1s;
19
}
20
 
21
figure:hover figcaption,
22
figure:focus figcaption { opacity: 1 }
 

Untitled

CSSDeck G+