Using nth child to select one particular sibling - html

Question

I am hosting three images from Google on my codepen demo.
I have built image overlays which add a semi-transparent overlay when a user hovers over them.
They're working fine, but due to the colour of the last one, it looks much darker when hovered over than the other two.
I wondered whether there was a way to select the last image using the nth child (or similar) selector so that I could style that with a lower opacity irrespective of the other two, which I want to keep the same.
Here's the codepen link - http://codepen.io/skoster7/pen/ozgjmP?editors=1100
Like I said, I would like the last image to have a lower opacity then the other two, ideally using the nth-child selector or something similar.
I know I could just use a separate overlay with a different class name, but wanted to know if this was possible before doing that.
.flexcontainer {
display: flex;
}
.spr,
.wint,
.aut {
width: 300px;
height: 200px;
margin: 5px;
}
.overlay {
transition: .5s;
position: absolute;
margin: 12.5px 0 0 5px;
top: 0;
width: 300px;
height: 200px;
background: black;
opacity: 0;
}
.overlay:hover {
transition-delay: .2s;
transition-duration: 1s;
opacity: .6;
}
.overlay p {
font-size: 2em;
color: white;
font-family: verdana;
text-align: center;
}
.photocontainer:last-child .overlay:hover {
rgba(20, 5, 5, 0.35);
text-
}
<div class="flexcontainer">
<div class="photocontainer">
<img class="spr" src="http://www.thehealthyveggie.com/wp-content/uploads/2016/03/spring-daffodils_2845661b.jpg">
<div class="overlay">
<p>Spring is here</p>
</div>
</div>
<div class="photocontainer">
<img class="wint" src="http://www.outsideonline.com/sites/default/files/styles/full-page/public/winter-bucket-list-2015-igloos_h.jpg?itok=RbGFkDiq">
<div class="overlay">
<p>Winter is here</p>
</div>
</div>
<div class="photocontainer">
<img class="aut" src="http://www.idealmagazine.co.uk/wp-content/uploads/2013/10/Autumn-10.jpg">
<div class="overlay">
<p>Autumn is here</p>
</div>
</div>
</div>

Answer 1

This is how you could target each one of them using nth-child, we are targeting parent element i.e. .photocontainer as they are of same class name in all three images.
.photocontainer:nth-child(1) > .overlay:hover {
opacity: 0.4;
}
.photocontainer:nth-child(2) > .overlay:hover {
opacity: 0.6;
}
.photocontainer:nth-child(3) > .overlay:hover {
opacity: 1;
}
.flexcontainer {
display: flex;
}
.spr,
.wint,
.aut {
width: 300px;
height: 200px;
margin: 5px;
}
.overlay {
transition: .5s;
position: absolute;
margin: 12.5px 0 0 5px;
top: 0;
width: 300px;
height: 200px;
background: black;
opacity: 0;
}
.overlay:hover {
transition-delay: .2s;
transition-duration: 1s;
}
.overlay p {
font-size: 2em;
color: white;
font-family: verdana;
text-align: center;
}
.photocontainer:nth-child(1) > .overlay:hover {
opacity: 0.4;
}
.photocontainer:nth-child(2) > .overlay:hover {
opacity: 0.6;
}
.photocontainer:nth-child(3) > .overlay:hover {
opacity: 1;
}
<div class="flexcontainer">
<div class="photocontainer"> <img class="spr" src="http://www.thehealthyveggie.com/wp-content/uploads/2016/03/spring-daffodils_2845661b.jpg">
<div class="overlay"><p>Spring is here</p>
</div>
</div>
<div class="photocontainer"> <img class="wint" src="http://www.outsideonline.com/sites/default/files/styles/full-page/public/winter-bucket-list-2015-igloos_h.jpg?itok=RbGFkDiq">
<div class="overlay"> <p>Winter is here</p>
</div>
</div>
<div class="photocontainer"><img class="aut" src="http://www.idealmagazine.co.uk/wp-content/uploads/2013/10/Autumn-10.jpg">
<div class="overlay"><p>Autumn is here</p>
</div>
</div>
</div>

Answer 2

UPDATED
The issue of text opacity lowering and last child opacity control both has been fixed
Working example at CODEPEN
HTML:
<div class="flexcontainer">
<div class="photocontainer"> <img class="spr" src="http://www.thehealthyveggie.com/wp-content/uploads/2016/03/spring-daffodils_2845661b.jpg">
<div class="overlay"></div>
<p>Spring is here</p>
</div>
<div class="photocontainer"> <img class="wint" src="http://www.outsideonline.com/sites/default/files/styles/full-page/public/winter-bucket-list-2015-igloos_h.jpg?itok=RbGFkDiq">
<div class="overlay"></div>
<p>Winter is here</p>
</div>
<div class="photocontainer"><img class="aut" src="http://www.idealmagazine.co.uk/wp-content/uploads/2013/10/Autumn-10.jpg">
<div class="overlay"></div>
<p>Autumn is here</p>
</div>
</div>
CSS:
.flexcontainer {
display: flex;
}
.photocontainer,
.spr,
.wint,
.aut {
width: 300px;
height: 200px;
margin: 5px;
position: relative;
}
.overlay {
transition: .5s;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 300px;
height: 200px;
background: black;
opacity: 0;
margin: 5px;
}
.photocontainer p {
position: absolute;
font-size: 2em;
color: white;
font-family: verdana;
text-align: center;
top: 20px;
left: 0;
right: 0;
bottom: 0;
margin: 5px;
z-index: 1;
transition: .5s;
opacity: 0;
}
.photocontainer:hover .overlay {
transition-delay: .2s;
transition-duration: 1s;
opacity: 0.6;
}
.photocontainer:hover p {
transition-delay: .2s;
transition-duration: 1s;
opacity: 1;
}
.photocontainer:hover:last-child .overlay {
opacity: 0.3;
}
Old:
.photocontainer:last-child .overlay:hover {
opacity: 0.4;
}
I hope now your both issue has been resolved.
Enjoy :)

Answer 3

Here's how you target it. The opacity value is just for example.
.photocontainer:last-child .overlay:hover {
opacity: .3;
}
revised codepen
The :last-child pseudo-class targets the last sibling of the same parent.
In your HTML, the third image is contained in the last .photocontainer div.
Once the focus is on the third container, you can use a descendant selector to target the image.
Also, keep in mind that the opacity property applies not only to the targeted element, but to all of the element's descendants, as well.
So when you reduce the opacity of .overlay, the text inside will also fade away.
The solution is to use the rgba() color method. The a stands for alpha channel, and allows you to apply transparency only to the color.
Add this to your code:
.photocontainer:last-child .overlay:hover {
background-color: rgba(0, 0, 0, 0.5);
}
revised codepen illustrating both methods
(If you're applying opacity to an image, that's another ball game. You can find lots of posts on this site on that topic.)
References:
https://www.w3.org/TR/css3-selectors/#selectors
https://developer.mozilla.org/en-US/docs/Web/CSS/opacity