Много фотографий — как лучше сделать, через html или через css?

Question

[Евгения Сатонина]

Здравствуйте.
Верстаю что-то типа каталога. Это моя первая верстка. (Учусь)
В каталоге будет более 70 разных элементов с фото.
Фото у меня оформлено с ховером вот так:

.item-photo {
	background: url("../images/items/mod/mod1_c.jpg");
	background-size: 300px;
	width: 300px;
	height: 300px;
	border-radius: 10px;
}

.item-photo:hover {
	background: url("../images/items/mod/mod1.jpg");
	background-size: 300px;
	width: 300px;
	height: 300px;
	border-radius: 10px;
}

Мне придется в css 70 раз повторить такую штуку с указанием разных путей для фоток... *опой чую, что я что-то перемудрил...
Если пути к фоткам прописать в html, то непонятно как реализовать hover...

Comments

[Евгения Сатонина]

Neoline: да я вот только пока html+css изучаю. js будет следующим. Просто для себя нужно сверстать такой каталог, но не хотелось бы что-бы из за каких-то фотографий, код в 10 раз увеличился...

Answer 1

[Ankhena]

1. Не надо для hover второй раз писать повторяющиеся свойства. Они же не меняются.
Т.е. дополнительная строчка только одна.

.item-photo:hover {
  background: url("../images/items/mod/mod1.jpg");
}

2. Картинки вы не выложили. Но обычно для ховера используется какой-то эффект, который реализуется через css (ч/б, прозрачность, приближение и т.д.)

3. Если картинки все таки разные, то логичнее генерировать на php или описывать поведение через js

UPD:
выяснили, что картинки разные
поэтому так: https://jsfiddle.net/4mhoeknr/

Comments

[Евгения Сатонина]

Это фото товара с открытой полкой и с закрытой. При наведении полка должна открываться.
С js я пока не знаком... -(

[Ankhena]

Евгений Сатонин: ну пусть будет без js
например, так: делаем рядом 2 блока с картинками img (или 1 большой, в нем картинка и второй блок с картинкой при ховере), накладываем один на другой. Второму задаем прозрачность или display: none или visibility:none, в зависимости от желаемого эффекта. При наведении на первый блок, второму возвращается прозрачность/видимость.
Если блоки рядом, то используем правило для соседних селекторов, .первый:hover + .второй

[Евгения Сатонина]

Ankhena W: Попробую

[Евгения Сатонина]

Ankhena W: Но в этом случае, сам html код увеличится в размере в разы... это не сильно повлияет на скорость загрузки страницы?

[Евгения Сатонина]

Евгений Сатонин: Что более критично, большой html файл, или большой файл стилей? -)

[Сергей]

Евгений Сатонин: повлияет примерно на 0.00005 секунд -)

[Ankhena]

Евгений Сатонин: Примерно так https://jsfiddle.net/4mhoeknr/
Это на скорую руку.
Можно оборачивать в дополнительные div, применять разные эффекты и т.д.

[Ankhena]

Евгений Сатонин: при таком раскладе как в моем примере код увеличивается на 1 тег img и путь к картинке. Если Вы станете это делать через css, то еще будет название класса и управлять всем этим безобразием будет вообще не ясно как.

[Евгения Сатонина]

Сергей: Ankhena W: Я имею ввиду не разницу в скорости, если это делать через html или через css, а разницу в скорости, если в html будет более 30 таких картинок с ховером, и более 30 без.
Конечно наверное есть способ типа js, чтобы в коде была одна такая пара, а остальное как-то бралось автоматом, но я пока не знаю js )

[Ankhena]

Евгений Сатонин: ну посчитайте, 1 буква - 2 байтика, сколько весят картинки посмотрите у себя в папке, сложите все вместе. Время на загрузку по обычной формуле для скорости :)

[Евгения Сатонина]

Ankhena W: В общем получилось всё очень круто. Спасибо.

Answer 2

[Urukhayy]

Пути можно указать в html, а hover вешать на класс. Этот класс привязывать ко всем элементам, где есть подобные фото.
Если количество фотографией будет меняться, можно будет подключать дополнительный функционал на JS/TS, и там уже работать с путями.

Comments

[Евгения Сатонина]

фото все разные.
То есть фото 1 - ховер 1, фото 2 - ховер 2
Открытый комод, закрытый комод.
А моделей около 35

[Urukhayy]

Евгений Сатонин: Если CSS-стили у всех фото одинаковые, можно обойтись классом. Если разные — делать индивидуально, или группировать фотографии по группам схожести в отдельные классы (если есть такие).

[Евгения Сатонина]

Стили то одинаковые, сами фотографии разные...

Answer 3

[Serj-One]

Контент в html, оформление в css. Очевидно, что изображения каталога - это контент.

Answer 4

[Сергей]

Для начала нужно убрать из .item-photo background. В html элементе с классом item-photo добавить еще один класс, в котором и будут прописаны фото.
Также в твоем методе есть огромный минус, что при ховер эффекте грузится новая фотка и когда пользователь будет наводить мышку на картинку, будет подтупливаться на несколько секунд пока не загрузится новый файл.. очень неприятный эффект. Тут лучше объединить две фотографии в одну и через background-position сдвигать при hover.

И конечно лучше всего такое сделать на js, чтоб универсальное что-то было.. чтоб потом при добавлении нового товара не вспоминать как устроена система, а просто создать новый файл с похожим именем.

Comments

[Евгения Сатонина]

Это фото товара с открытой полкой и с закрытой. При наведении полка должна открываться.
Даже не знаю, есть ли смысл объединять в этом случае фото в одну?

[Сергей]

Евгений Сатонин: да конечно, я про это и говорил https://learn.javascript.ru/css-sprite