Наведите курсор на изображение, затемните только фон

Question

Наведите курсор на изображение, затемните только фон

0

Я хотел бы иметь возможность навести курсор на изображение, и только сам фон станет черным (с непрозрачностью, чтобы контролировать, сколько). У меня уже есть эффект для самого изображения, когда он наводится, но я хотел бы добавить эффект, когда белый фон превратится в более темный цвет. Лучше всего было бы манипулировать им позже с непрозрачностью и переходом, но я не смог найти код css3 или jquery, который работает до сих пор, чтобы довести меня до этой точки. Любая помощь будет оценена по достоинству.

HTML

<div class="template_design2" style="margin-top:100px; margin-left:5px;"></div>

CSS

.template_design2 {
    background-image:url(img/template_design2.jpg); 
    width:740px;
    height:280px;
    background-repeat:no-repeat;
    float:left;
}

.template_design2:hover {
    background-position:0 -280px;   
}

julian 06 май 2014, в 03:35

Источник

0

Можете ли вы положить свой код в jsFiddle ? Загрузите свое изображение или найдите где-нибудь пример изображения, которое иллюстрирует те же принципы, что и ваше изображение (прозрачность и т. Д.)
Ming 06 май 2014, в 01:34
0

juliancelaj.com/designlayout.html Я не знаю, как загрузить сами изображения, но вот моя ссылка на сайт в качестве примера. В основном, когда он перемещается по прямоугольным шаблонам и становится ярче, я бы хотел, чтобы фон (полностью белый) становился темнее.
julian 06 май 2014, в 01:48

Теги:

javascript

jquery

html

css

css3

1 ответ

Ещё вопросы

Можете ли вы положить свой код в jsFiddle ? Загрузите свое изображение или найдите где-нибудь пример изображения, которое иллюстрирует те же принципы, что и ваше изображение (прозрачность и т. Д.)
juliancelaj.com/designlayout.html Я не знаю, как загрузить сами изображения, но вот моя ссылка на сайт в качестве примера. В основном, когда он перемещается по прямоугольным шаблонам и становится ярче, я бы хотел, чтобы фон (полностью белый) становился темнее.

Ming · Answer 1 · 2014-05-06T00-37-00.000Z

Вам нужно добавить класс в <a> который содержит фоновые изображения, чтобы вы могли настроить их.

Вы используете .template_design:hover, поэтому для таргетинга первого (поскольку у него нет класса, но вы можете использовать его идентификатор для проверки его работы быстро, затем назначьте все <a> внутри .template_design класса, чтобы вы могли нацелить их всех на в то же время):

.template_design:hover a#zapzonePoster { opacity: 0.5; }

Здесь скрипка, показывающая, как это работает:

http://jsfiddle.net/v6aNY/

Итак, как только вы знаете, что работаете, вы можете назначить класс, чтобы он был больше похож:

.template_design:hover a.thumbnail { opacity: 0.5; }

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

Здесь та же скрипка, обновленная классом .thumbnail:

http://jsfiddle.net/v6aNY/1/