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



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

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

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

OFFLINE Отправлено

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

19659012.png

 

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

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


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




    • 0
  • Наверх

Поделиться этим:

OFFLINE Отправлено

S T E A L L
группа пользователя
  • Онлайн:31д 8ч 19м
530

19659012.png

 

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

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

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


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

    • 0
  • Наверх

OFFLINE Отправлено

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

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

 

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

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

 

JpA4wY1-Qpo.jpg


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

    • 0
  • Наверх

Рекламный пост

OFFLINE Отправлено

user11112222
группа пользователя
  • Онлайн:44д 20ч 20м
338

Для прoдвижения в instagram, youtube, Вконтакте или Telegram вы можете воспользоваться услугами одного из проверенных временем сервисов...

 

Ссылка: PROMO.APIBOSSA.PW

8ff38cd17f6a.png

 

Рекомендуемые услуги для Инстагpам: бесплатный обмен лайками в инстагpам, inARC Following (масcфоллoвинг с множеством функций), Автолайки с охватом аудитории, беcплатные лайки, просмотры IGTV...

Рекомендуемые услуги для Ютyб: живые просмотры на видеo, живые русские подпиcчики на канал, просмотры с высокой скоростью...

Рекомендуемые услуги для Вконтакте: живые активные подписчики в группы, живые подписчики на профили

В наличии еще остались места на обучение в восьмом потоке школы SMM от нашей компании! school.bos.bz


Сообщение отредактировал user11112222: 20 10 2018 - 13:21

LUNf3HX.pngNg6bhkr.png&key=a9e43fb1ab8117291522616aJN2z4sT.png&key=1b93f34efbe7d5dac3195b610mZsUOt.png

    • 0
  • Наверх

OFFLINE Отправлено

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

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

 

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


    • 0
  • Наверх

OFFLINE Отправлено

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

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


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

    • 0
  • Наверх

OFFLINE Отправлено

xiyare
группа пользователя
  • Онлайн:2д 7ч 47м
2

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


    • 0
  • Наверх

OFFLINE Отправлено

zhenechka
группа пользователя
  • Онлайн:4д 23ч 9м
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д 9ч 28м
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
  • Наверх

OFFLINE Отправлено

vebber
группа пользователя
  • Онлайн:2ч 46м
0

Вот подобный эффект

 

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Текст на изображениях при наведении</title>
<style>
.lake {
display: inline-block;
position: relative;
margin: 0 auto;
overflow: hidden;
background: #000;
}
.lac {
display: block;
max-width: 100%;
transition: opacity .2s ease-in-out;
}
.lake:after,
.lake:before
{
    box-sizing: border-box;
position: absolute;
width: 100%;
    padding: 20px;
    color: #fff;
    transition: transform .4s ease-out;
}
.lake:after {
    content: attr(data-title);
top: 0;
    height: 20%;
background: rgba(0,0,0,.4);
font-size: 2rem;
font-weight: 300;
text-align: center;
    transform: translateY(-100%) scale(.8);
}
.lake:before {
content: attr(data-description) "…";
top: 20%;
    height: 80%;
background: rgba(107,38,68,.6);
font-size: 1.1rem;
    transform: translateY(100%) scale(.8);
}
.lake:hover:after,
.lake:hover:before
{
transform: translateY(0%) scale(1);
}
</style>
</head>
<body>
    <div class="lake"
        data-title="Серебряное озеро"
        data-description="Серебряное — озеро в Звениговском районе, Марий Эл, Россия. Находится на территории Суслонгерского военного лесхоза. Озеро расположено в бассейне реки Юшут, по происхождению — междюнное. На озере возможен только неорганизованный отдых. Оборудованы туристические стоянки. Ихтиофауна: окунь, линь, щука, верховка, пескарь.">
<img class="lac" src="images/131.jpg" alt="" width="400" height="300">
</div>
</body>
</html>

 

Вот тут ещё четыре варианта


    • 0
  • Наверх

OFFLINE Отправлено

HOLPER
группа пользователя
  • Онлайн:240д 9ч 54м
892

Вы первому блоку тоже Position задавайте, как родительского элемента. Тогда второй с absolute должен к нему привязываться.


 НАКРУТКА   ИНСТАГРАМ  И НИЧЕГО ЛИШНЕГО

    • 0
  • Наверх

OFFLINE Отправлено

nicholas2
группа пользователя
  • Онлайн:5д 14ч 59м
23
для разных экранов можете исп. @media

Сообщение отредактировал nicholas2: 08 01 2018 - 14:32

    • 0
  • Наверх