Создайте эффект раскрытия изображения только для CSS с прозрачными границами

Эффект раскрытия изображения только с помощью CSS может быть решен различными способами. На самом деле довольно просто кодировать дизайн, в котором изображение выделяется (переполняется) своим сплошным фоном — вы просто размещаете изображение над меньшим элементом со сплошным фоном.

Вы можете получить тот же результат, если будете использовать прозрачные границы, где вы сохраняете размер элемента фона таким же, как и у переднего плана, и добавляете прозрачные границы, чтобы создать пустое пространство для переполнения переднего плана.

Читайте также: Как создать вырезанный дизайн с помощью CSS

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

В двух словах, мы рассмотрим, как создать эффект раскрытия изображения только для CSS, используя меньший сплошной фон с изображением переднего плана с прозрачными границами. Вы можете проверить окончательную демонстрацию ниже.

Увидеть перо Эффект раскрытия изображения только для CSS HONGKIAT (@hkdc) на CodePen,
1. Создайте исходный код
HTML-только один

<

div> необходимо:

В CSS мы используем две переменные CSS, —bgc и —dim, для цвета фона и размеров контейнера .foo соответственно. В этом примере я использовал одно и то же значение для ширины и высоты, чтобы получить прямоугольную коробку, создавая отдельные переменные для высоты и ширины, если вы хотите прямоугольник.

Читайте также: Взгляд в: Использование CSS-переменных

Мы также добавляем положение: относительное правило к .foo, чтобы его псевдоэлементы, которые мы будем использовать для раскрытия изображения, можно было абсолютно позиционировать (см. Ниже) и таким образом накладывать друг на друга.

.foo {
    —bgc: # FFCC03;
    — dim: 300 пикселей;
    ширина: переменная (- тусклая);
    высота: вар (- тусклая);
    цвет фона: var (- bgc);
    положение: относительное;
}

Мы добавляем пустое свойство содержимого к обоим псевдоэлементам .foo :: before и .foo :: after, чтобы они правильно отображались.

.foo :: до того,
.foo :: после {
    содержание: »;
    положение: абсолютное;
    слева: 0;
    верх: 0;
}

Элемент .foo, его два псевдоэлемента, .foo :: before, .foo :: after и их: hover псевдоклассы получают свойство перехода, которое добавит им простой переход в течение 500 миллисекунд (половина второй).

.foo,
.foo: парить,
.foo :: до того,
.foo :: после,
.foo: парить :: до того,
.foo: hover :: after {
    переход: преобразование 500 мс, облегчение;
}

Читайте также: Понимание псевдоэлемента: до и после

1. Добавьте изображение
   Мы добавляем изображение в псевдоэлемент .foo :: before в качестве фонового изображения и изменяем его размер, чтобы покрыть весь псевдоэлемент свойствами width и height. Мы размещаем его прямо под элементом .foo, используя правило z-index: -1.

.foo :: before {
    ширина: 100%;
    высота: 100%;
    фон: url (camel.png) центр / обложка;
    z-индекс: -1;
}

Ключевое слово center центрирует изображение, в то время как ключевое слово cover масштабирует изображение, чтобы охватить весь элемент, сохраняя его соотношение сторон.

На скриншоте ниже вы можете увидеть, что у нас есть (z-index удален из .foo :: before, чтобы его можно было увидеть):
3. Добавьте слайд-фон
Чтобы добавить меньший (выдвигающийся) фон за изображением, мы будем использовать другой псевдоэлемент, .foo :: after.

Мы создаем еще одну переменную CSS, —b, для ширины границы. Мы даем три прозрачных границы для псевдоэлемента :: after: top, right и bottom.

.foo :: after {
    — б: 20 пикселей;
    ширина: calc (100% — var (- b));
    высота: calc (100% — calc (var (- b) * 2));
    граница: var (- b) сплошная прозрачная;
    граница слева: нет;
    box-shadow: вставка 0 var (- dim) 0 var (- bgc);
    фильтр: яркость (0,8);
    z-индекс: -2;
}

Ширина вычисляется как calc (100% — var — b)), которая возвращает общую ширину .foo минус общая ширина его горизонтальных границ (только правая граница, поскольку нет левой границы).

Высота рассчитывается как calc (100% — calc (var (- b) * 2)), которая возвращает общую высоту .foo минус общая ширина его вертикальных границ (верхняя и нижняя границы).

Со свойством box-shadow мы также добавляем горизонтальную тень вставки размером, равным .foo (который является var (- dim)).

CSS-фильтр яркости (.8) немного затемняет цвет фона, и, наконец, правило z-index: -2 размещает псевдоэлемент :: after под :: before, который содержит изображение.

Вот снимок экрана демонстрации, представленной до сих пор (с z-index, удаленным из обоих псевдоэлементов, чтобы их можно было увидеть):
4. Добавьте преобразование
Мы добавляем свойство transform к двум псевдоэлементам, поэтому, когда пользователь наводит курсор на .foo, оба псевдоэлемента перемещаются горизонтально.

Читайте также: Взгляд в: CSS3 2D трансформации

Поскольку мы уже добавили свойство перехода ко всем элементам в конце шага 1, движение изображения и его фона являются анимированными.

.foo: парить :: до того,
.foo: hover :: after {
    transform: translateX (100%);
}

Ниже вы можете увидеть финальную демонстрацию.

Увидеть перо Эффект раскрытия изображения только для CSS HONGKIAT (@hkdc) на CodePen,
Бонус: дополнительная маржа
Если вы отображаете .foo рядом с другими элементами на странице и хотите, чтобы эти другие элементы убирались, когда изображение и его фон выдвигались, добавьте правую
  поле такой же ширины, как у .foo для элемента .foo: hover.

.foo: hover {
    поле справа: var (- тусклый);
}