Кто-то знает как сделать такого рода отображение материалов на Joomla 2.5 - Вопросы по CSS

Вот нашел на 3-й джемле интересное отображение контента. Оно довольно стандартное http://www.templatemonster.com/ru/demo/53146.html

Но как его реализовать тут не понятно http://funagcy.com/creative-lab.html Перерыл миллиарды модулей, все не о чем. К2 - тоже что-то не могу собрать в кучу там все.

Кто-то может знает? Может атм все каким-то кодом решить можно? По типу вместо картинки до "подробнее" вставить?

Посмотрите здесь например - CSS-Transitions (CSS3), примеры внизу по ссылкам "Тег transition Эффекты при наведении для фото с использованием CSS3". Или это вы про постепенную подгрузку картинок при скролле?

Посмотрите здесь например - CSS-Transitions (CSS3), примеры внизу по ссылкам "Тег transition Эффекты при наведении для фото с использованием CSS3". Или это вы про постепенную подгрузку картинок при скролле?

Подскажите, пожалуйста. Куда кидать вот этот код для анимации картинки

img {
   width: 100%;
}

figure {
   margin: 0;
   padding: 0;
   height: 300px;
   position: relative;
   display: block;
   cursor: pointer;
   overflow: hidden;
   border: 3px solid #fff;
}

figure:hover figcaption {
   -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
   filter: alpha(opacity=100);
   opacity: 1;
   top: 0;
}

figcaption {
   -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
   filter: alpha(opacity=0);
   opacity: 0;
   position: absolute;
   height: 100%;
   width: 100%;
   top: 250px;
   background: rgba(0,0,0,.5);
   color: #fff;
   -webkit-transition: all .9s ease;
   -moz-transition: all .9s ease;
   -o-transition: all .9s ease;
   -ms-transition: all .9s ease;
   transition: all .9s ease;
   -webkit-transition-delay: .5s;
   -moz-transition-delay: .5s;
   -o-transition-delay: .5s;
   -ms-transition-delay: .5s;
   transition-delay: .5s;
}

figcaption h3 {
   font-family: 'Open sans';
   font-weight: 400;
   color: #f3b204;
   padding: 10px 20px;
   margin-bottom: 0;
   position: relative;
   righ: 100%;
   margin-top: 37px;
   font-size: 30px;
   -webkit-transition: all .9s ease;
   -moz-transition: all .9s ease;
   -o-transition: all .9s ease;
   -ms-transition: all .9s ease;
   transition: all .9s ease;
}

figcaption p {
   font-family: 'Open sans';
   padding: 10px 20px;
   margin-bottom: 0;
   margin-top: 20px;
   position: relative;
   left: 100%;
   font-size: 13px;
   -webkit-transition: all .9s ease;
   -moz-transition: all .9s ease;
   -o-transition: all .9s ease;
   -ms-transition: all .9s ease;
   transition: all .9s ease;
}

figure:hover h3,figure:hover p {
   left: 0;
}

figcaption a {
   color: #fff;
   border: 2px solid #fff;
   padding: 4px 10px;
   text-decoration: none;
}

figcaption a:hover {
   color: #4f5856;
   background: #fff;
}

По приведенному примеру все проще, есть два блока, вложенные в родителя

Суть в том, что item_content позиционирован как position: relative (и фигура тоже), а блок item_content_inner - абсолютно с прозрачностью 0 opacity: 0
Так же у блока item_content_inner заданы транзишны transition: all 0.2s linear 0s; для плавности трансформации
И соответственно теперь отрабатываем ховер

Все, ну а оформление item_content_inner опять же можно посмотреть на этом примере

По приведенному примеру все проще, есть два блока, вложенные в родителя

Код: html4strict

<div class="item_content">
  <figure class="item_img img-intro img-intro__none">
  <div class="item_content_inner">
</div>

Суть в том, что item_content позиционирован как position: relative (и фигура тоже), а блок item_content_inner - абсолютно с прозрачностью 0 opacity: 0
Так же у блока item_content_inner заданы транзишны transition: all 0.2s linear 0s; для плавности трансформации
И соответственно теперь отрабатываем ховер

Код: css

.item_content:hover .item_content_inner {opacity: 1;}

Все, ну а оформление item_content_inner опять же можно посмотреть на этом примере

Код: css

.item_content_inner {
    background: rgba(0, 0, 0, 0) url("../images/template/double-carBg.png") repeat scroll 0 0;
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    text-align: center;
    top: 0;
    transition: all 0.2s linear 0s;
    width: 100%;
}

Так вот, а куда мне это все устанавливать?

Я хочу, чтобы тут так отображались ссылки с контентом... http://funagcy.com/creative-lab.html

Посмотрите здесь например - CSS-Transitions (CSS3), примеры внизу по ссылкам "Тег transition Эффекты при наведении для фото с использованием CSS3". Или это вы про постепенную подгрузку картинок при скролле?

Спасибо, тут как-то все с рамками. А мне бы хотелось без рамок... просто наводить на фото и чтобы они затемнялись

Ну блоки с контентом прописать в шаблон блога templates\шаблон\html\com_content\category\blog_item.php, стили - в файл стилей

Ну блоки с контентом прописать в шаблон блога templates\шаблон\html\com_content\category\blog_item.php, стили - в файл стилей

Нет, я не хочу менять все блоки с контентом.
Я хочу вставлять код как фото в разделе портфолио. То есть, чтобы только в этом разделе был такой стиль.

Вот это самый идеальный вариант - в 1-м стиле или 4-м.

http://www.internet-technologies.ru/articles/article_2082.html

Не понимаю, какой код куда вставлять.

Нет, я не хочу менять все блоки с контентом.
Я хочу вставлять код как фото в разделе портфолио. То есть, чтобы только в этом разделе был такой стиль.

не очень понял, но никто не мешает создать отдельный шаблон блога, в котором прописать скрытый блок с текстом и затемнением и назначить его как тип только данного пункта меню. Как переопределить шаблон блога - ссылок масса и на форуме и в Google

Не понимаю, какой код куда вставлять.

Вам что - готовый код нужно дать?

не очень понял, но никто не мешает создать отдельный шаблон блога, в котором прописать скрытый блок с текстом и затемнением и назначить его как тип только данного пункта меню. Как переопределить шаблон блога - ссылок масса и на форуме и в Google
Вам что - готовый код нужно дать?

Нет)) код же есть. Просто понять куда его вставлять.

http://www.internet-technologies.ru/articles/article_2082.html

Да, но если я изменю тип страницы только на одной странице, изменится вид меню.

Да, но если я изменю тип страницы только на одной странице, изменится вид меню.

нет, надо создать отдельный вывод материалов типа блог, вот куча материалов
После этого в настройках пункта меню выбрать новый тип.
И в этом своем шаблоне добавлять нужную разметку, для получения скрытого до ховера блока

нет, надо создать отдельный вывод материалов типа блог, вот куча материалов
После этого в настройках пункта меню выбрать новый тип.
И в этом своем шаблоне добавлять нужную разметку, для получения скрытого до ховера блока

Все запутанно, ничего не понятно...