Change opacity of parent only

Question

Please note this is not a repeat question, i have looked into all possible questions in stackoverflow and i did not get an answer.

I am looking at the website http://riviera-black.cmsmasters.net/ and in this especially the section where it says "Recent Projects". When i hover over the image only the background <article> element changes in opacity but not the <figure> element inside. How is this done?

Please note i tried changing the opacity using jQuery for me it changes the opacity of all elements inside, for example in this case it changes opacity of <article> and <figure> element.

You can't change the opacity of only the parent, it really can't be done, the only thing you could do is use RGBA colors, but the page you're linking to is using CSS3 and multiple elements, there is no jQuery animation of opacity ? — adeneo, Jan 08 '14 at 18:28
I am not saying they done it using jquery or anything else. I am asking how have they done it. I used jquery but in vein. How to else to accomplish what they have done — user1241438, Jan 08 '14 at 18:29
You can easily view the page with any browsers debugging-tools and figure it out. — fragmentedreality, Jan 08 '14 at 18:30
Well i did using chrome debugger, but i can only view html source which does not indicate anything related to this animation effect. Also firebug does not tell you exactly which javascript method is called — user1241438, Jan 08 '14 at 18:32
This subject has been answered before: http://stackoverflow.com/questions/10879045/how-to-set-opacity-in-parent-div-and-not-effect-in-child-div — LcSalazar, Jan 08 '14 at 18:35
There is a difference between what i am asking and what is given in http://stackoverflow.com/questions/10879045/how-to-set-opacity-in-parent-div-and-not-effect-in-child-div. I am asking about hover effect and what is given in this url is static — user1241438, Jan 08 '14 at 18:41
@adeneo your answer worked perfectly, i can mark your answer correct if you answered for this question. But one question, all you are doing here is change rgba on hover. But i was doing the same thing using onmouseover and animating it using $(thisobj).css('background-color', '#dfdfdf'); $(thisobj).stop().animate({opacity: 0.4}, 500 ); i dont know why this will not work — user1241438, Jan 08 '14 at 18:50
I didn't change the opacity, only the background color, and as I'm using RGBA, the last one is the alpha channel, and that can't be easily animated with jQuery (would require a step function), so I just used CSS3 animations. I'll post an answer. — adeneo, Jan 08 '14 at 18:57

score 1 · Answer 1 · answered Jan 08 '14 at 18:31

They change opacity not in <article> element. They change pseudo element :before that IN <article> with CSS:

content: '';
background-color: rgba(0, 0, 0, 0);
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
opacity: .15;

that mean, that element places full width and height of parent <article> but not contains <article> children. :before and <figure> are in parallel.

score 1 · Accepted Answer · answered Jan 08 '14 at 18:59

There are many ways to do this, perhaps the easiest is to use a wrapper element around the image with a padding, and then animate the background with CSS3 on :hover

<div class="image">
    <img src="http://phaseoneimageprofessor.files.wordpress.com/2013/07/iqpw29_main_image_.jpg"/>
</div>

css

.image {
    padding: 50px; 
    position: relative; 
    top: 100px; 
    left: 100px; 
    height: 200px; 
    width: 300px;
    -webkit-transition: background 1s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.image:hover {
    background: rgba(255,255,255,0.4);
}

.image img {
    height: 200px; 
    width: 300px;
}

FIDDLE

score 0 · Answer 3 · answered Jan 08 '14 at 18:53

They used a combination of the :before and :hover pseudo selectors. When someone hovers on the child element, the :before pseudo element's opacity is modified.

Example

HTML

<div class="parent">
    <div class="child">Hover me!</div>
</div>

CSS

.parent { position: relative; }
.child:before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: black;
    opacity: .15;
}
.child:hover:before { opacity: .5; }

Working example

Change opacity of parent only

3 Answers3

Example