Новости Joomla

0 Пользователей и 1 Гость просматривают эту тему.
  • 12 Ответов
  • 1523 Просмотров
*

shmi

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

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

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

Ilhom666

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

shmi

  • Осваиваюсь на форуме
  • 15
  • 0 / 0
Посмотрите здесь например - 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;
}
*

beliyadm

  • Легенда
  • 9758
  • 1665 / 66
  • Севастополь, Россия
По приведенному примеру все проще, есть два блока, вложенные в родителя
Код: 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%;
}
Все истины, которые я хочу вам изложить, — бесстыдная ложь. Сделать всё хорошо
TLG: @Beliyadm
*

shmi

  • Осваиваюсь на форуме
  • 15
  • 0 / 0
По приведенному примеру все проще, есть два блока, вложенные в родителя
Код: 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

*

shmi

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

Спасибо, тут как-то все с рамками. А мне бы хотелось без рамок... просто наводить на фото и чтобы они затемнялись
« Последнее редактирование: 25.08.2015, 13:24:11 от shmi »
*

beliyadm

  • Легенда
  • 9758
  • 1665 / 66
  • Севастополь, Россия
Ну блоки с контентом прописать в шаблон блога templates\шаблон\html\com_content\category\blog_item.php, стили - в файл стилей
Все истины, которые я хочу вам изложить, — бесстыдная ложь. Сделать всё хорошо
TLG: @Beliyadm
*

shmi

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

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

shmi

  • Осваиваюсь на форуме
  • 15
  • 0 / 0
Вот это самый идеальный вариант - в 1-м стиле или 4-м.

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

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

beliyadm

  • Легенда
  • 9758
  • 1665 / 66
  • Севастополь, Россия
Нет, я не хочу менять все блоки с контентом.
Я хочу вставлять код как фото в разделе портфолио. То есть, чтобы только в этом разделе был такой стиль.
не очень понял, но никто не мешает создать отдельный шаблон блога, в котором прописать скрытый блок с текстом и затемнением и назначить его как тип только данного пункта меню. Как переопределить шаблон блога - ссылок масса и на форуме и в Google

Не понимаю, какой код куда вставлять.
Вам что - готовый код нужно дать?
Все истины, которые я хочу вам изложить, — бесстыдная ложь. Сделать всё хорошо
TLG: @Beliyadm
*

shmi

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

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

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

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

beliyadm

  • Легенда
  • 9758
  • 1665 / 66
  • Севастополь, Россия
Да, но если я изменю тип страницы только на одной странице, изменится вид меню.
нет, надо создать отдельный вывод материалов типа блог, вот куча материалов
После этого в настройках пункта меню выбрать новый тип.
И в этом своем шаблоне добавлять нужную разметку, для получения скрытого до ховера блока
Все истины, которые я хочу вам изложить, — бесстыдная ложь. Сделать всё хорошо
TLG: @Beliyadm
*

shmi

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

Все запутанно, ничего не понятно...
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Некорректное отображение сайта на смартфоне

Автор Bazilio_69

Ответов: 0
Просмотров: 1321
Последний ответ 04.09.2024, 20:36:06
от Bazilio_69
Как сделать?

Автор Twins

Ответов: 3
Просмотров: 1901
Последний ответ 01.07.2021, 13:11:51
от xpank
Как сделать кнопку формы аккаунта?

Автор Evgen Kulibin

Ответов: 0
Просмотров: 1069
Последний ответ 22.04.2021, 22:15:06
от Evgen Kulibin
Как сделать плавающий модуль?

Автор THeCMeX

Ответов: 2
Просмотров: 1226
Последний ответ 08.03.2021, 22:21:01
от Flexderection
Как поставить такой курсор на сайт Joomla?

Автор Romanych

Ответов: 0
Просмотров: 1028
Последний ответ 05.11.2020, 21:45:29
от Romanych