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

Гость 09.04.2013 hover, css Общие вопросы по вёрстке, Стили (CSS) 3362

вопрос

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

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

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

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

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

2 комментария

PHP-developer

1783

Sander - 2013-04-099 апреля 2013 14:05 - #12823

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

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

Telegram: @sandev
Skype: Sander8804

Юзер

KaSeo - 2013-04-099 апреля 2013 19:30 - #12835

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

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

Примерный 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;
}

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

Последние события

Darkzone | Выбор категории для доп. поля? ⁴

Darkzone
Выбор категории для доп. поля?
Вчера, 17:08

Разъясните как вытащить id?
lutskboy | Вытащить все данные из определенного доп ... ¹

lutskboy
Вытащить все данные из определенного доп поля?
Вчера, 16:17

в adminer можно.

lutskboy | Выбор категории для доп. поля? ⁴

lutskboy
Выбор категории для доп. поля?
Вчера, 16:14

выбрать все кроме такого нет. можно с бд достать все ид через запятую и вставить в xfields.txt
js скрипт можно написать


<script>
    window.addEventListener('load', ()=> {
        $('#category').on('change', function() {
            var value = $(this).val();
            if ($.isArray(value)) {
            	ShowOrHideEx("xfield_holder_year", jQuery.inArray('1', value) != -1 || jQuery.inArray('2', value) != -1 );
            } else {
            	ShowOrHideEx("xfield_holder_year", value == 1 || value==2);
            }
        })
    });
</script>
year доп поле . 1 и 2 катег

Darkzone | Выбор категории для доп. поля? ⁴

Darkzone
Выбор категории для доп. поля?
Вчера, 14:39

Смотрите, Нужно чтоб обязательное к заполнению доп. поле при добавлении новости, выводилось во всех категориях, кроме двух. Так как количество категорий довольно большое, есть ли способ, не тыкать каждую категорию в которой будет отображаться доп.поле. Надеюсь я смог разъяснить.
lutskboy | Выбор категории для доп. поля? ⁴

lutskboy
Выбор категории для доп. поля?
Вчера, 13:52

где выводить? админка или сайт
TeraMoune | Как отключить миниатюры стандартной гале ...
TeraMoune
Как отключить миниатюры стандартной галереи Fancybox?
21-11-2024, 06:00
В файле engine/classes/fancybox/fancybox.js искать нужную инициализацию и добавлять соответствующие параметры, весь список параметров и их описание можно найти на этой странице https://fancyapps.com/fancybox/api/options/

Например: параметр Thumbs: false отключает миниатюры.
```
Fancybox.bind("[data-highslide]", {
	groupAttr: 'data-highslide',
	idle:2000,
	Thumbs: false,
	caption: (fancybox, slide) => {
		if(  slide.thumbEl && slide.thumbEl.alt ) {
			return slide.thumbEl.alt
		}
	}
});
```
derebas | Как реализовать шифрование трафика? ³

derebas
Как реализовать шифрование трафика?
18-11-2024, 16:52

Ну в теории, можно использовать src на site.com разместить прокси на site2.com а выдавать видео с site3.com, при этом прямой доступ на site3.com закрыть, отдача будет только если запрос с site2.com, таким образом палится только site2.com, НО источник потокового видео, все равно можно увидеть если захотеть, а ссылки, ну купить домен dsac-43efew-csdds.uz как пример
Gordi | Перенёс сайт - не работают кнопки, не от ... ⁸

Gordi
Перенёс сайт - не работают кнопки, не отображаются новости. Как вылечить?
18-11-2024, 14:46

я уже делал. Пользователь 1000 (это я так понимаю root) и chmod 777
Так и было...
lutskboy | Перенёс сайт - не работают кнопки, не от ... ⁸

lutskboy
Перенёс сайт - не работают кнопки, не отображаются новости. Как вылечить?
18-11-2024, 14:39

чтоб не удалять выстави права и пользователя какие там идут на файлы. .
Gordi | Перенёс сайт - не работают кнопки, не от ... ⁸

Gordi
Перенёс сайт - не работают кнопки, не отображаются новости. Как вылечить?
18-11-2024, 14:37

т.е. мне снести всё, что я уже загрузил как root, зайти под юзером и закачать снова?
Видосы в директории upload можно хоть оставить? их там 80 Гб

наверх