Вывод дочерних элементов. Тип 4. CSS

Вывод дочерних элементов. Тип 4. CSS

Чанк для MODX

[[+tv.image:isnot=``:then=`<div class="list_item_style_2_img_wr"><img class="list_item_style_2_img" src="[[+tv.image:rezimgcrop=`r-150`]]" alt="[[+pagetitle]]"></div>`]] [[+pagetitle]]
[[+createdon:date=`%d.%m.%Y`]]
[[+introtext:default=`[[+content:strip_tags:ellipsis=`250`]]`]]

Рарзметка HTML:

О продукции
06.05.2017
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
Заголовок
Заголовок
06.05.2017
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
Заголовок
Заголовок
06.05.2017
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

Стили CSS:

.list_item_style_2{
    padding: 25px 20px;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}
.list_item_style_2 + .list_item_style_2{
    border-top:1px solid #eaeaea;
}
.list_item_style_2:hover{
    -webkit-box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.1);
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.1);
}
.list_item_style_2_introtext{
	max-width: 600px;
}
.list_item_style_2_title {
    position: relative;
	max-width: 600px;
	font-size: 20px;
	margin-bottom: 7px;
	display: inline-block;
	text-decoration: none;
	border-radius: 3px;
    background: #49c6eb;
    background: -moz-linear-gradient(top, #49c6eb 1%, #49aee5 100%);
    background: -webkit-linear-gradient(top, #49c6eb 1%,#49aee5 100%);
    background: linear-gradient(to bottom, #49c6eb 1%,#49aee5 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#49c6eb', endColorstr='#49aee5',GradientType=0 );
    color: #fff;
	padding: 5px 15px 6px;
	margin-left: -10px;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}
.list_item_style_2_title:hover{
    padding-right: 40px;
	text-decoration: none;
    color: #fff;
}
.list_item_style_2_title .fa{
    margin-left: 15px;
    position: absolute;
    left: 100%;
    top:9px;
    color: #fff;
    margin-left: -30px;
    visibility: hidden;
    opacity: 0;
	-webkit-transition: all 0.15s ease;
	-moz-transition: all 0.15s ease;
	-ms-transition: all 0.15s ease;
	-o-transition: all 0.15s ease;
	transition: all 0.15s ease;
}
.list_item_style_2_title:hover .fa{
    opacity: 1;
    visibility: visible;
}
.list_item_style_2_date{
    color: #999;
    font-size: 13px;
    margin-bottom: 10px;
}
.list_item_style_2_img_wr{
	float: right;
    width: 200px;
    text-align: center;
	margin-left: 25px;
	margin-right: 30px;
}
img.list_item_style_2_img {
	max-height: 150px;
	max-width: 200px;
	display: inline-block;
}

Результат:

О продукции
06.05.2017
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
Заголовок
Заголовок
06.05.2017
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
Заголовок
Заголовок
06.05.2017
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
Способ поблагодарить автора сайта:

Комментарии (0)

  1. Напишите первый комментарий
*Комментарий будет опубликован после проверки модератором