skoster7 skoster7 - 3 months ago 9
CSS Question

Using nth child to select one particular sibling

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

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>