CODEWITHSUNDEEP
jquerycss
codecraig
codecraig

Reputation: 3158

CSS - Target background image in DIV

I'd like to target the background-image of a DIV so that I can apply a 'glow' style to it when the DIV is hovered over.

see this fiddle for an exmaple of what my current setup is and how I'm attempting to do it now (albeit, targeting the div and not the image in the div).

Is this possible? If so, how :) ..if not, how might I change my HTML/CSS to give the same visual effect you see in the fiddle but allow the image to have the 'glow' apply to it?

Thanks in advance.

Upvotes: 0

Views: 3909

Answers (1)

BoltClock
BoltClock

Reputation: 723538

A background image is binary data. You can't manipulate its contents using CSS.

The only way is to, on hover, switch the image to another file that has the glow around the arrow graphic:

.collapsible {
    background-image: url('/arrow_mini_up.png');
    background-repeat: no-repeat;
    background-position: right;
}

.collapsible:hover {
    background-image: url('/arrow_mini_up_glow.png');
}

Even if you use a data URI, it's the same thing: you need to specify one background image for the default state and another for the hover state:

.collapsible {
    background-image: url('data:image/png;base64,A0Giftt6...');
    background-repeat: no-repeat;
    background-position: right;
}

.collapsible:hover {
    background-image: url('data:image/png;base64,n4x71Al4...');
}

Upvotes: 5

Related Questions