Jump to content

How to put a color on an image


Recommended Posts


<figure class="figure-about"><img src="../sites/default/files/imgs/Sky-Blue-House.jpg" alt="houses image"><figcaption class="figure-caption">For Sale. <a href="../contact_us" title="Contact us">Contact us</a> today!<br></figcaption></figure>

How can I put a specific color on top of the image?


Link to comment
Share on other sites

Using :before or :after for figure elements then content:"";

	figure{ position: relative;
	figure:after {content:""; position:absolute; top:0; left:0; bottom:0; right:0;background: red; opacity: .5; z-index: 10;}

If you only want to have colour over img tag, wrap img tag with element such as span and target that element instead (figure > span ).

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...