<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">
<h2 class="text-center"><a href="http://bootstraptema.ru/stuff/snippets_bootstrap/blocks/shutters_blocks/17-1-0-1894" target="_blank">BootstrapTema</a></h2>
<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>
</li>
<li>
<div class="ch-item ch-img-3">
<div class="ch-info-wrap">
<div class="ch-info">
<div class="ch-info-front ch-img-3"></div>
<div class="ch-info-back">
<h4>LUBA</h4>
<p>Lorem ipsum #3</p>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="ch-item ch-img-4">
<div class="ch-info-wrap">
<div class="ch-info">
<div class="ch-info-front ch-img-4"></div>
<div class="ch-info-back">
<h4>GLOBUS</h4>
<p>Lorem ipsum #4</p>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
.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;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
-ms-perspective: 800px;
perspective: 800px;
}
.ch-info-wrap {
top: 20px;
left: 20px;
box-shadow:
0 0 0 20px rgba(255,255,255,0.2),
inset 0 0 3px rgba(115,114, 23, 0.8);
}
.ch-info {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.ch-info > div {
display: block;
position: absolute;
width: 100%;
height: 100%;
background-position: center center;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
-ms-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
.ch-info .ch-info-front {
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
-o-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
transform-origin: 50% 100%;
z-index: 100;
box-shadow:
inset 2px 1px 4px rgba(0,0,0,0.1);
}
.ch-info .ch-info-back {
background: rgba(230,132,107,0);
}
.ch-img-1 {
background-image: url(http://bootstraptema.ru/snippets/block/2017/shutters/1.jpg);
}
.ch-img-2 {
background-image: url(http://bootstraptema.ru/snippets/block/2017/shutters/2.jpg);
}
.ch-img-3 {
background-image: url(http://bootstraptema.ru/snippets/block/2017/shutters/3.jpg);
}
.ch-img-4{
background-image: url(http://bootstraptema.ru/snippets/block/2017/shutters/4.jpg);
}
.ch-info h4{
font-family: 'Niconne-Regular';
color: #DF1E1C;
letter-spacing: 2px;
font-size: 30px;
margin: 0 18px;
padding: 40px 0 0 0;
}
.ch-info p {
color: #464646;
line-height:1.8em;
padding: 10px 5px;
font-style: italic;
font-size: 13px;
}
.ch-item:hover .ch-info-front {
-webkit-transform: rotate3d(1,0,0,-180deg);
-moz-transform: rotate3d(1,0,0,-180deg);
-o-transform: rotate3d(1,0,0,-180deg);
-ms-transform: rotate3d(1,0,0,-180deg);
transform: rotate3d(1,0,0,-180deg);
box-shadow:
inset 0 0 5px rgba(255,255,255,0.2),
inset 0 0 3px rgba(0,0,0,0.3);
}
.ch-item:hover .ch-info-back {
background: #fff;
}
@media (max-width: 1024px){
.ch-grid li {
margin: 0 15px;
}
}
@media (max-width: 991px){
.ch-grid li:nth-child(4) {
margin-top: 30px;
}
}
@media (max-width: 800px){
.ch-grid li:nth-child(4) {
margin-top: 30px;
}
}
@media (max-width: 640px){
.ch-grid li:nth-child(4) ,.ch-grid li:nth-child(3) {
margin-top: 30px;
}
}
@media (max-width: 480px){
.ch-grid li {
margin: 0 6px;
}
.ch-grid li:nth-child(4), .ch-grid li:nth-child(3) {
margin-top: 12px;
}
}
@media (max-width: 320px){
.ch-grid li:nth-child(4), .ch-grid li:nth-child(3),.ch-grid li:nth-child(2) {
margin-top: 15px;
}
}
