Как сделать эффект выплывания информации?

Question

[Halcod]

В общем нужно что бы по клику на блок с фото и именем изображения выталкивалось наверх и появлялся параграф с описанием .Можно ли это реализовать через Css и нужно ли? или пора открывать книжки по JS и смотреть обработку событий?

Answer 1

[Илья Рычагов]

Да, я бы реализовал это через CSS (и чуть через jQuery).

Вам нужно два стиля:
дефолтный (изначальный)
и измененный - как объект должен выглядеть после деформации

Засучите рукова, нам понадобится jQuery (библиотека для JS), CSS и немного HTML.

Структура такого блока примерно следующая:

<!-- Подключаем jQuery -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>

<!-- Прописываем стили -->
<style type="text/css" media="screen">
	/* это сам блок, в котором все хранится */
	.block{ 
		background: black;
		height: 300px;
		width: 250px;
		overflow: hidden;
	}
	
	/* это золотой блок со всем текстом */
	.text{
		background: gold;
		position: relative;
		padding: 15px;
		font-size: 14pt;
		height: 100%;
		margin-top: 100%;
		cursor: pointer;
		transition: 0.5s margin-top; /* это свойство анимации 0.5s - это время, margin-top - что анимируем */
	}
	/* класс .show меняет margin-top со 100% до 0 - то есть поднимает блок вверх */
	.text.show{margin-top: 0;}
	
	/* это часть золотого текста - в нем хранится остальной текст */
	.more_text{
		margin-top: 25px;
		font-size: 11pt;
	}
</style>


<!-- Наш HTML -->
<div class='block'>
    <div class='text'>Здесь текст<div class='more_text'>Здесь больше текста...</div></div>
</div>



<script>
	//При нажатии на .text - на "нем переключается" класс .show, который регулирует уровень блока margin-top'ом
	$('.text').click(function(){
		$(this).toggleClass('show');
	});
</script>

Comments

[Илья Рычагов]

Держите,
https://jsfiddle.net/7nsrps8h/

[Илья Рычагов]

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

Answer 2

[Егор Живагин]

Вам в любом случае нужно знать, как это делается на JS, иначе дальше будет тяжелее)

А на css - так это же обычный input type="radio"

Answer 3

[chelkaz]

Вам уже ответили правильно. Не слушайте про js и jquery. Они тут не нужны для вас. Делается просто на CSS. Еще 4 года назад верстал шаблон для Битрикс и показал что можно делать на простом CSS. Вот посмотрите, все на чистом CSS - https://www.youtube.com/watch?v=0e17lKPatLs