Перейти к содержимому



Купить ссылку здесь
Фотография

CSS: Как сделать наложение текста на фото при наведении?

Форум ZiSMO.biz
7
Сообщений в теме: 7

ONLINE Отправлено

Borisgnh005
группа пользователя
  • Онлайн:8д 18ч 50м
8

19659012.png

 

Пытался реализовать такое с помощью Position: absolute; но таким образом текст с кнопкой не корректно отображались на других устройствах, которые отличаются от моего размером экрана.

Есть другие варианты, как сделать такое? 


Сообщение отредактировал Borisgnh005: 02 12 2017 - 19:24




    • 0
  • Наверх

OFFLINE Отправлено

S T E A L L
группа пользователя
  • Онлайн:16д 17ч 13м
418

19659012.png

 

Пытался реализовать такое с помощью Position: absolute; но таким образом текст с кнопкой не корректно отображались на других устройствах, которые отличаются от моего размером экрана.

Есть другие варианты, как сделать такое? 

Свойство z-index к Position: absolute применяли ?


Сообщение отредактировал S T E A L L: 02 12 2017 - 19:55

    • 0
  • Наверх

ONLINE Отправлено

Borisgnh005
группа пользователя
  • Онлайн:8д 18ч 50м
8

Свойство z-index к Position: absolute применяли ?

 

Он тут не нужен. Вы возможно неправильно поняли, первая картинка - это просто блок, а вторая - это блок при наведении (hover) , а вот проблема с которой столкнулся я: 

при изменении окна браузера, блок который появляется при наведении смещается. 

 

JpA4wY1-Qpo.jpg


Сообщение отредактировал Borisgnh005: 02 12 2017 - 21:58

    • 0
  • Наверх

OFFLINE Отправлено

Сергей Еряшев
группа пользователя
  • Онлайн:7ч 17м
1

ну сделай блок с надписями, например div class="text" и в стилях укажи ему display:none и следующей записью .text:hover {display:block}

 

ну примерно как-то так


    • 0
  • Наверх

OFFLINE Отправлено

Сергей Еряшев
группа пользователя
  • Онлайн:7ч 17м
1

Вот визуальный пример Ссылка


Сообщение отредактировал Сергей Еряшев: 07 12 2017 - 16:31

    • 0
  • Наверх

OFFLINE Отправлено

xiyare
группа пользователя
  • Онлайн:16ч 59м
1

напиши сразу на фото в чём проблема ?


    • 0
  • Наверх

OFFLINE Отправлено

zhenechka
группа пользователя
  • Онлайн:4д 7ч 37м
1

Как вариант

<head>
<script type="text/javascript">
function mouseOver()
{
document.getElementById("button").src="../service/img/ogon.gif";
}
function mouseOut()
{
document.getElementById("button").src="../service/img/image.jpg";
}
</script>


</head>
<body>
<a href="#">
<img border="0" alt="Пример 2" src="../service/img/image.jpg" id="button" onmouseover="mouseOver()" onmouseout="mouseOut()" />
</a> 
</body>

    • 0
  • Наверх

OFFLINE Отправлено

F-Materia
группа пользователя
  • Онлайн:213д 6ч 36м
1 765
<style>
    .container {
        width: 200px;
        height: 200px;
        background: url(https://shikimori.org/system/characters/original/99441.jpg) no-repeat;
        position: relative;
    }
    .text {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        background: rgba(0,0,0,0.5);
        color: #fff;
        text-align: center;
        line-height: 200px;
        display: none;
    }
    .container:hover .text {
        display: block;
    }
</style>

<div class="container">
    <div class="text">TEXT</div>
</div>

    • 0
  • Наверх