Hover Color Change

JavaScript
1

Hi I am using JQuery to set an images color to change on hover.
But it seems to be affecting the entire div or something. Page.

 $(document).ready(function() {
          $(".office-thumbnail").hover(function() {
              $(this).css("background-color", "rgba(244,81,64,0.3)");  
          });
        });

it seems to leave the border on after I hover the image

How can I just target the image itself without affecting the thumbnail?

2

I’m not sure of the effect you are trying to get.

Isn’t that over complicating it? Why not just use css?

1 Like
3

I tried but it wont work, I tried using rgba…

4

You have to unset the background colour when you leave the div again. This can be done within the same listener in jQuery by adding a second handler like

 $(document).ready(function() {
     $(".office-thumbnail").hover(
         function() {
             $(this).css("background-color", "rgba(244,81,64,0.3)");  
         },
         function() {
             $(this).css("background-color", "unset");
         }
    );
});

Besides, I’d suggest to add a dedicated .hover class instead of hard-coding those CSS changes in JS – it’s cleaner and much more performant.

Edit after x-post:

Haha indeed! Speaking of performance… :-D

5

I did it doesnt work. I tried using

.office-img:hover {
    background-color: rgba(0,0,0,0.5);
}
7

You can’t change the colour of an image like that, but you can use the filter property to do this. If you want to go the background colour route, you have to apply it to the wrapping div like

.office-thumbnail:hover {
    background-color: rgba(0,0,0,0.5);
}

This colours the entire div though, including padding – so if you don’t want that border, remove the padding.

1 Like
8

What function do I use to change color? http://www.w3schools.com/cssref/css3_pr_filter.asp

9

“unset” is not a valid value. You can do “transparent” or “none”.

Filters aren’t universally supported FYI. Check caniuse.com for filter support and see if it’s a good opition for you.

The only way a background color would work on an image is if there is transparency in it (e.g. PNG or SVG) but that image doesn’t look like it would even have room for that.

2 Likes
10

room? it seemed to work though

11

I said background color, would require transparency, not filters.

12

oh ok

13

Ah yes you’re right. Apparently jQuery guessed it correctly when I just tested it. D’oh on me though! ^^

Yes, I provided the link. ;-)

14

An invalid value would still negate out the color set though :slight_smile: . That’s probably what happened.

1 Like
15

Seems like the filter property is still in development of custom() function.

16

You can play with hue-rotate, or brightness to achieve an effect similar to rgba(0,0,0,0.5)… but it’s of course a filter, not simply a plain colour layer over the image. (And yes, it’s experimental.)

17

alright

18

Altering the image opacity over coloured background works.

19

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.