Картинка в центре круга2 или делаем Преимущества

22 ноября, 2016

CSS

<div class="row main_advanteges">
	<figure class="col col_w33">
		<a href="#">
			<img src="http://ekstruders.finakvitka.dn.ua/wp-content/uploads/2016/11/play-square-button_318-53754.jpg" alt="">
		</a>
		<figcaption>
			<a href="#">Экструдеры</a>
		</figcaption>
	</figure>
	<figure class="col col_w33">
		<a href="#">
			<img src="http://ekstruders.finakvitka.dn.ua/wp-content/uploads/2016/11/play-square-button_318-53754.jpg" alt="">
		</a>
		<figcaption>
			<a href="#">Экструдеры</a>
		</figcaption>
	</figure>
	<figure class="col col_w33">
		<a href="#">
			<img src="http://ekstruders.finakvitka.dn.ua/wp-content/uploads/2016/11/play-square-button_318-53754.jpg" alt="">
		</a>
		<figcaption>
			<a href="#">Экструдеры</a>
		</figcaption>
	</figure>
</div>

.col { float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding-left: 10px; padding-right: 10px; }
.col.col_w33 { width: 33%; }

.main_advanteges figure img{
	border-radius: 50%;
	border: 5px solid #48ab79;
	-webkit-transition: border 1s ease;
	-o-transition: border 1s ease;
	transition: border 1s ease;
	display: block;
	margin-left: auto;
	margin-right: auto;

	max-width: 100%;
	width: 100%;
	height: auto;
	vertical-align: middle;
}
.main_advanteges figure:hover img {
	border-color: #4680c1;
}
.main_advanteges figcaption{
	text-align: center;
	padding-top: 10px;
	padding-bottom: 10px;
	font-size: 16px;
	font-weight: 700;
}
.main_advanteges figcaption a{
	-webkit-transition: color .4s;
	-o-transition: color .4s;
	transition: color .4s;
	color: #48ab79;
	text-decoration: none;
}

ИТОГ:

← Все записи