Не нравятся результаты поиска? Попробуйте другой поиск!

Помогите с hover свойством


     09.04.2013    Общие вопросы по вёрстке, Стили (CSS)    1667

вопрос
Здравствуйте!

Есть блок новостей.
Нужно, чтобы поверх каждого изображения в блоке накладывалась допустим кнопка PLAY серого цвета, а при наведении на изображение становилась PLAY черного цвета. Тем самым сама картинка новости никак не изменялась, ну или только немного затемнялась при наведении.

Для осуществление есть два исходника
PLAY-BLACK.PNG и PLAY-SER.PNG.

Прошу помочь сделать через CSS3. Кнопки плэй выводить желательно через background в стилях

Ответа пока нет


Комментарии пользователей (2)

Sander
1126

1638 | 1204

Sander - 9 апреля 2013 14:05 - Эксперт

css3 действительно поддерживает многоуровневые background-ы. Но ведь далеко не все браузеры поддерживают css3.

SanDev.pro - мой блог.

ICQ: 404-037-556
Skype: Sander8804

KaSeo
2

20 | 15

KaSeo - 9 апреля 2013 19:30 - Юзер

Я делал похожий прием в одном из проектов - пример можно посмотреть тут

Такую кнопку лучше делать спрайтами (увеличивается скорость загрузки страницы)

Примерный HTML:
<div class="block_with_image"><img src="poster.jpg" alt=""/><a href="#" class="button_play">PLAY</a></div>


CSS:
.block_with_image {
position:relative;
}
.block_with_image img {
width:80px;
height:100px;
}
.block_with_image a.button_play {
position:relative;
display:block; /*задаем отображать данный элемент как блок, чтобы ничего не ехало и было всё четко*/
width:30px; /* задаем размеры кнопки (картинки)*/
height:20px;
margin-top:-60px; /*поднимаем кнопку в верх изображения высота картинки - высота кнопки = высота подъема*/
background:url(../images/PLAY-SER.PNG) no-repeat;
}
.block_with_image a.button_play:hover {
background:url(../images/PLAY-BLACK.PNG) no-repeat;
}

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы