Transition One Image into Another

If you have an “our employees” section on your website and would love to add a little bit of flare, why not integrate a basic image rollover? That’s what we are going to be doing today. I will be using the WordPress and the XTheme from Themeco to build a basic employee page with image rollovers.

What will you need?

  • Photoshop
  • XTheme
  • Cornerstone

Let’s get started.

I won’t be getting into setting up WordPress or XTheme, that’s for a totally different “How-To”. We are going to go straight into the page build. The first thing you need to do is create a new page, and begin editing it with Cornerstone.

cornerstone

Create a New Section using the panel on the left-hand options bar. This will create a new section that we will be able to use to add our company employees.

create a new section in cornerstone

Click on the new section that you just created. Right now mine is called Section 1, but this can be renamed to make it easier to locate later on down the road. I highly suggest naming each section, it will save you the headache of digging for the correct section. Once you have selected the section, break it into however many rows you would like. For this demo I am going to be using 4 rows.

set your number of columns in cornerstone

Now click the Element option on the left-hand options pane. Then type in the letters “img” or locate the image element from your available built in elements. This is where we are going to add our employee picture. You will need to place an image in each row, but for now we will just start with the first row.

add an image in cornerstone

Once you have located the Image element, drag it into your first row. This will leave you with the Image icon in that row. Click the Image icon in the Cornerstone preview window to open the Image options. This is where you will add your employee image as well as make a few CSS changes.

setup your image in cornerstone

Now we will be uploading the 2 images that we will be using for each of our employees, a main image and a secondary. I will be using a random stock photograph of a man and an image of a camera. I will name this man Gregg Clickycam and he will be my new “Head of Photography”. Feel free to use any photographs that you would like. We will add our images by selecting the box with the + that appears under the word “SRC”. Select your images from your computer (or if you already have them uploaded pick the first one from the library. I do not have either uploaded so I will add them both now. Once they have made their way back up to the server. Before we add this image to our page you will need to click the secondary image and copy the URL. You will need this later on.

upload you image to cornerstone

Finally select the main image that you would like to use, then select “Insert Into Post” at the bottom of the uploader.

NOTE: be aware that both of these images will need to be the same exact size. My images are 500×281. If you end up using mismatched images, your end product will look strange and sloppy.

add you image to the media library in wordpress

If everything was done properly you should now have your image displaying in the Cornerstone preview window. Now we will need to begin working on making a few changes to our CSS. Do not fear the CSS for it is your friend. We want to start off by adding a new class to our image. This class will be added to all of our employee images. You can any name that you want to identify that these images will rollover to another image. I will be using “roll-over” for my class name. This name needs to be added to the “class” field for this image. Simply click the image, scroll down on the left-hand options pane until you locate the class field. Enter your class name.

add a rollover class to your image in cornerstone

Now this class isn’t going to do anything until we add a few CSS rules for it. Click on the Settings tab on the left-hand options pane (it looks like a gear) and choose “Custom CSS”. This will open the Custom CSS panel where you will enter all of your image’s style controls.


.roll-over {
  opacity: 1;
  transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
}
 
.roll-over:hover {opacity: 0; }

The first bit of code is going to set the opacity for our employee image (opacity: 1). Next it is going to add an ease in and ease out fade (transition: opacity .25s ease-in-out). The second line that begins with -webkit that resembles the line above it is going to add the same functionality to older browsers that do not support CSS3.

The next section of code will cause the image to trigger an opacity of 0 (not visible) when the user hovers over it. Once you have entered all of this code, save your work. If everything worked correctly, now when you hover over your employee photo, it will disappear with a transition and reappear when you remove the cursor.

 

Next we will need to add the image that this image is going to transition into. We will be doing this by actually adding it as a background for the container that this image is sitting inside. Earlier you were instructed to make note of the URL for the secondary image, if you forgot to, you will need to get into your Media Library and copy it to your clipboard.

Now we will need to add a few styles directly to the Column that our Image is in. To do this click the image, then at the top of the left-hand options pane choose where it says “Column”.

select the image column to add css

Once in the Column options, scroll to the bottom of the options pane and locate the “Styles” field. We will be adding styles directly to the Column. We do have the ability to add it in the Custom CSS editor like we did with the class styles for .roll-over but this is a little bit easier. Within the Styles field we will need to add:

background: url(location_of_your_secondary_image.jpg); background-position: top center; 
background-size: 100%; background-repeat: no-repeat;

So what did all of that CSS do? The first piece of background: url() tells WordPress where the actual background image lives on the server. Background-position: top center is going to force our background to the top of the Column and align it dead center.Background-size:100% is going to fill the background to 100% of the Column. Finally background-repeat: no-repeat us going to force the background to not repeat. If everything went as planned you now should have an image that when you hover transitions from your employee to the secondary image.

 

To close out our employee section let’s just add a simple “Custom Heading” and “Text” element below the image. Here I will add the employee name as well as their title. If you would like to setup your text like mine, follow these steps:

  • Set Custom Heading element to “Appear as H4”
  • Center Align the Custom Heading
  • Give the Custom Heading a class of “man”
  • Center Align your Text element
  • add man to the class of your employee image
  • Click on your image and add 10px of padding to the bottom of the employee image

We are all done, we now have a really clean and simple employee page that implements a rollover with a transition. You can just duplicate the first image and replace the primary image. We will need to copy and paste the Column styles from the first image to every other image and then replace the URL for the background image.

Image with rollover completed in cornerstone

About the Author

Sean Piper

Facebook Twitter

Sean Piper is the owner and founder of 24th & 10 Design Agency (http://24thand10.com) as well as SlashDotHack (http://slashdothack.com). Proud designer, lack-luster developer, and video game fanatic.