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

Проблема в z-index и контексте наложения.

Используйте JS, чтобы затенять с помощью стилей все остальные картинки, кроме той, на которую навели, т. е. делайте визуальный хак, чтобы выглядело, будто вы затеняете их (с помощью прозрачности, ещё чего-нибудь. Если не нужно анимировать это дело, просто меняйте z-index.

Можно ли создать "Студенческий портал" только с HTML/CSS + JS?

WebZezik, использовал бы WordPress для Backend'a, был бы хреновым специалистом :))

Автовёрстка HTML & CSS. Стоит ли?

Сергей delphinpro, касательно попробовать и оценить самому — проблема в том, что человек может не понять, в чём проблема, т. к. у него нет опыта (по его словам). Мол, результат выглядит вполне похожим на PSD-макет.

Как называется этот эффект и как это сделать?

Названия не имеет.

WebGL да canvas. Может, библиотеку по типу three.js подтянули для упрощения создания.

Автовёрстка HTML & CSS. Стоит ли?

Shabaev9595, если вы бы такие инструменты выдавали хоть сколько-нибудь нормальный код, поверьте, все бы ими пользовались.

Автовёрстка HTML & CSS. Стоит ли?

Конкретизировать? Хм, ну можно сказать короче: HTML/CSS из PSD — это говно. Логика построения слоёв в PSD — это не HTML-код, потому что в PSD нет блочной модели и обтекания как таковых. Ну и тому подобного. Есть система координат, относительно которой строится позиционирование слоёв, именно поэтому такие инструменты обычно выдают всё на абсолютном позиционировании.

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

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

Как сделать автоматический рассчет высоты каждого элемента группы на JS?

Арсений Матыцин, а-а-а, вот оно что, не знал о JSfiddle такого, т. к. пользоваться стал им только тут, спасибо!

Да, такой вариант работает, не совсем нравится, что он задаёт размер всему ряду, но он работает. Как видите, в случае разных размеров, без JS тут не обойтись, к сожалению.

Как сделать автоматический рассчет высоты каждого элемента группы на JS?

Арсений Матыцин, при добавлении разного по высоте контента, скачет :))

JS-код тоже перенес. Акцент на второй блок:


В любом случае, думаю, что на JS стоит отдавать подсчет только высоты блока с тенью, который повешен на абсолютное позиционирование и не меняет никаких габаритов. Т. е. чтобы все остальное считалось браузером с помощью CSS. Такой подход к реализации данной проблемы испооьзуется на divan.ru (сейчас), mvideo.ru (раньше), leroymerlin.ru (раньше) и svyaznoy.ru (раньше).

Сделать скролл всегда видимым?

Какая ОС, какие браузеры? При overflow-y: scroll на Windows скроллбар виден всегда. На мобильных и MacOS не видно, да.

Как сделать автоматический рассчет высоты каждого элемента группы на JS?

Словом, если бы не полупрозрачная тень с сильным размытием, то я вполне знаю метод (визуальный хак), как обойтись без JS и в той же верстке, что представлена в вопросе, но в данном случае и с данными потребностями -- без JS никак.

Как сделать автоматический рассчет высоты каждого элемента группы на JS?

Арсений Матыцин, а если добавить доп. правила с учетом необходимости выравнивания семантических элементов по одной линии (линия текста названия, линия цены), получается ещё веселее (скачет высота + зона кнопки и контента стала вылетать за пределы):

Как сделать автоматический рассчет высоты каждого элемента группы на JS?

Арсений Матыцин, как я и говорил, концепция данного подхода разрушается, если высота блоков сильно отличается в рамках строки (у кого-то название больше, у кого-то больше описание в блоке с кнопкой):


Как видите, при наведении высота скачет, поэтому скачет и последующая строка, т. к. у вас есть .boxbtn статически позиционирован.

Что такое HTML5 креатив?

kostya_mamanjvitch, вот к примеру, с кодом выложили:
html5-banner.ru/portfolio/rostelecom-html5-banner

Наверное, им пофиг, что могут украсть.

Что такое HTML5 креатив?

kostya_mamanjvitch, html5banner.moscow.

Обычно без кода выкладывают примеры, только GIF или MP4. Наверное, из-за того, что код хранится у Google, а вывод рекламного блока будет показывать случайную рекламу, а не конкретную. Не знаю точно, есть там функционал embed-демонстрации.

А если есть просто HTML, JS и CSS-код не выкладывают, чтобы не воровали код, если это вообще возможно и эффективно в практическом плане.

Как сделать автоматический рассчет высоты каждого элемента группы на JS?

Ярослав Иванов, ты напиши свое решение как ответ, я его отмечу решением и сделаю комментарий касательно альтернативного подхода через :hover. Спасибо!

Как сделать автоматический рассчет высоты каждого элемента группы на JS?

Ярослав Иванов, мне до AJAX -- как до луны верхом на пони :))

Там ещё событие изменения ширины контейнера на всякий случай, что приведет к необходимости пересчета высоты каждого блока. На странице изначально 64 ед. товара, может а быть и полный список.

Конечно, человек ещё будет со мной работать над реализацией, просто хотелось понять хочется алгоритм самому, иначе неинтересно совсем, сам понимаешь.

Вариант с height(0) не работает должным образом. Думаю, потому, что он ставит эту высоту (0px), когда mouseleave, а при новом hover'е он именно этот нуль берет за основу расчета, что ломает тень.

$("figure.item").hover (
	function() {
		var shadow = $(this).find('.shadow');
    	var button = $(this).find('.button');
    	shadow.height(shadow.height() + button.height() + 20)
	}, function() {
		$(this).find('.shadow').height(0);
	}
);

Как сделать автоматический рассчет высоты каждого элемента группы на JS?

Ярослав Иванов, боже, камрад, спасибо! То, что надо. Я пипец тупой и синтаксиса языка не знаю. Я попытался объединить твой код и предложенный Арсений Матыцин вариант (чтобы функция срабатывала на :hover'е), вышло так:

$("figure.item").hover (
	function() {
		var shadow = $(this).find('.shadow');
    		var button = $(this).find('.button');
    		shadow.height(shadow.height() + button.height() + 20)
	}, function() {
		$(this).find(".shadow").css("height","");
	}
);

Это не слишком пипецово? Метод работает, но я уже боюсь.

Как сделать автоматический рассчет высоты каждого элемента группы на JS?

К сожалению, JS нужен, т. к. подложка (.shadow) и блок с кнопками и доп. информацией -- оба на абсолютном позиционировании. Рассчитать заранее высоту .shadow, чтобы он покрывал собой и блок с кнопкой нельзя, т. к. последний может иметь у каждой карточки разную высоту.

К сожалению, составной подход (визуальное совмещение двух подложек), который предложил Максим Ленский, тоже не подходит в данном случае из-за полупрозрачной размытой тени.

Спасибо за пункты, буду думать, как реализовать! Касательно JQuery -- полностью согласен, но в том проекте JQuery повсюду, поэтому пусть будет он :))

Как реализовать realtime валидацию телефонного номера?

Нет, правда? Input mask?

https://unmanner.github.io/imaskjs/
https://igorescobar.github.io/jQuery-Mask-Plugin/

Что выбрать container или container-fluid?

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

Картинка — div с background.

Для картинки задай ширину в пикселях, а высоту в calc(100% + 30px) к примеру, чтобы она была больше контейнера по высоте.