- [Chris] Hi, this is Chris Converse
and in this episode we'll blur an image with CSS.
This will give us the ability to adjust the design
for readability without the need to alter the original image
in a graphics application.
So if you'd like to follow along
download the Exercise Files
and we'll begin by opening the HTML file in a text editor.
Now once you have the HTML file open in a text editor
you'll see up in the head area we have a link
to a file called style.css,
we'll be opening this in a moment.
And if you open this in a web browser
you'll see the beginnings of our layout.
Now the first thing we need to do is add the image
into the HTML, so we can style it with CSS
and add our blur effect.
And I want the image to be behind our main element here.
So after the body element before the main element
let's come in here and add our image.
So we'll type image space,
we'll set the source equal to,
let's go into the images directory
and choose background.jpg,
then we'll end the image tag.
And now when we apply the blur effect in CSS
we'll be able to see the blurring on the edges,
and this isn't very attractive.
So what we're going to do is put this image
in another container in a div element,
so we can actually scale this up a little bit
and crop out the edges,
so we don't see the blurring effect on the edges.
So I'm going to Tab in the image element,
and then before the image element
let's add a div element, then a space,
let's add a class on this called background_image,
then we'll end the div element,
and then after the image element
let's come in here and end the div.
So again, this container is going to allow us
to crop out the edges of the blurring.
So with this in place save your HTML.
Let's go back to our Exercise Files,
let's find styles.css, let's open this up,
let's scroll down to the bottom of the CSS file
after the main selector rule here.
And let's start by targeting the background class.
So we'll type .background_image, then a space,
put in our brackets, let's split this open,
and then first property we're going to set
is going to be position.
We're going to set this to absolute.
Next line, let's set a left property of 0 pixels.
Next we'll set a bottom property,
we're going to set this to 0 pixels.
Next we'll set a width, we're going to set this to 100%.
Next line, we'll set a height to 100% as well.
And then finally, we'll set an overflow property of hidden.
So again, this is the container that's holding the image,
so anything that goes outside of this container
from that image will be hidden from the browser.
And this means we won't get horizontal or vertical scrolling
by making the image a little bit larger.
So now after we create this rule
let's come down here, let's add another rule,
and let's target the image inside of the background class.
So background_image, space, img,
targeting the image inside.
Let's come in here and set a width property to 100%,
and then on the next line let's add a filter property
where we can set our blur.
So we'll type filter: space,
then the word blur, (), then a ;,
and then inside of the parentheses
we'll set a blur of 7 pixels, so we'll type 7px.
And now with these CSS rules in place
if you save your CSS and go back to the browser
and hit reload we'll now see the image
is being blurred and positioned.
Now the blurring effect I was talking about on the edges
can be seen over here on the sides,
so we want to crop this out.
So what we're going to do is make the image a little bit larger
and position the image inside of its container.
So back to our CSS, I'll scroll up here a little bit,
let's come in here and change some of the properties.
So for the width let's change this to 110%,
so it will be 10% larger than the container,
which is defined up here.
Then after the blur property
let's come in here and add a few additional properties.
Let's start with the position value,
let's set this to absolute.
On the next line we're going to set a left property,
and for the left property
we're going to set this to negative 5%.
Since we're increasing the overall width by 10%
I want the left side to be 5%,
which is half of the 10% larger size,
to be cropped off to the left.
And then let's come in here and set a bottom property
to negative 5% as well.
And then finally we'll come in here and set a opacity to .8.
With those in place save your CSS,
go back to the browser,
we'll now see that our image
is 10% larger than the container,
it touches all four sides,
and we don't see that effect of the blurring
happening on the edges.
And so using the filter and opacity properties
we're able to modify the appearance
of an image using only CSS.
And so with that I'll conclude this episode.
And as always, thanks for watching.