Создайте эффект раскрытия изображения только для CSS с прозрачными границами
Эффект раскрытия изображения только с помощью CSS может быть решен различными способами. На самом деле довольно просто кодировать дизайн, в котором изображение выделяется (переполняется) своим сплошным фоном – вы просто размещаете изображение над меньшим элементом со сплошным фоном.
Вы можете получить тот же результат, если будете использовать прозрачные границы, где вы сохраняете размер элемента фона таким же, как и у переднего плана, и добавляете прозрачные границы, чтобы создать пустое пространство для переполнения переднего плана.
Читайте также: Как создать вырезанный дизайн с помощью CSS
Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)
Есть несколько преимуществ в использовании последнего метода. Поскольку именно прозрачные границы обеспечивают область для переполнения переднего плана, мы можем контролировать направление переполнения между левой, правой, верхней и нижней границами. Кроме того, одинаковый размер как для переднего плана, так и для фона облегчает одновременное перемещение обоих элементов по странице.
В двух словах, мы рассмотрим, как создать эффект раскрытия изображения только для 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 мс, облегчение;
}
Читайте также: Понимание псевдоэлемента: до и после
- Добавьте изображение
Мы добавляем изображение в псевдоэлемент .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 (- тусклый);
}
Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)