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.
See the Pen uodfa by Benjamin Reid (@nouveller) on CodePen.
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.
See the Pen tsycx by Benjamin Reid (@nouveller) on CodePen.
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.
Comments
comments powered by Disqus