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

shmi

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

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

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

Ilhom666

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

shmi

  • Захожу иногда
  • 15
  • 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

  • Профи
  • 8368
  • 1527
  • Севастополь == Россия
По приведенному примеру все проще, есть два блока, вложенные в родителя
Код: 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%;
}
Все истины, которые я хочу вам изложить, — бесстыдная ложь.
Записки нетрезвого кодера || -=Joomla FAQ=- || -=все плохо=- || skype: beliyadm_pb
*

shmi

  • Захожу иногда
  • 15
  • 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
Посмотрите здесь например - CSS-Transitions (CSS3), примеры внизу по ссылкам "Тег transition Эффекты при наведении для фото с использованием CSS3". Или это вы про постепенную подгрузку картинок при скролле?

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

beliyadm

  • Профи
  • 8368
  • 1527
  • Севастополь == Россия
Ну блоки с контентом прописать в шаблон блога templates\шаблон\html\com_content\category\blog_item.php, стили - в файл стилей
Все истины, которые я хочу вам изложить, — бесстыдная ложь.
Записки нетрезвого кодера || -=Joomla FAQ=- || -=все плохо=- || skype: beliyadm_pb
*

shmi

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

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

shmi

  • Захожу иногда
  • 15
  • 0
Вот это самый идеальный вариант - в 1-м стиле или 4-м.

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

Не понимаю, какой код куда вставлять.
Без труда не было бы и учителя труда
*

beliyadm

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

Не понимаю, какой код куда вставлять.
Вам что - готовый код нужно дать?
Все истины, которые я хочу вам изложить, — бесстыдная ложь.
Записки нетрезвого кодера || -=Joomla FAQ=- || -=все плохо=- || skype: beliyadm_pb
*

shmi

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

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

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

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

beliyadm

  • Профи
  • 8368
  • 1527
  • Севастополь == Россия
Да, но если я изменю тип страницы только на одной странице, изменится вид меню.
нет, надо создать отдельный вывод материалов типа блог, вот куча материалов
После этого в настройках пункта меню выбрать новый тип.
И в этом своем шаблоне добавлять нужную разметку, для получения скрытого до ховера блока
Все истины, которые я хочу вам изложить, — бесстыдная ложь.
Записки нетрезвого кодера || -=Joomla FAQ=- || -=все плохо=- || skype: beliyadm_pb
*

shmi

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

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

Как убрать маркеры на Joomla 2.5 и VM 2?

Автор Rok-16

Ответов: 5
Просмотров: 248
Последний ответ 14.06.2017, 23:46:19
от Rok-16
Joomla 3.6.5 - центрирование сайта

Автор romanovakira2012

Ответов: 1
Просмотров: 219
Последний ответ 02.06.2017, 03:00:46
от almika
Как сделать нормальный caption для фото?

Автор Missile

Ответов: 18
Просмотров: 790
Последний ответ 01.05.2017, 07:54:46
от vipiusss
Как уменьшить размер логотипа на шаблоне protostar Joomla 3 ?

Автор maximka21reg

Ответов: 4
Просмотров: 1109
Последний ответ 03.12.2016, 03:09:01
от satyricon
Помогите сделать фильтр по умолчанию скрытым

Автор dimka92

Ответов: 6
Просмотров: 338
Последний ответ 18.11.2016, 13:05:59
от darkghost