Ajax Loader
×
HTML
<div class="container">
1
<div class="container">
2
  <div class="item">
3
    <div class="item__img-wrap">
4
      <img src="http://radojuva.com.ua/wp-content/uploads/2014/01/radojuva-loves-this-cat-2.jpg" alt="lol1">
5
    </div>
6
    <div class="item__title">Привет, я заголовок</div>
7
  </div>
8
  <div class="item">
9
    <div class="item__img-wrap">
10
      <img src="http://image.slidesharecdn.com/galushko-userexp2-131111005726-phpapp02/95/-2-638.jpg?cb=1384131580" alt="">
11
    </div>
12
    <div class="item__title">Привет, я заголовок</div>
13
  </div>
14
  <div class="item">
15
    <div class="item__img-wrap">
16
      <img src="http://newsmir.info/img/f/1/6/54/53400/558032f20308a.jpg" alt="">
17
    </div>
18
    <div class="item__title">Привет, я заголовок</div>
19
  </div>
20
</div>
 
CSS
.container {
1
.container {
2
  border: 1px solid tan;
3
  padding: 25px;
4
  width:90%;
5
  margin: 25px auto 0;
6
  font-size: 0;
7
}
8
.item {
9
  display: inline-block;
10
  font-size: 16px;
11
  color: purple;
12
  width: calc(100% / 3);
13
  padding: 0 10px;
14
  box-sizing:border-box;
15
  text-align: center;
16
}
17
.item__img-wrap {
18
  position:relative;
19
  overflow: hidden;
20
  min-height:350px;
21
}  
22
.item__img-wrap img {
23
  position:absolute;
24
  top: 0;
25
  right: 0;
26
  bottom: 0;
27
  left: 0;
28
  margin: auto;
29
  max-width:100%;
30
  height:auto;
31
  display:block;
32
}
33
  
34
  
35
  
36
 
37
 
38
 
39
 
40
 
41
 
42
 
43
 
44
  
45
  
46
  
47
  
 

Untitled

CSSDeck G+