Как наложить изображения

Question

Я хочу наложить одно изображение на другое с помощью CSS. Примером этого является то, что первое изображение (если хотите, фон) будет ссылкой на миниатюру продукта, при этом ссылка открывает лайтбокс / всплывающее окно, показывающее увеличенную версию изображения.

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

Answer 1

Если вы не используете тег <img>, который отображает само изображение, вы не сможете достичь этого только с помощью чистого CSS. Вам также понадобятся два HTML-элемента - по одному для каждой картинки. Это потому, что единственный способ заставить элемент отображать изображение с помощью CSS - это свойство background-image, и каждый элемент может иметь только одно фоновое изображение. Какие два элемента вы выберете и как вы их расположите, зависит от вас. Существует много способов размещения одного элемента HTML над другим.