Benjamin Reid

You’ve got a rad image of a cityscape to chuck on your new site but wait… it’s not looking quite cool enough right? Time for some zing!

Markup

Let’s start out with our quaint little img tag. Simple and elegant.

<img src="new-york.jpg">

It saddens me that you can’t use the before/after pseudo elements with an img, so we have to go and spoil it all by adding a wrapper…

<div class="img-wrap">
  <img src="new-york.jpg">
</div>

OK, so it’s not the end of the world. Using the wrapping div, pseudo elements can now be used in full force.

Styles

The wrapper is positioned relative so that the pseudo element can sit on top of the img and displayed inline-block so that it wraps happily around the img.

.img-wrap {
  position: relative;
  display: inline-block;
}

The img inside (though normally done through a reset) is vertically aligned to the bottom, removing any weird spacing below the img.

.img-wrap img {
  vertical-align: bottom;
}

Finally, the pseudo element is setup to act like normal div above the img but with 100% height added to also cover it up.

.img-wrap::before {
  width: 100%;
  height: 100%;
  content: '';
  display: block;
  position: absolute;
}

Now for the solo. Add this garishly brilliant gradient to the pseudo element, followed by a touch of opacity and we are one step closer to having one hip image of NYC.

.img-wrap::before {
  /* ... */
  background: linear-gradient(to right, #8a01ff 0%, #ff00ae 100%);
  opacity: .6;
}

Result

And here we have it, one rad-tastic CSS gradient image.

Taking it further

We can take this one step further and bring it more inline with say what we could achieve using Photoshop.

This time our HTML is simpler, yet we lack an image definition. There are a few different ways to get around this, but lets run with this for now.

<div class="rad-image"></div>

The CSS gets a slimming too. The key part here is the multiple backgrounds (the .jpg and the gradient) followed by a CSS blend mode.

.rad-image {
  width: 690px;
  height: 487px;
  background-image: url(new-york.jpg), linear-gradient(to right, #8a01ff 0%, #ff00ae 100%);
  background-blend-mode: multiply;
}

This gives us a much stronger outcome and results in some cleaner code. The blend modes can be played with to your hearts content along with the gradient to create that 80s flair.

Don’t get me wrong, blend modes and the 80s were are cool but please use this wisely. You may emptly stare at your screen wondering how to make your images better but this isn’t always the way, 99% of images do the talking for themselves.