Верстка интерактивной мозайки в HTML?

Question

[Александр Ка]

При верстке мозаики для блога, возникает эффект моргания белого фона,
при первом наведении на картинку, 2 картинки меняют друг друга через hover.
Я так понимаю при первой загрузке, пока картинка 2 не подрузилась, браузер выдает белый фон, потом картинки меняются плавно через transition. Мозаика сделана как таблица, хочу чтобы она не изменялась на разных устройствах. Посмотреть можно simplea.ru (это мой личный блог, извиняюсь если нарушаю какие-нибудь правила рекламы) Как лучше сверстать мозаику, чтобы убрать эти мерцания ?

Answer 1

[Ankhena]

В вашем случае разумнее обойтись вообще без второй картинки.
При hover картинка делается полупрозрачной, цвет обертки - синий нужного оттенка.

https://jsfiddle.net/zexdvc6a/
Синий поставила самый простецкий, для примера. Подберите свой и прозрачность.

Comments

[Александр Ка]

Экспериментирую с этим методом, но хотелось бы чтобы при наведении появлялся текст. Для этого как я понимаю нужно уже несколько блочных элементов и менять их через position и z-index.

[Ankhena]

Александр Ка: Текст никак не мешает написанному выше. В основной блок вставляете еще span c текстом и используете основной:hover span {}. Либо рядом и тогда + или ~ для соседних.

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

[Ankhena]

Александр Ка: Для картинок и подписей к ним отлично подходят теги figure и figcaption

[Александр Ка]

Переверстал, спасибо советы очень помогли!

Answer 2

[Сергей Жубартович]

Сделать спрайт из картинок, или записать их в css через base64, например