8.31.2022

Показ описания при наведении курсора на картинку - на css


Данным способом можно организовать вывод блока с текстом поверх изображения (не выходя за его границы) при наведении на это изображение. Используя только CSS.

HTML - внутри первого блока div размещается второй:

< div class="block_1" >< img src="ссылка на изображение" alt="" / >
< div class="block_2" >
< a href="ссылка" target="_blank">Ваш текст (появляющийся при наведении на изображение).< /a >
< /div >
< /div >

! После копирования и вставки кода, не забудьте убрать лишние пробелы в скобках кода.

CSS - стили для блоков (подгоняются под свои):
< style >
.block_1{
    position:relative;
    margin:10px auto; /* Отступы вокруг блока */
    width:0px; /* ширина блока */
    height:0px; /* высота блока */
}
.block_2{
    position:absolute;
    left:0;
    bottom:0;
    right:0;
    top:0;
    background:rgba(255,255,255, 0.7); /* фон блока */
    padding:5px;
    display:none;
}
.block_1:hover .block_2{
    display:block;
}< /style >

Комментариев нет:

Отправить комментарий