CODEWITHSUNDEEP
cssresponsive-designsasscompass-sass
Beatrice
Beatrice

Reputation: 99

Color overlay a responsive image with Compass?

I don't have control over the HTML that I'm styling, so each img is nested in an li. The li has padding, which cannot be changed to a margin because of a complex responsive grid system. And, yes, since it's responsive, the size of the image might change.
Here's the demo: Play with this gist on SassMeister.

Sass:

.active {
  border: grey solid 4px;
  opacity: .2;
 }

 ul {
  list-style:none;
}

li {
  width: 20%;
  padding: 5%;
  display: inline-block;
 }

img {
  width: 100%;
}

#thumbs {
  width: 100%;
}

HTML: 

<div id="thumbs">
  <ul>
    <li>
      <img class="active" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQvXOVCJkz-VEZjmFxh0dgKUZ5z6Ojg7doS64g8FUmDsdEE-6_R">
    </li>
    <li>
      <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQvXOVCJkz-VEZjmFxh0dgKUZ5z6Ojg7doS64g8FUmDsdEE-6_R">
    </li>
    <li>
      <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQvXOVCJkz-VEZjmFxh0dgKUZ5z6Ojg7doS64g8FUmDsdEE-6_R">
    </li>
  </ul>
</div>

How can I make a color overlay effect on the .active image?

Background color applied to the li parent is messy because of the padding, and I am having trouble figuring out how to create a pseudo element that's the same size as the image.

Edit: I thought maybe I could achieve this with an offset border, see this gist on SassMeister. But I would need to do some math to make the border width and offset exactly half the width (or height) of the image. Can I do that with Sass?

Sass:

.active {
  border: grey solid 4px;
  opacity: .2;
  outline: 160px solid rgba(255,0,0,0.7);
  outline-offset: -160px;
 }


 ul {
  list-style:none;
}

li {
  width: 20%;
  padding: 5%;
  display: inline-block;
 }

img {
  width: 100%;
}

#thumbs {
  width: 100%;
}

HTML:

<div id="thumbs">
  <ul>
    <li>
      <img class="active" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQvXOVCJkz-VEZjmFxh0dgKUZ5z6Ojg7doS64g8FUmDsdEE-6_R">
    </li>
    <li>
      <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQvXOVCJkz-VEZjmFxh0dgKUZ5z6Ojg7doS64g8FUmDsdEE-6_R">
    </li>
    <li>
      <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQvXOVCJkz-VEZjmFxh0dgKUZ5z6Ojg7doS64g8FUmDsdEE-6_R">
    </li>
  </ul>
</div>

Upvotes: 1

Views: 603

Answers (1)

Timmah
Timmah

Reputation: 1335

I got something working, try this on for size. It only works if you can add a class to the <li>.

Unfortunately, CSS doesn't allow any form of parent selection, so you can't say 'give me any <li> containing an <img> with the class <active> :( That's javascript turf

Unless you want to stuff around adding overlays with javascript, why not apply the tint color you want to the parent element <li>, then replace the padding with margins so the colour doesn't stick out, as it's obscured by the image within. Then apply the opacity to the img.active like you have. I think you were on the right track with the first idea.

The only control you really get over opacity is either the element itself or it's background color, as in rgba(red, blue, green, opacity). This means if you apply the BG colour to the image, it will be obscured by this image, and as any changes to transparency effect the whole thing.

Upvotes: 1

Related Questions