A little 400px problem
I've recently migrated content from my old Tumblr blog. Migrating the text content was painless, but the real problem was being left with images that had been automatically resized to 400px in width, without easy access to the originals.
What's a web designer suppose to-do with 400 pixels I hear you say.
Making the most of what you have
TV programmes that feature user submitted content filmed at strange aspect ratios, center the original content on screen, whilst blurring and scaling another version in the background to fill any remaining space.
With this idea in mind, I set out to replicate this effect for my old travel notes.
<div class="c-block c-block--smallimage">
<div style="background-image: url(https://example.com/img/[email protected]);"></div>
<figure>
<picture>
<img src="https://example.com/img/[email protected]" srcset="https://example.com/img/[email protected] 2x" height="267" width="400" alt="Small image">
</picture>
</figure>
</div>- Line 2: Contains the blurred background. It will be positioned absolute to .c-block--smallimage on Line 1
- Line 3: The figure element will be positioned relative, so it sits on top of the blurred background div
- Line 5: Contains an img element with the original 400px image and a scaled up version for retina devices
.c-block--smallimage {
position: relative;
overflow: hidden;
}
.c-block--smallimage > div {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
filter: blur(10px);
background-size: cover;
background-position: 50%;
}
.c-block--smallimage figure {
position: relative;
}
.c-block--smallimage picture {
text-align: center;
display: block;
line-height: 0;
}
.c-block--smallimage img {
max-width: 100%;
height: auto;
}- Line 1: Overflow hidden helps contain the blur to the box - it keeps all the edges clean and crisp
- Line 2: Filter is used to blur the background. Background-size and background-position are set to cover and center the image within the box
- Line 17: Position relative positions the image on top of the blurred background
- Line 27: Max-width displays the image no larger than the original 400px width, but allows the image to go smaller if required
The end result
You can see more of this technique used in my travel notes.
Read this next
Welcome back
