Создайте эффект раскрытия изображения только для CSS с прозрачными границами
CSS-эффект изображения можно решить по-разному. На самом деле довольно легко кодировать дизайн, в котором изображение выделяется из (переполняется) его твердый фон -ты только разместить изображение над меньшим элементом с сплошным фоном.
Вы можете получить тот же результат, если вы используете прозрачные границы, где вы храните размер элемента фона такой же как на переднем плане и добавить прозрачные границы для того, чтобы создать пустое пространство для переднего плана переливаться в.
Есть некоторые преимущества в использовании последнего метода. Так как это прозрачные границы, которые обеспечивают область для переднего плана, в которую мы можем переливаться, мы можем контролировать направление перелива между левой, правой, верхней и нижней границами. Кроме того, имея одинаковый размер для переднего плана и фона облегчает перемещение обоих элементов одновременно по всей странице.
Короче говоря, мы увидим, как создать эффект раскрытия изображения только для CSS используя меньший сплошной фон с изображение переднего плана с прозрачными границами. Вы можете проверить финальная демонстрация ниже.
1. Создайте исходный код
HTML-накрест, только один В CSS мы используем две переменные CSS, Мы также добавляем Мы добавить пустое Добавляем изображение к На скриншот ниже видно что у нас пока ( Чтобы добавить меньший (выдвигающийся) фон позади изображения, мы будем использовать другой псевдоэлемент, Мы создаем еще одну переменную CSS, ширина рассчитывается как рост рассчитывается как С CSS-фильтр Вот скриншот демо до сих пор (с Мы добавить Как мы уже добавил Ниже вы можете увидеть финальная демонстрация. Если вы отображаете
--КУП а также --тусклый для цвет фона и размеры из .Foo контейнер, соответственно. В примере я использовал то же значение для ширины и высоты, чтобы получить квадратную коробку, создайте отдельные переменные для высоты и ширины, если вы хотите прямоугольник.позиция: относительная Правило для .Foo, так что его псевдоэлементы, которые мы будем использовать для раскрывая изображение, может быть абсолютно позиционируется (см. ниже), и, таким образом, сложены друг на друга. .foo --bgc: # FFCC03; - dim: 300 пикселей; ширина: переменная (- тусклая); высота: вар (- тусклая); цвет фона: var (- bgc); положение: относительное;
содержание имущество обоим псевдоэлементам, .Foo :: до того а также .Foo :: после, чтобы правильно их визуализировать. .foo :: before, .foo :: after content: "; позиция: абсолютная; слева: 0; верхняя: 0;
.Foo элемент, его два псевдоэлемента, .Foo :: до того, .Foo :: после, и их : парить псевдоклассы получить переход имущество что будет добавить легкий переход им за 500 миллисекунд (полсекунды). .foo, .foo: hover, .foo :: before, .foo :: after, .foo: hover :: before, .foo: hover :: after transition: transform 500ms easy-in;
2. Добавьте изображение
.Foo :: до того Псевдо-элемент в качестве фонового изображения, а также размер, чтобы покрыть весь псевдоэлемент с ширина а также рост свойства. Мы сложить его прямо под .Foo элемент с использованием z-индекс: -1 правило. .foo :: before width: 100%; высота: 100%; фон: url (camel.png) центр / обложка; z-индекс: -1;
центр ключевое слово центрирует изображение, в то время как покрытие Ключевое слово масштабирует изображение до охватить весь элемент сохраняя свое соотношение сторон. Z-индекс удаляется из .Foo :: до того так что это видно)
3. Добавьте слайд-фон
.Foo :: после.--б, для ширина рамки. Мы даем три прозрачные границы к ::после Псевдо-элемент: сверху, справа и снизу. .foo :: after --b: 20px; ширина: 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 минус общая ширина его вертикальных границ (верхняя и нижняя границы).коробчатого тень собственность, мы также добавить горизонтальную тень такого же размера, как .Foo (который вар (- тусклый)).Яркость (0,8) затемняет цвет фона немного, и, наконец, z-индекс: -2 правило помещает ::после псевдоэлемент под ::до который содержит изображение.Z-индекс удалены из обоих псевдоэлементов, чтобы их можно было увидеть):
4. Добавьте преобразование
преобразование имущество к двум псевдоэлементам, поэтому, когда пользователь наводит курсор на .Foo, оба псевдоэлемента двигается горизонтально.переход свойство для всех элементов в конце шага 1 движение изображения и его фона оба анимированные. .foo: hover :: before, .foo: hover :: after transform: translateX (100%);
Бонус: дополнительная маржа
.Foo рядом с другими элементами на странице и хотите, чтобы эти другие элементы отодвинуться когда изображение и его фон выдвигаются, то добавить правое поле той же ширины, что и у .Foo к .Foo: зависать элемент. .foo: hover margin-right: var (- dim);
