VPF::Отобразить картинку поверх другой

oli

Дата 23.11.2012, 18:55 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 15
Регистрация: 8.5.2008

Репутация: нет
Всего: нет

Доброго! На странице имеются контейнеры с img, по наведению на img, нужно отобразить поверх блок span с фоновой полупрозрачной картинкой
Вот что делаю:

Код


<span class="folio-thumb"> 
                            <a class="nnn" href="/cars/view/8" title="Chevrolet Aveo 1.4"></a> 
                            <a class="folio-overlay" href="/cars/view/8" title="Chevrolet Aveo 1.4"> 
                                 
     
         
     </a><a href="http://holidaycars.md/cars/view/8"><img height="240" class="attachment-folio-1-col wp-post-image" src="/public/images/cars/dsc0326_43067_b1.jpg"></a>                               
         
                                             
                                    <span class="more-hover"></span> 
                                 
                        </span>


CSS:

.one-col .folio-wrap .folio-thumb { 
position: relative; 
overflow: hidden; 
display: block; 
width: 331px; 
height: 240px; 
background-color: #fff; 
} 

.more-hover { 
width: 331px; 
height: 240px; 
display: none; 
position: absolute; 
} 


.folio-thumb:hover>.more-hover { 
background: url(../images/hatch-dark.png); 
opacity: 0.5; 
display: block; 

}

Но результата 0

skyboy

Дата 23.11.2012, 20:27 (ссылка)

(нет голосов)

Загрузка ...

неОпытный

Профиль
Группа: Модератор
Сообщений: 9820
Регистрация: 18.5.2006
Где: Днепропетровск

Репутация: 6
Всего: 260

во-первых, без display: block элемент folio-thumb совсем не растягивается за содержимым.
во-вторых, more-hover уходит под остальные элементы и .folio-thumb со своим overflow: hidden; его режет. надо добавить left: 0; top: 0; к .more-hover
в-последних, примеру проблемы на форуме желательно быть рабочим. чтоб не надо было за тебя удалять несуществующие селекторы(.one-col .folio-wrap)

Arantir

Дата 23.11.2012, 20:30 (ссылка)

(нет голосов)

Загрузка ...

Рыбак без удочки

Профиль
Группа: Участник
Сообщений: 960
Регистрация: 18.11.2012

Репутация: 5
Всего: 55

Код


.folio-thumb:hover>.more-hover { 
background: url(../images/hatch-dark.png); 
opacity: 0.5; 
display: block; 
}

У вас блок имеет размеры 0х0...
При установке фона в пустой блок нужно явно задавать размеры (не обязательно по размеру фона), так как сам по себе фон никогда не изменяет размер блока.

Это сообщение отредактировал(а) Arantir - 23.11.2012, 20:31

--------------------

interface Жопа {
// ATTENTION: has to be implemented by every class of the project for proper project work
}

oli

Дата 23.11.2012, 20:40 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 15
Регистрация: 8.5.2008

Репутация: нет
Всего: нет

left: 0; top: 0 добавить к чему?

Добавлено через 5 минут и 18 секунд
Для блока выставил ширину и высоту - не помогло

oli

Дата 23.11.2012, 21:05 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 15
Регистрация: 8.5.2008

Репутация: нет
Всего: нет

Спасибо огромное - помогло надо добавить left: 0; top: 0; к .more-hover

Arantir

Дата 23.11.2012, 21:22 (ссылка)

(нет голосов)

Загрузка ...

Рыбак без удочки

Профиль
Группа: Участник
Сообщений: 960
Регистрация: 18.11.2012

Репутация: 5
Всего: 55

Но без размеров бы не сработало =)

--------------------

interface Жопа {
// ATTENTION: has to be implemented by every class of the project for proper project work
}

skyboy

Дата 23.11.2012, 22:16 (ссылка)

(нет голосов)

Загрузка ...

неОпытный

Профиль
Группа: Модератор
Сообщений: 9820
Регистрация: 18.5.2006
Где: Днепропетровск

Репутация: 6
Всего: 260

Цитата(Arantir @ 23.11.2012, 19:30

)

У вас блок имеет размеры 0х0...

там чуть выше было правило без ":hover" с размерами

Arantir

Дата 23.11.2012, 22:24 (ссылка)

(нет голосов)

Загрузка ...

Рыбак без удочки

Профиль
Группа: Участник
Сообщений: 960
Регистрация: 18.11.2012

Репутация: 5
Всего: 55

Да, точно. Затупил =)

--------------------

interface Жопа {
// ATTENTION: has to be implemented by every class of the project for proper project work
}

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »