Показать заголовок на элементе парить

-2

Я работаю над this site прямо сейчас, и моя цель состоит в том, чтобы добавить следующую функциональность:Показать заголовок на элементе парить

при наведении курсора на одно изображение, я хочу, чтобы отобразить заголовок, содержащийся в заголовке ,
взаимодействие должно перейти от цвета панели и имеют один и тот же фон

Я думаю, что это, вероятно, достижимо с помощью CSS в одиночку, но у меня возникают проблемы визуализировать, как разметка будет работать. Любые предложения или пункты в направлении были бы весьма полезны.

источник

2013-03-29 mtthwbsh

Пожалуйста, добавьте скрипку или код, так как в ближайшее время, вы будете решать эту проблему, и тогда ваш вопрос не будет иметь историческое значение –

Это можно сделать с помощью CSS3. http://jsfiddle.net/zh3EC/

a > h3 { 
    width: 100%; 
    display: block; 
    position: absolute; 
    bottom: -1.5em; 
    color: white; 
    background-color: #993434; 
    padding: 0.4em; 
    box-sizing: border-box; 

    -webkit-transition: all 300ms ease-in; 
     -moz-transition: all 300ms ease-in; 
     -ms-transition: all 300ms ease-in; 
     -o-transition: all 300ms ease-in; 
     transition: all 300ms ease-in; 
} 

a:hover > h3 { 
    bottom: 0; 
}

источник

2013-03-29 17:22:29

Я думаю, что это именно то, что я получал после, но не видел метод в действии раньше, спасибо! – mtthwbsh

Попробуйте JQuery:

$(function() { 
    $('img').hover(function() { 
     var title = $(this).attr('title'); 
    }, function() { 
    }); 
});

источник

2013-03-29 16:58:48 mirsad

Это не будет работать, потому что единственное, что вы делаете, это создание переменной на наведение и вызов функции, которая ничего не делает –

Вы можете сделать div с background-image и h1 (название) внутри с названием; затем используйте псевдослот :hover, чтобы изменить непрозрачность от 0 до 1 для названия.

HTML:

<div> 
    <h1>Title Here</h1> 
</div>

CSS:

div { 
    background-image: url('image_here.jpg'); 
} 

h1 { 
    display: block; 
    width: 100%; 
    height: 100%; 
    opacity: 0; 
} 

p:hover { 
    opacity: 1; 
}

JS Fiddle Example

источник

2013-03-29 17:04:06 JSW189

Показать заголовок на элементе парить

ответ

Смежные вопросы