Не нравятся результаты поиска? Попробуйте другой поиск!
DLE FAQ » Все вопросы » Общие вопросы по вёрстке » Как реализовать такую идею для картинок в полной новости?

Как реализовать такую идею для картинок в полной новости?


     15.05.2018    Общие вопросы по вёрстке, Стили (CSS)    101

вопрос
вообщем (у меня по русскому языку двойка, я не знаю, что в русском языке не существует слова вообщем) надоели большие картинки в fullstory, но маленькие не смотрятся. Задумка такая:

Раскрывать картинку как спойлер по клику.
В начале
Как реализовать такую идею для картинок в полной новости?


По клику картинка выезжает сдвигая контентик в ниже.

Как реализовать такую идею для картинок в полной новости?


И вот вопрос, как такое реализовать!?

Ответа пока нет


6 комментариев

BYMERPRO
Юзер

BYMERPRO - 15 мая 2018 21:22 -

к второй картинке забыл .png добавить.

maks
Юзер

maks - 15 мая 2018 22:06 -

В чем вопрос то? Спойлеров в инете куча, бери любой, какой понравится. Градиент после спойлера поставить, либо с отрицательным margin-top или position:absolute как лучше подойдёт.

BYMERPRO
Юзер

BYMERPRO - 16 мая 2018 10:28 -

Есть доля правды, в поиске важно правильно сформулировать вопрос, спасибо за наводку.

Jeka778
Юзер

Jeka778 - 18 мая 2018 09:07 -

html:
<div class="post_assets post_assets-ovh">
<!-- Изображение -->
<img src="site.ru/image.png" class="post_assets-img">
</div>

css:
.post_assets{
transition: all .5s ease;
}
.post_assets-ovh{
cursor: pointer;
max-height: 100px; /* высота отображаемой картинки, после загрузки страницы */
overflow: hidden;
}

js (jquery):
$(document).ready(function(){
$('.post_assets-ovh').click(function(){
$('.post_assets').css({"max-height": "1000px"});
setTimeout(function() { $('.post_assets').removeClass('post_assets-ovh'); }, 500); // 500 - задержка времени в ms = задержке .5s заданной в css-файле
});
});

Jeka778
Юзер

Jeka778 - 18 мая 2018 09:19 -

Немного отредактировал.
https://jsfiddle.net/d101pz9o/

BYMERPRO
Юзер

BYMERPRO - Вчера, 00:03 -

Jeka778,
Огромное спасибо, очень выручил!

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы

наверх