Show colour overlay on images NOT in selector

Question

I'm trying to amend the jQuery I have right now which currently will display a colour on top of an image which is hovered over.

I instead need it to display the hover-over colour on all OTHER images when one is hovered over. Not to certain on the changes in this particular case.

So out of 6 images, if I mouse over 2, it will display the overlay on 1,3,4,5,6.

HTML:

<div class="wrap">
<img src="http://mirrorchecker.com/images/rod_160.png" width="160" class="company-image" />
<div class="company-image-overlay"></div>
<img src="http://mirrorchecker.com/images/rod_160.png" width="160" class="company-image" />
<div class="company-image-overlay"></div>
<img src="http://mirrorchecker.com/images/rod_160.png" width="160" class="company-image" />
<div class="company-image-overlay"></div>

CSS:

.company-image-overlay {
    width: 160px;
    height: 160px;
    background-color: #ffb00f;
    border-radius: 15px;
    z-index: 1;
    opacity: 0.5;
    position: fixed;
    top: 0.5em;
    display:none;
}

jQuery:

$('.wrap').mouseover(function () {
    $('.company-image-overlay').show();
}).mouseout(function () {
     $('.company-image-overlay').hide();
});

JSFiddle: http://jsfiddle.net/davidThomas/AUzKE/8/

score 1 · Accepted Answer · edited May 23 '17 at 11:49

I've done something very similar to Jacob, where I've changed much of the structure, but I've done it in a much simpler/cleaner/easier way. Check this out:

HTML:

<div>
    <div class="company-image">
        <img src="http://mirrorchecker.com/images/rod_160.png" />
    </div>
    <div class="company-image">
        <img src="http://mirrorchecker.com/images/rod_160.png" />
    </div>
    <div class="company-image">
        <img src="http://mirrorchecker.com/images/rod_160.png" />
    </div>
</div>

CSS:

.company-image {
    width: 160px;
    height: 160px;
    display: inline-block;
}
.company-image > img {
    border-radius: 15px;
}
.company-image:before {
    position: absolute;
    content: '';
    width: 160px;
    height: 160px;
    background: rgba(255, 176, 15, 0.5); /* Adjust this last value to adjust the opacity of the overlay */
    border-radius: 15px;
    visibility: hidden;
}
.company-image.overlay-show:before{
    visibility: visible;
}

jQuery:

$('.company-image').mouseover(function () {
    $(this).siblings('.company-image').addClass('overlay-show');
}).mouseout(function () {
    $(this).siblings('.company-image').removeClass('overlay-show');
});

The use of the :before psudo element comes from this question. It's easier to manipulate classes than the pseudo elements themselves so that's why I used a class to make the overlay show. The jQuery siblings selector takes the .company-image class selector as well to assure that it only gets the other relevant elements. If for some reason you can't put all the images inside a single parent div then you'd have to use $('.company-image').not(this) selector instead, thanks goes to Good Luck.

Here's a Fiddle

Is it possible to have the overlay effect only the img tag itself rather than the div class surrounding it? — wharfdale, Oct 01 '14 at 09:41
[Not using the `:before` tag](http://stackoverflow.com/questions/5843035/does-before-not-work-on-img-elements) but you could try the technique on that link — OneHoopyFrood, Oct 01 '14 at 15:06

David_0106 · Answer 2 · 2014-08-27T15:38:49.163

Okay, so I've modified your JSFiddle.

First of all I've changed the method of tinting. I've wrapped each image in a tint which goes behind the image and is always there, with a bright red background in this case. Tinting the image is then achieved by changing the opacity of the image. Note (in the CSS on the JSFiddle) that I've defined by px the background tint so that you don't get a bit sticking out at the bottom. (There are other ways of doing this, but the px solution was quick).

<div class="wrap">
<div class="background-tint"><img src="http://mirrorchecker.com/images/rod_160.png" width="160" class="company-image" /></div>
</div>

<div class="wrap">
<div class="background-tint"><img src="http://mirrorchecker.com/images/rod_160.png" width="160" class="company-image" /></div>
</div>

<div class="wrap">
<div class="background-tint"><img src="http://mirrorchecker.com/images/rod_160.png" width="160" class="company-image" /></div>
</div>

Then the Jquery is quite simple. On hover you modify the opacity of all images to 0.5, and then change specifically the opacity of the image you're hovering over back to 1.

$('.wrap img').mouseover(function () {
$('.wrap img').css('opacity', '0.5'); 
$(this).css('opacity', '1'); 
}).mouseout(function () {
$('.wrap img').css('opacity', '1'); 
});

JSFiddle: http://jsfiddle.net/AUzKE/713/

score 0 · Answer 3 · answered Aug 27 '14 at 15:28

0

You should use .not(this):

$('.wrap div').mouseover(function () {
    $('.wrap div').not(this).children('.company-image-overlay').show();
})

Fiddle

answered Aug 27 '14 at 15:28

Y.Puzyrenko

2,166
1
15
23

Show colour overlay on images NOT in selector

3 Answers3