Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by sakatagintoki
sakatagintoki
12,624 Points

How to tint images in CSS (Bootstrap)?

Trying to tint some images for a simple gallery. None of the solutions I've looked up on the interwebs seem to work and they differ greatly. I've tried wrapping the images in divs, setting the background-color to a transparent rgba value, setting the z-index to 1 so it appears over the images, and various other things. 

    <div class="container obligatorygallery">
        <div class="row ">
            <div class="col-xs-6">
                <img class="img-responsive" src="img/laptop.jpg">
                <img  class="img-responsive" src="img/edgy.jpg">
            </div>
            <div class="col-xs-6">
                <img  class="img-responsive" src="img/bike.jpg">
                <img  class="img-responsive" src="img/desk.jpg">
            </div>
        </div>  
    </div>

3 Answers

Guil Hernandez
Guil Hernandez
Treehouse Teacher
Guil Hernandez
Guil Hernandez
Treehouse Teacher

Yep, CSS blend modes are pretty awesome. In fact, I'm releasing a short workshop on them tomorrow, so stay tuned! :)

Erik McClintock
Erik McClintock
45,783 Points
Erik McClintock
Erik McClintock
45,783 Points

Jay,

Have you tried using a ::before pseudo-element with a semi-transparent RGBA background-color?

Erik

Erik McClintock
Erik McClintock
45,783 Points
Erik McClintock
Erik McClintock
45,783 Points

Set the ::before pseudo-element on the container elements of the images.

See this pen for an example.

Erik

Erik McClintock
Erik McClintock
45,783 Points
Erik McClintock
Erik McClintock
45,783 Points

Jay,

If you set your images to have max-width: 100%; they should fit to your container and you should be set. Check the pen again for an update.

You can also set your images to be the background-image of your divs, if you would like, and set your background-size property to cover.

Just make sure you're retaining image proportions!

Erik

Erik McClintock
Erik McClintock
45,783 Points
Erik McClintock
Erik McClintock
45,783 Points

Jay,

At the moment, you've got multiple images in one container, which could cause conflicts, and you also may have containers that are larger than your images. I should clarify: max-width: 100%; will make your images scale down with their container if the container is smaller than the images themselves. When the container is larger, it doesn't do anything.

If you want to blow your images up to fit the size of a parent container that is larger (keep in mind that this will lose resolution, though, so it's not ideal), you can set them to be the background-image of their container, with a background-repeat of no-repeat and again the background-size of cover.

As far as Bootstrap causing issues specifically, I'm couldn't say for certain. There could possibly be conflicting styles or things being overridden, but more likely it's just how things are structured in your HTML at the moment. I'm also not sure what the "col-xs-6" class is applying as far as styles are concerned (though I know it's setting a certain number of columns for you), but you could wrap each image individually in its own containing element within a single parent wrapper, like so:

<div class="row ">
        <div class="col-xs-6">
            <div class="img-container">
                <img class="img-responsive" src="img/laptop.jpg">
            </div>
            <div class="img-container">
                <img class="img-responsive" src="img/edgy.jpg">
            </div>
        </div>
</div>

And apply your ::before styles to the .img-container elements.

Without being able to dig into the code it's difficult to say what exactly is causing conflicts here, though.

Erik

Flamur Beqiri
Flamur Beqiri
6,908 Points
Flamur Beqiri
Flamur Beqiri
6,908 Points

Add this class to your Divs or img tags, it should work

.tint:before { content: ""; display: block; position: absolute; background: rgba(0,255,255, 0.5); } .tint:hover:before { background: none; }