Отображение текста при наведении курсора на изображение Ссылка

Я уже смотрел здесь (How to show text on image when hovering?), чтобы найти решение этой проблемы, но это не работает на 100% ... Поскольку абзац находится под изображением, часть изображения не покрывается когда вы наводите на него курсор. Я хочу, чтобы все изображение было покрыто текстом, когда вы наводили курсор на изображение. (Посмотрите на это: http://jsfiddle.net/rMhGE/ или ниже.)Отображение текста при наведении курсора на изображение Ссылка

HTML-

<body> 
     <div class="cube1"> 

      <a href="http://google.com"><img src="http://us.123rf.com/400wm/400/400/busja/busja1209/busja120900010/15099001-detailed-vector-image-of-symbol-of-london--best-known-british-double-decker-bus.jpg"> 
      <p class="contact">Random Text Here</p></a> 
     </div> 
</body>

CSS-

.cube1 { 
    position: relative; 
    width: 400px; 
    height: 400px; 
    float: left; 
} 

.contact { 
    overflow: hidden; 
    position: absolute; 
    width: 400px; 
    height: 386px; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    background: rgba(255,255,255,0.95); 
    color: #aaa; 
    visibility: hidden; 
    opacity: 0; 
} 

.cube1:hover .contact { 
    visibility: visible; 
    opacity: 1; 
}

Любая помощь приветствуется. Спасибо.

источник

2013-08-25 roryjt

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

Снимите высоту с контакта. а также маржу. Вам также не нужно значение ширины, если вы растягиваете его с помощью метода абсолютного 0 0 0 0.

.contact { 
    overflow: hidden; 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    background: rgba(255,255,255,0.95); 
    color: #aaa; 
    visibility: hidden; 
    opacity: 0; 
    margin: 0; 
}

источник

2013-08-25 03:39:01 Jeffpowrs

Почему я получил -1? – Jeffpowrs

+1 к счетчику -1 – syb0rg

Ха, спасибо @ syb0rg. – Jeffpowrs

Изображение имеет над ним текст, я не уверен, что вы пытаетесь сделать здесь. Что вы подразумеваете под «покрытием изображения»?

источник

2013-08-25 03:34:38 gespinha

изменить p {margin:0px} из элемента р или дать классу

.contact { 
    overflow: hidden; 
    position: absolute; 
    width: 400px; 
    height: 395px;//change height also to cover it completly 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    background: rgba(255,255,255,0.95); 
    color: #aaa; 
    visibility: hidden; 
    opacity: 0; 
    margin:0px 
}

источник

2013-08-25 03:35:01

.contact {margin-top: 0px; } –

@gp ya его путь .. –

вам необходимо установить маржу на элементе «р» 0, а «высота» 400:

margin:0; 
height:400px;

Обновлено jsFiddle: http://jsfiddle.net/rMhGE/5/

источник

2013-08-25 03:37:35 htxryan

И высота элемента 'p' должна быть' 400px' для соответствия изображению. – Michal

Спасибо @Michal, обновленный ответ и jsFiddle. – htxryan

Я понял, что абсолютное положение вместе с 0 для top/bot/left/right уже установило высоту/ширину уже, так что вы можете избавиться от них прямо. – Michal

Demo

Удалить высоту от .contact и применять top: -15px; bottom: -15px;

В качестве альтернативы, лучший способ, установить margin: 0; удаления высоты.

источник

2013-08-25 03:46:14

Отображение текста при наведении курсора на изображение Ссылка

ответ

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