CSS - Оверлей: Пособие для начинающих по созданию динамических веб-эффектов
Здравствуйте, будущие суперзвезды веб-дизайна! Сегодня мы окунемся в fascинирующий мир CSS оверлеев. Не волнуйтесь, если вы новички в этом - я помню свой первый раз, когда учился оверлеям, и я обещаю, что вам это будет и весело, и полезно. Так что отправляемся в это путешествие вместе!
Что такое CSS оверлей?
Прежде чем мы перейдем к коду, давайте поймем, что такое оверлей. Представьте, что вы смотрите на красивую картину, и вдруг кто-то кладет прозрачный лист поверх нее с каким-то текстом. Это essentially то, что делает оверлей на веб-сайте - он добавляет дополнительный слой поверх существующего контента, часто чтобы предоставить дополнительную информацию или создать визуальные эффекты.
CSS Оверлей - базовый пример
Давайте начнем с простого примера оверлея. Вот HTML и CSS код:
<div class="container">
<img src="cute-puppy.jpg" alt="Забавный щенок">
<div class="overlay">
<div class="text">Здравствуйте, я щенок!</div>
</div>
</div>.container {
position: relative;
width: 100%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: rgba(0,0,0,0.5);
}
.container:hover .overlay {
opacity: 1;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}Давайте разберем это:
- У нас есть контейнер с изображением и оверлейным div.
- Оверлей располагается абсолютно внутри контейнера.
- Initially, оверлей имеет 0 opacity (невидим).
- When we hover over the container, opacity оверлея изменяется до 1 (полностью виден).
- Текст центрируется внутри оверлея.
CSS Оверлей - скольжение сверху вниз
Теперь давайте сделаем вещи интереснее с эффектом скольжения! Вот как мы можем изменить наш CSS, чтобы оверлей скользил сверху вниз:
.overlay {
position: absolute;
bottom: 100%;
left: 0;
right: 0;
background-color: rgba(0,0,0,0.5);
overflow: hidden;
width: 100%;
height: 0;
transition: .5s ease;
}
.container:hover .overlay {
bottom: 0;
height: 100%;
}В этом примере оверлей начинается сверху изображения (bottom: 100%) с нулевой высотой. When hovered, он скользит вниз, чтобы покрыть все изображение.
CSS Оверлей - скольжение снизу вверх
Что, если мы хотим, чтобы оверлей скользил вверх? Легко! Просто измените несколько строк:
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0,0,0,0.5);
overflow: hidden;
width: 100%;
height: 0;
transition: .5s ease;
}
.container:hover .overlay {
height: 100%;
}Теперь оверлей начинается снизу и expands upwards при наведении.
CSS Оверлей - скольжение слева направо
Давайте изменим ситуацию и сделаем наш оверлей скользить слева направо:
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 100%;
background-color: rgba(0,0,0,0.5);
overflow: hidden;
width: 0;
height: 100%;
transition: .5s ease;
}
.container:hover .overlay {
width: 100%;
right: 0;
}Здесь оверлей начинается с нулевой ширины слева и expands to full width при наведении.
CSS Оверлей - скольжение справа налево
И, конечно, мы можем сделать его скользящим справа налево:
.overlay {
position: absolute;
bottom: 0;
left: 100%;
right: 0;
background-color: rgba(0,0,0,0.5);
overflow: hidden;
width: 0;
height: 100%;
transition: .5s ease;
}
.container:hover .overlay {
width: 100%;
left: 0;
}На этот раз оверлей начинается справа и скользит влево при наведении.
CSS Оверлей - эффект затемнения
помните наш первый пример? Это был на самом деле эффект затемнения! Но давайте сделаем его еще более плавным:
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: rgba(0,0,0,0.5);
}
.container:hover .overlay {
opacity: 1;
}Это создает плавный эффект затемнения при наведении на изображение.
CSS Оверлей - оверлей с заголовком изображения
Давайте создадим оверлей, который показывает заголовок изображения при наведении:
<div class="container">
<img src="cute-puppy.jpg" alt="Забавный щенок" class="image">
<div class="overlay">
<div class="title">Забавный щенок</div>
</div>
</div>.container {
position: relative;
width: 100%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 0;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.5);
color: #f1f1f1;
width: 100%;
transition: .5s ease;
opacity: 0;
color: white;
font-size: 20px;
padding: 20px;
text-align: center;
}
.container:hover .overlay {
opacity: 1;
}Это создает оверлей с заголовком, который появляется снизу изображения при наведении.
CSS Оверлей - оверлей с иконой
Теперь добавим иконный оверлей к нашему изображению:
<div class="container">
<img src="cute-puppy.jpg" alt="Забавный щенок" class="image">
<div class="overlay">
<a href="#" class="icon" title="Профиль пользователя">
<i class="fa fa-user"></i>
</a>
</div>
</div>.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: rgba(0,0,0,0.5);
}
.container:hover .overlay {
opacity: 1;
}
.icon {
color: white;
font-size: 100px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}
.fa-user:hover {
color: #eee;
}Это создает иконный оверлей, который появляется в центре изображения при наведении.
Свойства, связанные с CSS оверлеем
Вот таблица свойств, часто используемых с CSS оверлеями:
| Свойство | Описание |
|---|---|
| position | Устанавливает метод позиционирования |
| top, bottom, left, right | Указывает положение оверлея |
| width, height | Устанавливает размеры оверлея |
| opacity | Управляет прозрачностью оверлея |
| transition | Определяет, как оверлей появляется/исчезает |
| background-color | Устанавливает цвет оверлея |
| z-index | Управляет порядком стека элементов |
И вот и все,folks! Вы только что узнали основы CSS оверлеев. Помните, что практика делает perfect, так что не бойтесь экспериментировать с этими примерами. Кто знает? Вы можете создать下一ую большую тенденцию в веб-дизайне! Счастливо кодируйте, и пусть ваши оверлеи всегда будут гладкими, а ваши переходы всегда будут无缝ными!
Credits: Image by storyset