2. (Part 1) Creating a cover photo

By Andrei Boscor

In order to create a cover photo we will be using

  • HTML
  • CSS

The cover photo will contain four images that will transition every few seconds.

We will achieve this using only CSS3 animations. (Does not work in Internet Explorer)

Live Demo
Click here to view a live demo

The HTML part

Now in the html you have you will add a few things.
We will first link the stylesheet in the <head> of the HTML.

<link rel="stylesheet" type="text/css" href="stylesheet.css">

That will import the CSS animations. We will create the stylesheet file later.

Now we need to create the actual element which will contain the cover photo.
This will be a div tag.

<div id="cover_photo”>
</div>

The div tag will be placed inside the <body> tag. (Very important!)

Now it’s time to add the images we want for the cover photo.
Inside the <div> tag we will add every image.

<div id="covera">
    <img src="http://stylonica.com/wp-content/uploads/2014/02/facebook-cover-balloons-sunset-view-facebook-cover.jpg"> </img>
    <img src="https://s-media-cache-ak0.pinimg.com/originals/a3/70/da/a370dab9701dda5ef4e10e056e617e97.jpg"> </img>
    <img src="http://www.addcovers.com/covers/13gx3kcl44to8k3.jpg"> </img>
    <img src="http://www.lovesove.com/cards/wp-content/uploads/2014/06/colorful-facebook-timeline-covers-banners_8.jpg"> </img>
</div>

You can use the images added here or (for full marks) you can search for your own on google. To add diferrent images you must:

  • Image search on google for facebook cover photos ( this is necessary because of the size of the image)
  • Press view image and copy the link from the browser
  • Paste the link here `src="link here"

The CSS part

Now that we’re done with the HTML, we need to add the CSS in order to create the animation.

So, first we have to create a stylesheet.css file in the same folder as the HTML file.

  • The first thing we will add in this file is:
body { 
  margin: 0;
}

This will make the body of the webpage have no margins as our aim is to stretch the cover photo across the screen.

  • The next important thing we need to add is the #cover_photo selector.
#cover_photo {
  margin:0 auto;
  color:white;
}

This will stretch the cover_photo div across the screen. (Only in width)
color:white is only added to eliminate any extra text that might appear from the animations.

  • Next we have to add the animation that goes from opacity 0 to 1.
@-webkit-keyframes coverFadeInOut {
 0% {
   opacity:1;
 }
 17% {
   opacity:1;
 }
 25% {
   opacity:0;
 }
 92% {
   opacity:0;
 }
 100% {
   opacity:1;
 }
}

@-moz-keyframes coverFadeInOut {
 0% {
   opacity:1;
 }
 17% {
   opacity:1;
 }
 25% {
   opacity:0;
 }
 92% {
   opacity:0;
 }
 100% {
   opacity:1;
 }
}

@-o-keyframes coverFadeInOut {
 0% {
   opacity:1;
 }
 17% {
   opacity:1;
 }
 25% {
   opacity:0;
 }
 92% {
   opacity:0;
 }
 100% {
   opacity:1;
 }
}

@keyframes coverFadeInOut {
 0% {
   opacity:1;
 }
 17% {
   opacity:1;
 }
 25% {
   opacity:0;
 }
 92% {
   opacity:0;
 }
 100% {
   opacity:1;
 }
}

These are added multiple times with slight modifications in order to assure browser compatibility (moz is for Mozilla Firefox, o is for Opera, etc)

  • The next step is to add the #cover_photo img selector. This will modify every image that we put into the HTML tag.
#cover_photo img {
  position:absolute;
  left:0;
  width:100%;
  max-height:60%;
  min-height: 30%;
}

Important here is the width set to 100% which will ensure the photo stretches out to fill the web page width.
The max-height is set to 60% and the min-height to 30% for when the user changes the size of the browser.

  • The next step is to add the animation to the CSS
#cover_photo img {
  -webkit-animation-name: coverFadeInOut;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-duration: 8s;

  -moz-animation-name: coverFadeInOut;
  -moz-animation-timing-function: ease-in-out;
  -moz-animation-iteration-count: infinite;
  -moz-animation-duration: 8s;

  -o-animation-name: coverFadeInOut;
  -o-animation-timing-function: ease-in-out;
  -o-animation-iteration-count: infinite;
  -o-animation-duration: 8s;

  animation-name: coverFadeInOut;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 8s;
}

Every photo used will go through the 8 second animation of fading in and out.

  • In order to create the slideshow effect, we will add delays to every photo using CSS
#cover_photo img:nth-of-type(1) {
  -webkit-animation-delay: 6s;
  -moz-animation-delay: 6s;
  -o-animation-delay: 6s;
  animation-delay: 6s;
}
#cover_photo img:nth-of-type(2) {
  -webkit-animation-delay: 4s;
  -moz-animation-delay: 4s;
  -o-animation-delay: 4s;
  animation-delay: 4s;
}
#cover_photo img:nth-of-type(3) {
  -webkit-animation-delay: 2s;
  -moz-animation-delay: 2s;
  -o-animation-delay: 2s;
  animation-delay: 2s;
}
#cover_photo img:nth-of-type(4) {
  -webkit-animation-delay: 0;
  -moz-animation-delay: 0;
  -o-animation-delay: 0;
  animation-delay: 0;
}

Opening the html page in Google Chrome or Mozilla, we will now have a transitioning cover photo.

Next lesson

In the next lesson we will be adding a profile photo and are positioning your name on the cover photo.