[sebis]

Друзья, прошу коллективной помощи в решении такой задачи

есть галерея изображений, вывод такой

<div class="isotope-element obiekty-publ" data-category="obiekty-publ">
<div class="views-field views-field-title">
<span class="field-content">ОБЪЕКТ ПУБЛИЧНЫЙ</span>
</div>
<div class="views-field views-field-field-photo-galerea">
<div class="field-content"><a href="#"><img typeof="foaf:Image" src="galerea/18.jpg" width="240" height="240" alt="" /></a>
</div>
</div>
<div>
<span>Категория </span>
</div>
</div>

Не получается через CSS показать <span class="field-content">ОБЪЕКТ ПУБЛИЧНЫЙ</span> только в качестве hover эффекта при наведении на изображение.

Прошу помощи в решении проблемы. Спасибо откликнувшимся!

[Vlad03]

Не получается через CSS показать <span class="field-content">ОБЪЕКТ ПУБЛИЧНЫЙ</span> только в качестве hover эффекта при наведении на изображение.

Не совсем понятно, что имелось в виду, при каких условиях должен быть виден "<span class="field-content">ОБЪЕКТ ПУБЛИЧНЫЙ</span>". Покажите лучше страницу, можно в личку.

[sebis]

спасибо за отклик, выглядит сейчас так


Хочу див с надписью спрятать и показывать название объекта только при наведении на него курсором
Спасибо!

[Ems]

Одной разметки мало. Давайте CSS. Откуда нам знать, чего там в CSS творится.

[Alex_RD]

Как-то так:

Код:

div.isotope-element span.field-content{visibility: hidden}
div.isotope-element:hover span.field-content{visibility: visible}

добавляем в конец файла стилей.

[DWIM]

что бы текст появлялся при наведении на картинку - нужно переместить блок с названием под ссылку
<div class="isotope-element obiekty-publ" data-category="obiekty-publ">
<div class="views-field views-field-field-photo-galerea">
<div class="field-content">
<a href="#">
<div class="views-field views-field-title">
<span class="field-content">ОБЪЕКТ ПУБЛИЧНЫЙ</span>
</div>
<img typeof="foaf:Image" src="galerea/18.jpg" width="240" height="240" alt="" />
</a>
</div>
</div>
<div>
<span>Категория </span>
</div>
</div>

дальше в стилях спрятать название, задать абсолютное позиционирование, что бы картинка не дергалась)
.views-field-title
{
display:none;
position:absolute;
top:10px;
}
.field-content a:hover .views-field-title
{
display:block;
}

[sebis]

сейчас стили базовые, что по дефолту дает модуль друпаловский:

PHP код:


.isotope-element {
    background: #bebebe none repeat scroll 0 0;
    color: #fff;
    float: left;
    height: 240px;
    margin: 10px;
    overflow: hidden;
    width: 240px;
}
.isotope-item {
    z-index: 2;
} 


[DWIM]

можно и без перемещений, только стилями:
.views-field-title
{
display:none;
position:absolute;
top:10px;
}
div.isotope-element:hover .views-field-title
{
display:block;
}

[sebis]

Спасибо всем ответившим!

[Denis Creative]

Посмотрите здесь http://denis-creative.com/vypadayusc...lskij-element/