<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.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 ----------> <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; } }