News

Unleash CSS to create an animated pop-up effect

Add interest to links with an attention-grabbing pop-up animation

950PopupAnimation

A video production company, Pinkanova is based in Toulouse in the south-west of France. With the European headquarters of Intel and world-renowned university located nearby it’s certainly not a bad place to have your company’s headquarters.

Pinkanova is the epitome of the digital native. Many video companies are catching up with what can be achieved digitally with video but all too often the results look like after thoughts. Where Pinkanova distinguishes itself is in the integration of digital elements, with the creation of fun, memorable and engaging sights into exciting new worlds where the real and virtual co-exist.

The head

For the purposes of the workshop, a fullscreen image is used and loaded by linking the background stylesheet. This is achieved by assigning a background image to the HTML. Here the background-size keyword ‘cover’ is used. This scales the background image, preserving the original aspect ratio so that the background is completely covered.

<!DOCTYPE html>
  <html> 
    <head>
      <meta charset="utf-8">
      <title>Animated Popups</title>
      <link rel="stylesheet" type="text/    css" href="styles/background.css">
      <link rel="stylesheet" type="text/    css" href="styles/popups.css">
    </head>

The body

The two pop-ups are contained within a <div> with the class ‘main’. Each of the pop-ups sits within its own <div> ‘left’ and ‘right’ and the graphics themselves are displayed by assigning appropriate classes to the links, in this case for ‘men’ and ‘women’ retrospectively. The link text is hidden using CSS.

  <body>
    <div>
      <div><a href="#">Menswear</a></div>
      <div><a href="#">Womenwear</a></div>
    </div>
  </body>
</html>
×