Задать вопрос
Jazzcool
@Jazzcool
html

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

Здравствуйте.
Верстаю что-то типа каталога. Это моя первая верстка. (Учусь)
В каталоге будет более 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...
  • Вопрос задан
  • 1539 просмотров
1 комментарий
Подписаться 1 Оценить 1 комментарий
Решения вопроса 1
Ankhena
@Ankhena Куратор тега CSS
Нежно люблю верстку
1. Не надо для hover второй раз писать повторяющиеся свойства. Они же не меняются.
Т.е. дополнительная строчка только одна. 
.item-photo:hover {
  background: url("../images/items/mod/mod1.jpg");
}

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

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

UPD:
выяснили, что картинки разные
поэтому так: https://jsfiddle.net/4mhoeknr/
Ответ написан
11 комментариев
11 комментариев
Пригласить эксперта
Ответы на вопрос 3
@Urukhayy
Пути можно указать в html, а hover вешать на класс. Этот класс привязывать ко всем элементам, где есть подобные фото.
Если количество фотографией будет меняться, можно будет подключать дополнительный функционал на JS/TS, и там уже работать с путями.
Ответ написан
3 комментария
3 комментария
Serj-One
@Serj-One
i'm sexy and i know it
Контент в html, оформление в css. Очевидно, что изображения каталога - это контент.
Ответ написан
Комментировать
Комментировать
UDAV99
@UDAV99
web программист, верстальщик
Для начала нужно убрать из .item-photo background. В html элементе с классом item-photo добавить еще один класс, в котором и будут прописаны фото.
Также в твоем методе есть огромный минус, что при ховер эффекте грузится новая фотка и когда пользователь будет наводить мышку на картинку, будет подтупливаться на несколько секунд пока не загрузится новый файл.. очень неприятный эффект. Тут лучше объединить две фотографии в одну и через background-position сдвигать при hover.

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Frontend-разработчик (React)
ДАЛЕЕ
от 130 000 ₽
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Fullstack PHP Developer
Smapse Education
от 40 000 до 65 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Разработать парсер и админку
19 апр. 2024, в 14:12
30000 руб./за проект
Создать логотип
19 апр. 2024, в 14:10
500 руб./за проект
Разработка дизайна мобильного приложения которое управляет вентиляцией
19 апр. 2024, в 14:01
70000 руб./за проект
Ещё заказы