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