Как создать наложение изображения при наведении курсора с помощью HTML и CSS?

Опубликовано: 5 Января, 2022

В этой статье мы рассмотрим 5 различных типов наложений: левое, правое, верхнее, нижнее и затухание. Вам понадобятся два блока. Один будет вашим оверлейным div, содержащим то, что будет отображаться, когда пользователь наведет курсор на изображение, а другой будет контейнером, содержащим как изображение, так и его оверлей. Внутренний div, представляющий наложение, будет иметь два класса. Один, который вы будете использовать для стилизации всех наложений, а другой представляет определенный тип наложения (левый, правый, верхний, нижний или плавный).

Ваше изображение должно быть размещено за пределами внутреннего div (оверлей), но внутри внешнего (контейнера). Не забудьте добавить альтернативный текст с описанием изображения, чтобы помочь пользователям, использующим программу чтения с экрана.

HTML-код:

<!DOCTYPE HTML>
< html >
< head >
< meta charset = "UTF-8" >
< title >Image Overlay</ title >
</ head >
< body >
< center >
< h1 class = "title" >
GeeksforGeeks
</ h1 >
< b >Image Overlay</ b >
< br >
< br >
< div class = "container" >
< img src =
" https://media.geeksforgeeks.org/wp-content/uploads/20200325132558/download311.png "
class = "image" >
< div class = "overlay overlayLeft" ></ div >
</ div >
</ center >
</ body >
</ html >

Код CSS: установите положение контейнера относительно его нормального положения и определите его ширину и высоту. Ключ к тому, чтобы наложение заработало, - установить его абсолютное положение. Это означает, что он расположен относительно ближайшего предка, которым в данном случае является изображение. Чтобы оверлей не всегда присутствовал и появлялся только тогда, когда пользователь наводит курсор на изображение, установите его непрозрачность на ноль, что означает полную прозрачность. Используйте «background-color», чтобы установить цвет вашего наложения. Используйте «переход», чтобы наложение появлялось постепенно, а не всплывала поверх изображения. Поскольку мы устанавливаем непрозрачность наложения равной нулю, как только мы наводим курсор на контейнер, мы хотим установить эту непрозрачность на 1. Это означает, что как только пользователь наводит курсор на элемент контейнера, наложение появится.

<style>
body {
text-align : center ;
}
h 1 {
color : green ;
}
.container img {
width : 250px ;
height : 250px ;
}
.container {
position : relative ;
width : 400px ;
height : auto ;
}
</style>

Fade Overlay: Ширина и высота наложения - это ширина и высота изображения, равные div изображению. При наведении курсора на изображение поверх него появляется оверлей.

  • Программа:
    <!DOCTYPE HTML>
    < html >
    < head >
    < meta charset = "UTF-8" >
    < title >Image Overlay</ title >
    < style >
    body {
    text-align: center;
    }
    h1 {
    color: green;
    }
    .container img {
    width: 250px;
    height: 250px;
    }
    .container {
    position: relative;
    width: 400px;
    height: auto;
    }
    .overlay {
    position: absolute;
    transition: all 0.3s ease;
    opacity: 0;
    background-color: #9bcd9b;
    }
    .container:hover .overlay {
    opacity: 1;
    }
    .overlayFade {
    height: 250px;
    width: 250px;
    top: 0;
    left: 75px;
    background-color: #9bcd9b;
    }
    </ style >
    </ head >
    < body >
    < center >
    < h1 class = "title" >
    GeeksforGeeks
    </ h1 >
    < b >Image Overlay</ b >
    < br >
    < br >
    < div class = "container" >
    < img src =
    " https://media.geeksforgeeks.org/wp-content/uploads/20200325132558/download311.png "
    class = "image" >
    < div class = "overlay overlayFade" ></ div >
    </ div >
    </ center >
    </ body >
    </ html >
  • Выход:

Левое наложение: высота наложения - это высота изображения (100%). Ширина равна нулю и установлена влево. Ширина устанавливается на 100% при наведении курсора на изображение и постепенно перемещается слева направо.

  • Программа:
    <!DOCTYPE HTML>
    < html >
    < head >
    < meta charset = "UTF-8" >
    < title >Image Overlay</ title >
    < style >
    body {
    text-align: center;
    }
    h1 {
    color: green;
    }
    .container img {
    width: 250px;
    height: 250px;
    }
    .container {
    position: relative;
    width: 400px;
    height: auto;
    }
    .overlay {
    position: absolute;
    transition: all 0.3s ease;
    opacity: 0;
    background-color: #9bcd9b;
    }
    .container:hover .overlay {
    opacity: 1;
    }
    .overlayLeft{
    height: 100%;
    width: 0;
    top: 0;
    left: 75px;
    background-color: #9bcd9b;;
    }
    .container:hover .overlayLeft{
    width: 250px;
    }
    </ style >
    </ head >
    < body >
    < center >
    < h1 class = "title" >
    GeeksforGeeks
    </ h1 >
    < b >Image Overlay</ b >
    < br >
    < br >
    < div class = "container" >
    < img src =
    " https://media.geeksforgeeks.org/wp-content/uploads/20200325132558/download311.png "
    class = "image" >
    < div class = "overlay overlayLeft" ></ div >
    </ div >
    </ center >
    </ body >
    </ html >
  • Выход:

Правое наложение: высота наложения - это высота изображения (100%). Ширина равна нулю и установлена вправо. Ширина устанавливается на 100% при наведении курсора на изображение и постепенно перемещается справа налево.

  • Программа:
    <!DOCTYPE HTML>
    < html >
    < head >
    < meta charset = "UTF-8" >
    < title >Image Overlay</ title >
    < style >
    body {
    text-align: center;
    }
    h1 {
    color: green;
    }
    .container img {
    width: 250px;
    height: 250px;
    }
    .container {
    position: relative;
    width: 400px;
    height: auto;
    }
    .overlay {
    position: absolute;
    transition: all 0.3s ease;
    opacity: 0;
    background-color: #9bcd9b;
    }
    .container:hover .overlay {
    opacity: 1;
    }
    .overlayRight{
    height: 100%;
    width: 0;
    top: 0;
    right: 75px;
    background-color: #9bcd9b;;
    }
    .container:hover .overlayRight{
    width: 250px;
    }
    </ style >
    </ head >
    < body >
    < center >
    < h1 class = "title" >
    GeeksforGeeks
    </ h1 >
    < b >Image Overlay</ b >
    < br >
    < br >
    < div class = "container" >
    < img src =
    " https://media.geeksforgeeks.org/wp-content/uploads/20200325132558/download311.png "
    class = "image" >
    < div class = "overlay overlayRight" ></ div >
    </ div >
    </ center >
    </ body >
    </ html >
  • Выход:

Верхнее наложение: ширина наложения равна ширине изображения (100%). Высота равна нулю и установлена наверху. Высота устанавливается на 100% при наведении курсора на изображение и постепенно перемещается сверху вниз.

  • Программа:
    <!DOCTYPE HTML>
    < html >
    < head >
    < meta charset = "UTF-8" >
    < title >Image Overlay</ title >
    < style >
    body {
    text-align: center;
    }
    h1 {
    color: green;
    }
    .container img {
    width: 250px;
    height: 250px;
    }
    .container {
    position: relative;
    width: 400px;
    height: auto;
    }
    .overlay {
    position: absolute;
    transition: all 0.3s ease;
    opacity: 0;
    background-color: #9bcd9b;
    }
    .container:hover .overlay {
    opacity: 1;
    }
    .overlayTop{
    width: 250px;
    height: 0;
    top: 0;
    right: 75px;
    background-color: #9bcd9b;;
    }
    .container:hover .overlayTop{
    height: 250px;
    }
    </ style >
    </ head >
    < body >
    < center >
    < h1 class = "title" >
    GeeksforGeeks
    </ h1 >
    < b >Image Overlay</ b >
    < br >
    < br >
    < div class = "container" >
    < img src =
    " https://media.geeksforgeeks.org/wp-content/uploads/20200325132558/download311.png "
    class = "image" >
    < div class = "overlay overlayTop" ></ div >
    </ div >
    </ center >
    </ body >
    </ html >
  • Выход:

Нижнее наложение: ширина наложения - это ширина изображения (100%). Высота равна нулю и установлена снизу. Высота устанавливается на 100% при наведении курсора на изображение и постепенно перемещается снизу вверх.