Creating a hover effect example

If you've seen any of my previous books, then you will see I have a thing about flowers, and in particular orchids; indeed, the cover on my first book was that of a phalaenopsis, or moth orchid! We'll use a couple of images of orchids as the basis for our next demo, as shown in the screenshot over the page, where it shows our desired effect in motion for the top image.

Tip

If you prefer using Less, then please skip to the end of this demo for an example using Less CSS.

For this demo, we will need a copy of the tutorial1A folder from the code download that accompanies this book; make sure you dig that out before continuing:

1. Open up a copy of style.scss from the src folder within tutorial1A; let's take a look at its contents.
2. At the top of the file, we have a small handful of variables. These define some of the colors used within the code, and set the $fullsize variable to 100%:
   

   The sharp-eyed among you will spot that not all colors have been given a value; the reason for this will become clearer later in this chapter.

3. Next up comes an example of a simple mixin, which converts pixel values to their rem unit equivalents, using 16px as the base equivalent for 1rem unit:
   
4. To complete the exercise, we need to download a font. The demo uses the Source Sans Pro font available at use the Generator option available from the black menu to produce a version that can be used online (it creates the CSS we've used in our demo).
5. At this point, go ahead and drop a copy of the style.scss file from the tutorial1A folder into the src folder in our project area.
6. We also need the img folder and the index.html file—go ahead and copy both across to the root of our project area.
7. Fire up a Node.js command prompt window, then enter this at the prompt and press Enter:

   gulp
   

8. If all is well, we should see compressed CSS files and source maps appear in the dest folder in our project area—copy the maps folder and style.min.css into the css folder of tutorial1A.
9. Go ahead and preview the results in a browser. If all is well, we should see two orchid images appear on screen; if you hover over either one, you will see it fly to the left or right, to reveal an information box with information about the orchid:
   

Interesting effect, huh? It's a simple animation that uses scale() to shrink the image to 0.5 (or 50%) of its size and slides it to the right, before sliding in the infobox immediately behind it. Take the mouse off the image and the reverse happens—it's the sample principle for the second image—but in reverse; the code sets an ltr and rtl class to determine which direction the image should move in the demo.

Using Less CSS as an alternative

A copy of this demo using the equivalent code from the Less CSS pre-processor is available in the code download that accompanies this book. It's in the Tutorial1B folder if your preference is to use the Less CSS pre-processor; you will need to install the gulp-less plugin from https://github.com/plus3network/gulp-less, using NodeJS (in the same manner as other plugins that we've installed). An updated copy of the Gulp task file is also included in this folder, along with completed versions of the CSS code.