Bootstrap Snippet Shutters Blocks BootstrapTema using HTML CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
    
<h1 class="text-center"><a href="http://bootstraptema.ru/stuff/snippets_bootstrap/blocks/shutters_blocks/17-1-0-1894" target="_blank">Shutters Blocks BootstrapTema</a></h1>
<ul class="ch-grid">
                    <li>
                        <div class="ch-item ch-img-1">
                            <div class="ch-info-wrap">
                                <div class="ch-info">
                                    <div class="ch-info-front ch-img-1"></div>
                                    <div class="ch-info-back">
                                        <h4>MIA</h4>
                                        <p>Lorem ipsum #1</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="ch-item ch-img-2">
                            <div class="ch-info-wrap">
                                <div class="ch-info">
                                    <div class="ch-info-front ch-img-2"></div>
                                    <div class="ch-info-back">
                                        <h4>KITH</h4>
                                        <p>Lorem ipsum #2</p>
                                    </div>
                                </div>
                            </div>
                        </div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/* Page material: http://bootstraptema.ru/stuff/snippets_bootstrap/blocks/shutters_blocks/17-1-0-1894 */
.ch-grid {
    margin: 20px 0 0 0;
    padding: 0;
    list-style: none;
    display: block;
    text-align: center;
    width: 100%;
}
.ch-grid:after,
.ch-item:before {
    content: '';
    display: table;
}
.ch-grid:after {
    clear: both;
}
.ch-grid li {
    width: 200px;
    height: 200px;
    display: inline-block;
    margin: 0 20px;
}
.ch-item {
    width: 100%;
    height: 100%;
    position: relative;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    cursor: default;
}
.ch-info-wrap, 
.ch-info{
    position: absolute;
    width: 162px;
    height: 162px;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Shutters Blocks BootstrapTema"
Bootstrap 3.3.0 Snippet by aTmpl

Related: See More

Questions / Comments:

"Shutters Blocks BootstrapTema" Bootstrap 3.3.0 Snippet by aTmpl

Related: See More

Questions / Comments:

"Shutters Blocks BootstrapTema"
Bootstrap 3.3.0 Snippet by aTmpl