Linked Thumbnail Image Tutorial
Length: 18 minutes
This short tutorial will walk you through building a clickable thumbnail link that holds a blurred photo that will sharpen on mouse hover. It introduces new CSS3 concepts such as Flexbox, Filters, and Text-shadow among others. This tutorial assumes you already have a basic knowledge of HTML and CSS. If you do not first take my course on Building Responsive Websites as a primer.
The finished code example for this exercise can be found on CodePen
Instructions
Start out by creating an html link and giving a class of photobox to identify which links we want to behave and style as thumbnail images.
<a href="#" class="photobox"></a>
Notice we just left the href attribute pointing to # as a placeholder. here you would insert the page (or file) you want the thumbnail image to link to. Then inside of the link let's create an image element as well as a level 1 heading for our thumbnail text.
<a href="#" class="photobox">
<img src="" alt="">
<h1></h1>
</a>
Then we'll link the images src attribute to point to a placeholder image online at https://placeimg.com/300/200/nature and fill in the alt attribute with useful search engine text. We will also give the <h1> some generic placholder text Title 1 like so:
<a href="#" class="photobox">
<img src="https://placeimg.com/300/200/nature" alt="nature picture">
<h1>Title 1</h1>
</a>
Next we will open our CSS file and write out a class selector to style out photobox links.
.photobox {
}
Links normally display inline that means side by side and do not have the ability to be given a width or height. Since we want our links to have a specific width we'll set it to display: inline-block and then we can give it a width: 300px and height: 200px setting the width to 300 pixels and the height to 200pixels. these amounts are arbitrary. You could for example change these measurements to suit your needs and even size the width using percents if you wish them to be responsive. Next, we'll set position: relative which will come in handy later on. We'll come back to what this is doing momentarily.
.photobox {
display: inline-block;
width: 300px;
height: 200px;
position: relative;
}
Continuing on, we would like to create a new selector for both img elements as well as h1 elements inside our photobox links. We can accomplish this using a compound selector that uses the , comma symbol to apply CSS declarations to multiple selected elements at once. For each piece of our compound selector we are using descendent selectors indicated with a keyboard space between the class photobox and our desired element within it.
.photobox img, .photobox h1 {
}
We will set both of these elements to position: absolute and top: 0 which will push them both upwards aligning them at the top edge of their relative parent photobox. Whenever you have a parent element set to position: relative it traps any child elements inside of it that are position: absolute. This way top: 0 refers specifically to the top edge of photobox as opposed to the top edge of the browser window.
.photobox img, .photobox h1 {
position: absolute;
top: 0;
}
Additionally we will set both to have a width: 100% and height: 100% so they will occupy all of the space within photobox.
.photobox img, .photobox h1 {
position: absolute;
top: 0;
width: 100%;
height: 100%;
}
Next let's style the image inside of our photobox links to be blurred normally and then sharpen when we hover the mouse over top of them.
.photobox img {
filter: blur(2px);
transition: filter 500ms;
}
.photobox:hover img {
filter: blur(0px);
}
In the code above on line 2 we use the filter property and set it to blur(2px) which blurs it 2 pixels. Then on line 3 we use the transition property and set it to watch for changes on the filter property and adjust any changes over 500ms which means 500 milliseconds.
On line 6 we write a pseudo class selector targeting the mouse :hover state of photobox and using a descendent selector focus on the img element. Then on line 7 we change its filter blur to zero pixels. thus when we hover over photobox the img element inside it (holding our image) will remove the blur making a clear sharp image.
Lastly, we would like to style our heading text inside of our photobox links. We will visit Google Fonts and click to add the font Lato to our collection. Then clicking the drawer at the bottom of the screen that says "1 Family Selected" we will click the tab for the import code and copy the import code @import url('https://fonts.googleapis.com/css?family=Lato'); we only need this piece and can ignore the style tags. then back in our CSS let' spaste this at the top of our file linking our custom Google Font.
@import url('https://fonts.googleapis.com/css?family=Lato');
Now we will write a descendent selector to style our h1 element heading text:
.photobox h1 {
}
We will set the h1 element to display: flex. this allows it to make use of flex-box model properties such as justify-content: center which will center the text horizontally within the photobox and align-items: center which will vertically center the text in the middle of the photobox.
.photobox h1 {
display: flex;
justify-content: center;
align-items: center;
}
Then we will set the text color to white and margin: 0 to remove the default margin around the h1 element. We'll also set text-shadow: 0 5px 10px rgba(0,0,0,1); which gives it a text shadow. Here the first value 0 gives the horizontal offset to zero so the shadow doesn't apear on the sides of the text so much. Then the second value 5px sets the vertical offset so the shadow falls 5 pixels below the text. The third value 10px sets the blur radius or feather amount. this is the amount of pixels the shadow fades across so the higher the numbmer the softer the shadow and the smaller the number the sharper the shadow. the final value of rgba(0,0,0,1) sets the color to black by hitting zero for red, green, and blue values and the 1 for the fourth value is the alpha or transparency amount. Feel free to play around with these values to achieve the shadow color and opacity you desire.
.photobox h1 {
display: flex;
justify-content: center;
align-items: center;
color: white;
margin: 0;
text-shadow: 0 5px 10px rgba(0,0,0,1);
}
then we'll set the text to use our Google Font Lato and change the text size to 1.5em
.photobox h1 {
display: flex;
justify-content: center;
align-items: center;
color: white;
margin: 0;
text-shadow: 0 5px 10px rgba(0,0,0,1);
font-family: 'Lato', sans-serif;
font-size: 1.5em;
}
That's it. Now we can make a few more links like this with different background images. here is the updated final HTML:
<a href="#" class="photobox">
<img src="https://placeimg.com/300/200/nature" alt="background">
<h1>Title 1</h1>
</a>
<a href="#" class="photobox">
<img src="https://placeimg.com/300/200/nature/2" alt="background">
<h1>Title 2</h1>
</a>
<a href="#" class="photobox">
<img src="https://placeimg.com/300/200/nature/3" alt="background">
<h1>Title 3</h1>
</a>
<a href="#" class="photobox">
<img src="https://placeimg.com/300/200/nature/4" alt="background">
<h1>Title 4</h1>
</a>
Here is the complete final CSS:
@import "https://fonts.googleapis.com/css?family=Lato";
.photobox {
display: inline-block;
position: relative;
width: 300px;
height: 200px;
}
.photobox img, .photobox h1 {
position: absolute;
top: 0;
width: 100%;
height: 100%;
}
.photobox img {
filter: blur(2px);
transition: filter 500ms;
}
.photobox:hover img {
filter: blur(0px);
}
.photobox h1 {
display: flex;
justify-content: center;
align-items: center;
color: white;
margin: 0;
text-shadow: 0 5px 10px rgba(0,0,0,1);
font-family: 'Lato', sans-serif;
font-size: 1.5em;
}