2

I have a div that has a background image that is added to it with jquery as an inline style.

<div class="flex_cell" style="background-image: url(img/image.jpg);">

What I need to do is add another background image, on top of the existing background image, when the div is hovered. The new background image will be a red tinted 50% opaque png.

div.flex_cell:hover { background-image: url(img/overlay.png); }

How can I accomplish this?

3 Answers 3

1

you could add a pseudo element on hover using :after which will contain the overlay png, and if you need to tint the png red using css you can apply a filter and shift its hue:

.flex_cell{
    position:relative;
    display:block;
    width:500px;
    height:500px;
}
.flex_cell:hover:after{
    content:'';
    position:absolute;
    display:block;
    width:500px;
    height:500px;
    background: url(http://www.granini.com/data/images/fruit_images/full/banana.png) !important;
    opacity:0.7;
	filter: hue-rotate(310deg);
	-moz-filter: hue-rotate(310deg);
	-webkit-filter: hue-rotate(310deg);
}
<div class="flex_cell" style="background-image: url(http://foodmatters.tv/images/bananas.jpg);">

0

In css, an inline styles will be higher up the cascade than attached styles. You simply need to mark your hover override as !important in order for it to take precedence over your inline style.

div.flex_cell:hover {
  background-image: url(img/image.jpg) !important;
}

example: http://codepen.io/anon/pen/bNRNLy

Alternatively, unless necessary it's better practice to avoid inline.

0

Add only css remove the inline style.. It has hogj sprvificity.

Div.flex_cell {
background-image: url(img/image.png);
}
Div.flex_cell:hover {
background-image: url(img/overlay.png);
}

Replace this:

<div class="flex_cell" style="background-image: url(img/image.jpg);">

With

<div class="flex_cell" >

Edit:

If you cant remove inline style add !important

Div.flex_cell:hover {
background-image: url(img/overlay.png) !important;
}
1
  • I can't remove the inline style. It's added by the Wordpress theme I'm using. When you hover over the div, I need to keep that background image, but add a second, opaque background image on top of it.
    – joshdfw
    Jan 22, 2015 at 18:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.