Rachelle Rachelle - 1 year ago 49
CSS Question

Change image to black and white when hovering a another element inside it

I've been looking for this and I just couldn't find the correct working CSS / jQuery for this.

I'm trying to change my image to black and white when I'm hovering it. So far so good. But once I place content on top of that image and hover it it just goes back to its normal color

<div class="uk-float-left uk-width-1-4 project-container">
<img width="300" height="288" src="project1.jpg" class="attachment-post-thumbnail wp-post-image" alt="project1">
<div class="hidden-content project-content">
<div class="project-button center-absolute">

<div class="project-name">
<?php echo get_the_title( $post_id ); ?>

What I've tried

.project-content:hover > .project-container img {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: url(grayscale.svg); /* Firefox 4+ */
filter: gray; /* IE 6-9 */;}

I hope you guys can help me out here.

Answer Source

The > selector will only select the immediate child of the element, and in this case there is no .project-container img inside .project-content.

There is no backwards selection method in CSS at the moment so you will have to either base your transition on .project-container:hover > img or use javascript to select the parent on hover.