Using HSL & Opacity - Exercise

Contact Us or call 1-877-932-8228
Using HSL & Opacity - Exercise

Using HSL & Opacity

Duration: 15 to 25 minutes.

In this exercise, you will render a design that incorporates hsl and hsla color specifications and the CSS opacity property.

  1. Open ClassFiles/CssBackgroundTricks/Exercises/hsla-opacity/index.html in a text editor.
  2. Note that the markup for the page is done for you, as is some of the CSS coding.
  3. Tile the body with the image pattern_096.gif.
  4. Give the header and .photo elements a background color of #B7D3D9 with 50% opacity - convert the color to hsla using this tool.
  5. Set each photo's initial opacity to 50%. Note that we use max-width:100% for the two images, ensuring that the images will scale to smaller sizes if the browser width is reduced or if the page is viewed on a small-screen-size device.
  6. Center align all elements.
  7. Give the text in the caption a color of 50% black - use rgba.
  8. Use CSS's :target pseudo-class to highlight the user's selected element:
    • Set the photo to 100% opacity.
    • Set the background color of the .photo <div> to 100% opacity.
    • Set the color of the caption text to 100% black.
  9. Initially, before the user clicks anywhere, the page should look like this: opacity/hsla exercise
  10. Clicking on an image (the left one, in this example) should present the page like this: opacity/hsla exercise


<!DOCTYPE html>
	<meta charset="utf-8">
	<title>CSS3 HSL &amp; Alpha</title>
	<style type="text/css">
		* {
		body {
			padding-top: 1em;
			background-image: url('pattern_096.gif');
			background-repeat: repeat;
		h1 {
			margin-bottom: 0.25em;
			text-align: center;
		header {
			text-align: center;
			background-color: hsla(191, 31%, 78%, 0.5);
		header p {
			padding: 2% 2% 0.5% 2%;
		.photo {
			width: 44%;
			padding: 2% 3%;
			float: left;
			text-align: center;
			background-color: hsla(191, 31%, 78%, 0.5);
		.photo img {
			max-width: 100%;
			opacity: 0.5;
		.photo .caption {
			color: rgba(0,0,0,0.5);
		div:target {
			background-color: hsla(191, 31%, 78%, 1.0);
		div:target img {
		div:target .caption {
			color: rgba(0,0,0,1.0);
		footer {
			text-align: center;
			clear: left;
	<h1>Two Photos</h1>
		<p>A photo of a <a href="#cat">cat strangely sitting upright</a> and of <a href="#chicago">Millenium Park in Chicago</a></p>
	<div id="cat" class="photo">
		<a href="#cat"><img src="cat.jpg"></a>
		<div class="caption">This cat seems to enjoy sitting upright</div>
	<div id="chicago" class="photo">
		<a href="#chicago"><img src="chicago.jpg"></a>
		<div class="caption"><em>Cloud Gate</em> is a popular public sculpture</div>
		<p>I am a footer</p>

Code Explanation

We set the specified elements' background color to hsla(191, 31%, 78%, 0.5) or hsla(191, 31%, 78%, 1.0) - for 50% and 100% opacity, respectively - to match the #B7D3D9 blueish tone.

We set an initial opacity:0.5 for the two photos.

We style the selected photo element via CSS's :target pseudo-class, changing the photo's opacity, the opacity of the element's background color, and the opacity of the caption text color.