<style>
.grid-cell {
  display: inline-block;
  vertical-align: top;
}
.grid-row {
  text-align: center;
}

figure {
	margin: 10px 10px!important;
	position: relative;
  width: 250px;
  max-height: 105px;
  overflow: hidden;
  transition: max-height 0.15s ease-out;
  box-shadow: 0 0 15px #D99A6C;
  background: #FAEBD7;
  border: 1px #D99A6C solid;
  border-radius: 17px 7px 17px 7px
}

figure img {
	max-width: 100%;
	display: block;
	position: relative;
}

figcaption {
	margin-top: -50px!important;
	padding: 20px;
	color: #9E5B40;
}

figcaption h3 {
	margin: 0;
	padding: 0;
	color: #D99A6C;
}

figcaption span:before {
	content: 'by ';
}

figcaption a {
	text-align: center;
	padding: 5px 10px;
	border-radius: 2px;
	display: inline-block;
	background: #ed4e6e;
	color: #fff;
}



figure img {
	z-index: 10;
	-webkit-transition: -webkit-transform 0.4s;
	-moz-transition: -moz-transform 0.4s;
	transition: transform 0.4s;
  box-shadow: 0 0 8px #933709;
  border-radius: 5px 5px 5px 5px;
}

figure:hover {
  	max-height: 1400px;
   transition: max-height 0.25s ease-in;
}

figure:hover img,
.cs-style-6 figure.cs-hover img {
	-webkit-transform: translateY(-10px) scale(0.5);
	-moz-transform: translateY(-10px) scale(0.5);
	-ms-transform: translateY(-10px) scale(0.5);
	transform: translateY(-10px) scale(0.5);
}

figcaption li {
 margin-left: 30%
}

figcaption h3 {
	margin-top: 60%;
  text-align: center;
}

figcaption a {
	position: absolute;
	bottom: 20px;
	right: 20px;
}
</style>

<div class="grid-row">
<div class="grid-cell">
<figure>
            <img src="http://s3.uploads.ru/t/crjOm.gif" alt="img05">
            <figcaption>
            	<h3>Оборотни, по ходу</h3>
<ul>
  <li>Оборотень 1</li>
  <li>Оборотень 2</li>
  <li>Оборотень 3</li>
  <li>Оборотень 4</li>
  <li>Оборотень 5</li>
  <li>Оборотень 6</li>
  <li>Оборотень 7</li>
  <li>Оборотень 8</li>
  <li>Оборотень 9</li>
  <li>Оборотень 10</li>
  <li>Оборотень 11</li>
  <li>Оборотень 12</li>
</ul>
            </figcaption>
        	</figure>
</div>
<div class="grid-cell">
<figure>
            <img src="http://s7.uploads.ru/t/4wOXW.gif" alt="img05">
            <figcaption>
            	<h3>Оборотни, по ходу</h3>
<ul>
  <li>Оборотень 1</li>
  <li>Оборотень 2</li>
  <li>Оборотень 3</li>
  <li>Оборотень 4</li>
  <li>Оборотень 5</li>
  <li>Оборотень 6</li>
  <li>Оборотень 7</li>
  <li>Оборотень 8</li>
  <li>Оборотень 9</li>
  <li>Оборотень 10</li>
  <li>Оборотень 11</li>
  <li>Оборотень 12</li>
</ul>
            </figcaption>
        	</figure>
</div>
</div>
<div class="grid-row">
<div class="grid-cell">
<figure>
            <img src="http://s7.uploads.ru/qfeUT.gif" alt="img05">
            <figcaption>
            	<h3>Маньяки какие-то</h3>
<ul>
  <li>Маньяк 1</li>
  <li>Маньяк 2</li>
  <li>Маньяк 3</li>
  <li>Маньяк 4</li>
  <li>Маньяк 5</li>
  <li>Маньяк 6</li>
  <li>Маньяк 7</li>
  <li>Маньяк 8</li>
</ul>
            </figcaption>
        	</figure>
</div>
<div class="grid-cell">
<figure>
            <img src="http://s7.uploads.ru/80Lcn.gif" alt="img05">
            <figcaption>
            	<h3>Маньяки какие-то</h3>
<ul>
 <li>Маньяк 1</li>
  <li>Маньяк 2</li>
  <li>Маньяк 3</li>
  <li>Маньяк 4</li>
  <li>Маньяк 5</li>
  <li>Маньяк 6</li>
  <li>Маньяк 7</li>
  <li>Маньяк 8</li>
</ul>
            </figcaption>
        	</figure>
</div>
</div>