Показать div на изображении при наведении курсора

0

Посмотрите на мой jsfiddle

Вот пример кода js:

$(".box").hover(function () {
   $(this).find('.box-hover').fadeIn(100);
   $(".box-tresc").show();
},

function () {
   $(this).find('.box-hover').fadeOut(100);
   $(".box-tresc").hide();
});

Я хочу, box-tresc div box-tresc с содержимым "xxxxx" отображался в центре изображения. Я попробовал margin-top:-30px; но это не сработало.

Теги:

7 ответов

1
Лучший ответ

ОБНОВЛЕНО:

Здесь есть скрипка, содержащая возможное решение (чистый CSS): link

CSS:

.box-hover {
   background-color: rgba(0, 0, 0, 0.6);
    position: absolute;
    width: 290px;
    height: 185px;
    margin: 5px 5px 0 5px;
    opacity: 0;
    color:transparent;
    -webkit-transition:  0.4s;
    transition:  0.4s;
    line-height:185px;
    text-align:center;
}
.box-hover:hover {
    color:white;
    opacity:1;
}

HTML:

<div class="box">
    <div class="box-hover">some text</div>
    <div class="box-image">
        <img src="https://lh5.googleusercontent.com/mqHWHd2jm2141eD4SWowcIss1FwGmdZm3f0DxO0HCxYyWepZn8YyIKrMyrYKBlmGYU6zjiV-UQ=s460-h340-e365" />          
    </div>
    <div class="box-text">Theme 2.0
        <br><span>Created by: <em>User</em></span>    
    </div>
</div>
  • 0
    Вы даже пробовали свой пример? jsfiddle.net/xLsbE/6
  • 0
    Что вы думаете об этом решении: jsfiddle.net/nz5LG
Показать ещё 4 комментария
1

Это пример, не перемещающий текст " Тема 2.0 " при зависании.

Вы должны использовать display:absolute; как я сделал здесь в вашем коде.
И чем вы можете использовать margin.
Я использовал margin:-110px 0 0 50px; (Измените, как хотите)

.box-tresc {
    display:none;
    position:absolute;
    margin:-110px 0 0 50px;
    color:white;        /* only to make te text more visable */
}

DEMO

0

Попробуйте что-нибудь вроде tt?

$(".box-tresc").css({"right":"20%","display":"block"});
  • 0
    Вы пытались в его демоверсии увидеть, что он делает?
  • 0
    jsfiddle.net/xLsbE/9 Здесь ...
0

Вы можете использовать position:absolute с% позиционирования, чтобы свободно менять изображение. Просто установите:

.box-tresc {
    display: none;
    position: absolute;
    text-align: center;
    top: 50%;
    width: 100%;
}


.box-image {
    margin: 5px 5px 0;
    position: relative;
}
0

Измените код css, как показано ниже, и попробуйте сейчас

.box {
   width: 300px;
   min-height: 200px;
   position:relative;
   background-color: #ECECEC;
   border: 1px solid #C6C6C6;
   border-radius: 3px;
   text-align: left;
   }

  .box-tresc {
    display:none;
    position: absolute;
    top: 50%;
    text-align: center;
    width: 100%;
    float: left;
    }

Надеюсь это поможет..

0

Самое простое решение - просто добавить text-algin и margin-top в ваш .box-tresc. Задача решена.

.box-tresc {
    display:none;

    text-align: center;

    margin-top:-100px;
}
  • 0
    Демонстрация JSFiddle была бы полезна здесь.
-1

position relative - ваш друг здесь.

СМОТРЕТЬ ДЕМО

  • 0
    Это должно быть расширено. Возможно, добавьте демо для OP, чтобы увидеть, также;)
  • 0
    ДЕМО есть;) LOL
Показать ещё 4 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню