<script src="/js/modernizr.custom.js"></script>  
  <script src="/js/toucheffects.js"></script>

.grid *, .grid *:after, .grid *:before {  
-webkit-box-sizing: border-box;  
-moz-box-sizing: border-box;  
box-sizing: border-box;  
  }  

  .grid a {  
color: #888;  
text-decoration: none;  
  }  
  .grid {  
padding: 20px 20px 100px 20px;  
max-width: 1300px;  
margin: 0 auto;  
list-style: none;  
text-align: center;  
  }  
  .grid li {  
display: inline-block;  
width: 440px;  
margin: 0;  
padding: 20px;  
text-align: left;  
position: relative;  
  }  
  .grid figure {  
margin: 0;  
position: relative;  
  }  
  .grid figure img {  
max-width: 100%;  
display: block;  
position: relative;  
  }  
  .grid figcaption {  
position: absolute;  
top: 0;  
left: 0;  
padding: 20px;  
background: #2c3f52;  
color: #ed4e6e;  
  }  
  .grid figcaption h3 {  
margin: 0;  
padding: 0;  
color: #fff;  
  }  
  .grid figcaption a {  
text-align: center;  
padding: 5px 10px;  
border-radius: 2px;  
display: inline-block;  
background: #ed4e6e;  
color: #fff;  
  }  
  /* Individual Caption Styles */  

  /* Caption Style 1 */  
.cs-style-1 figcaption {  
height: 100%;  
width: 100%;  
opacity: 0;  
text-align: center;  
-webkit-backface-visibility: hidden;  
-moz-backface-visibility: hidden;  
backface-visibility: hidden;  
-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;  
-moz-transition: -moz-transform 0.3s, opacity 0.3s;  
transition: transform 0.3s, opacity 0.3s;  
  }  
  .no-touch .cs-style-1 figure:hover figcaption, .cs-style-1 figure.cs-hover figcaption {  
opacity: 1;  
-webkit-transform: translate(15px, 15px);  
-moz-transform: translate(15px, 15px);  
-ms-transform: translate(15px, 15px);  
transform: translate(15px, 15px);  
  }  
  .cs-style-1 figcaption h3 {  
margin-top: 70px;  
  }  
  .cs-style-1 figcaption span {  
display: block;  
  }  
  .cs-style-1 figcaption a {  
margin-top: 30px;  
  }  
  /* Caption Style 2 */  
.cs-style-2 figure img {  
z-index: 10;  
-webkit-transition: -webkit-transform 0.4s;  
-moz-transition: -moz-transform 0.4s;  
transition: transform 0.4s;  
  }  
  .no-touch .cs-style-2 figure:hover img, .cs-style-2 figure.cs-hover img {  
-webkit-transform: translateY(-90px);  
-moz-transform: translateY(-90px);  
-ms-transform: translateY(-90px);  
transform: translateY(-90px);  
  }  
  .cs-style-2 figcaption {  
height: 90px;  
width: 100%;  
top: auto;  
bottom: 0;  
-webkit-backface-visibility: hidden;  
-moz-backface-visibility: hidden;  
backface-visibility: hidden;  
  }  
  .cs-style-2 figcaption a {  
position: absolute;  
right: 20px;  
top: 30px;  
  }  
  /* Caption Style 3 */  
.cs-style-3 figure {  
overflow: hidden;  
  }  
  .cs-style-3 figure img {  
-webkit-transition: -webkit-transform 0.4s;  
-moz-transition: -moz-transform 0.4s;  
transition: transform 0.4s;  
  }  
  .no-touch .cs-style-3 figure:hover img, .cs-style-3 figure.cs-hover img {  
-webkit-transform: translateY(-50px);  
-moz-transform: translateY(-50px);  
-ms-transform: translateY(-50px);  
transform: translateY(-50px);  
  }  
  .cs-style-3 figcaption {  
height: 100px;  
width: 100%;  
top: auto;  
bottom: 0;  
opacity: 0;  
-webkit-transform: translateY(100%);  
-moz-transform: translateY(100%);  
-ms-transform: translateY(100%);  
transform: translateY(100%);  
-webkit-backface-visibility: hidden;  
-moz-backface-visibility: hidden;  
backface-visibility: hidden;  
-webkit-transition: -webkit-transform 0.4s, opacity 0.1s 0.3s;  
-moz-transition: -moz-transform 0.4s, opacity 0.1s 0.3s;  
transition: transform 0.4s, opacity 0.1s 0.3s;  
  }  
  .no-touch .cs-style-3 figure:hover figcaption, .cs-style-3 figure.cs-hover figcaption {  
opacity: 1;  
-webkit-transform: translateY(0px);  
-moz-transform: translateY(0px);  
-ms-transform: translateY(0px);  
transform: translateY(0px);  
-webkit-transition: -webkit-transform 0.4s, opacity 0.1s;  
-moz-transition: -moz-transform 0.4s, opacity 0.1s;  
transition: transform 0.4s, opacity 0.1s;  
  }  
  .cs-style-3 figcaption a {  
position: absolute;  
bottom: 20px;  
right: 20px;  
  }  
  /* Caption Style 4 */  
.cs-style-4 li {  
-webkit-perspective: 1700px;  
-moz-perspective: 1700px;  
perspective: 1700px;  
-webkit-perspective-origin: 0 50%;  
-moz-perspective-origin: 0 50%;  
perspective-origin: 0 50%;  
  }  
  .cs-style-4 figure {  
-webkit-transform-style: preserve-3d;  
-moz-transform-style: preserve-3d;  
transform-style: preserve-3d;  
  }  
  .cs-style-4 figure > div {  
overflow: hidden;  
  }  
  .cs-style-4 figure img {  
-webkit-transition: -webkit-transform 0.4s;  
-moz-transition: -moz-transform 0.4s;  
transition: transform 0.4s;  
  }  
  .no-touch .cs-style-4 figure:hover img, .cs-style-4 figure.cs-hover img {  
-webkit-transform: translateX(25%);  
-moz-transform: translateX(25%);  
-ms-transform: translateX(25%);  
transform: translateX(25%);  
  }  
  .cs-style-4 figcaption {  
height: 100%;  
width: 50%;  
opacity: 0;  
-webkit-backface-visibility: hidden;  
-moz-backface-visibility: hidden;  
backface-visibility: hidden;  
-webkit-transform-origin: 0 0;  
-moz-transform-origin: 0 0;  
transform-origin: 0 0;  
-webkit-transform: rotateY(-90deg);  
-moz-transform: rotateY(-90deg);  
transform: rotateY(-90deg);  
-webkit-transition: -webkit-transform 0.4s, opacity 0.1s 0.3s;  
-moz-transition: -moz-transform 0.4s, opacity 0.1s 0.3s;  
transition: transform 0.4s, opacity 0.1s 0.3s;  
  }  
  .no-touch .cs-style-4 figure:hover figcaption, .cs-style-4 figure.cs-hover figcaption {  
opacity: 1;  
-webkit-transform: rotateY(0deg);  
-moz-transform: rotateY(0deg);  
transform: rotateY(0deg);  
-webkit-transition: -webkit-transform 0.4s, opacity 0.1s;  
-moz-transition: -moz-transform 0.4s, opacity 0.1s;  
transition: transform 0.4s, opacity 0.1s;  
  }  
  .cs-style-4 figcaption a {  
position: absolute;  
bottom: 20px;  
right: 20px;  
  }  
  /* Caption Style 5 */  
.cs-style-5 figure img {  
z-index: 10;  
-webkit-transition: -webkit-transform 0.4s;  
-moz-transition: -moz-transform 0.4s;  
transition: transform 0.4s;  
  }  
  .no-touch .cs-style-5 figure:hover img, .cs-style-5 figure.cs-hover img {  
-webkit-transform: scale(0.4);  
-moz-transform: scale(0.4);  
-ms-transform: scale(0.4);  
transform: scale(0.4);  
  }  
  .cs-style-5 figcaption {  
height: 100%;  
width: 100%;  
opacity: 0;  
-webkit-transform: scale(0.7);  
-moz-transform: scale(0.7);  
-ms-transform: scale(0.7);  
transform: scale(0.7);  
-webkit-backface-visibility: hidden;  
-moz-backface-visibility: hidden;  
backface-visibility: hidden;  
-webkit-transition: -webkit-transform 0.4s, opacity 0.4s;  
-moz-transition: -moz-transform 0.4s, opacity 0.4s;  
transition: transform 0.4s, opacity 0.4s;  
  }  
  .no-touch .cs-style-5 figure:hover figcaption, .cs-style-5 figure.cs-hover figcaption {  
-webkit-transform: scale(1);  
-moz-transform: scale(1);  
-ms-transform: scale(1);  
transform: scale(1);  
opacity: 1;  
  }  
  .cs-style-5 figure a {  
position: absolute;  
bottom: 20px;  
right: 20px;  
  }  
  /* Caption Style 6 */  
.cs-style-6 figure img {  
z-index: 10;  
-webkit-transition: -webkit-transform 0.4s;  
-moz-transition: -moz-transform 0.4s;  
transition: transform 0.4s;  
  }  
  .no-touch .cs-style-6 figure:hover img, .cs-style-6 figure.cs-hover img {  
-webkit-transform: translateY(-50px) scale(0.5);  
-moz-transform: translateY(-50px) scale(0.5);  
-ms-transform: translateY(-50px) scale(0.5);  
transform: translateY(-50px) scale(0.5);  
  }  
  .cs-style-6 figcaption {  
height: 100%;  
width: 100%;  
-webkit-backface-visibility: hidden;  
-moz-backface-visibility: hidden;  
backface-visibility: hidden;  
  }  
  .cs-style-6 figcaption h3 {  
margin-top: 60%;  
  }  
  .cs-style-6 figcaption a {  
position: absolute;  
bottom: 20px;  
right: 20px;  
  }  
  /* Caption Style 7 */  
.cs-style-7 li:first-child {  
z-index: 6;  
  }  
  .cs-style-7 li:nth-child(2) {  
z-index: 5;  
  }  
  .cs-style-7 li:nth-child(3) {  
z-index: 4;  
  }  
  .cs-style-7 li:nth-child(4) {  
z-index: 3;  
  }  
  .cs-style-7 li:nth-child(5) {  
z-index: 2;  
  }  
  .cs-style-7 li:nth-child(6) {  
z-index: 1;  
  }  
  .cs-style-7 figure img {  
z-index: 10;  
  }  
  .cs-style-7 figcaption {  
height: 100%;  
width: 100%;  
opacity: 0;  
pointer-events: none;  
-webkit-backface-visibility: hidden;  
-moz-backface-visibility: hidden;  
backface-visibility: hidden;  
-webkit-transition: opacity 0.3s, height 0.3s, box-shadow 0.3s;  
-moz-transition: opacity 0.3s, height 0.3s, box-shadow 0.3s;  
transition: opacity 0.3s, height 0.3s, box-shadow 0.3s;  
box-shadow: 0 0 0 0px #2c3f52;  
  }  
  .no-touch .cs-style-7 figure:hover figcaption, .cs-style-7 figure.cs-hover figcaption {  
pointer-events: auto;  
opacity: 1;  
height: 130%;  
box-shadow: 0 0 0 10px #2c3f52;  
  }  
  .cs-style-7 figcaption h3 {  
margin-top: 86%;  
  }  
  .cs-style-7 figcaption h3, .cs-style-7 figcaption span, .cs-style-7 figcaption a {  
opacity: 0;  
-webkit-transition: opacity 0s;  
-moz-transition: opacity 0s;  
transition: opacity 0s;  
  }  
  .cs-style-7 figcaption a {  
position: absolute;  
bottom: 20px;  
right: 20px;  
  }  
  .no-touch .cs-style-7 figure:hover figcaption h3, .no-touch .cs-style-7 figure:hover figcaption span, .no-touch .cs-style-7 figure:hover figcaption a, .cs-style-7 figure.cs-hover figcaption h3, .cs-style-7 figure.cs-hover figcaption span, .cs-style-7 figure.cs-hover figcaption a {  
-webkit-transition: opacity 0.3s 0.2s;  
-moz-transition: opacity 0.3s 0.2s;  
transition: opacity 0.3s 0.2s;  
opacity: 1;  
  }  
  @media screen and (max-width: 31.5em) {  
.grid {  
padding: 10px 10px 100px 10px;  
}  
.grid li {  
width: 100%;  
min-width: 300px;  
}  
  }

<ul class="grid cs-style-4">  
<li>  
<figure>  
<div>  
<img src="Ссылка на картинку" alt="img01" />  
</div>  
<figcaption>  
<h3>Заголовок</h3>  
<span>Описание</span>  
</figcaption>  
</figure>  
</li>  
<li>  
<figure>  
<div>  
<img src="Ссылка на картинку 2" alt="img02" />  
</div>  
<figcaption>  
<h3>Заголовок 2</h3>  
<span>Описание 2</span>  
</figcaption>  
</figure>  
</li>  
  </ul>