Rollover Image Gallery Code

I received a number of emails asking how I display the pictures on my blog. This post will give you the code you need to make your own "Rollover Image Gallery".

It's very important to note that you will need to make changes to your blog HTML template. If not done correctly, things will not display properly on your blog. I am happy to share this code but please use it at your own risk, I'm not responsible for your personal blog (sorry, I must say that)

In return, I ask you kindly to link back to my post on your first "Rollover Image Gallery" post so other interested bloggers can find the information. Thank you.


  1. Log into your blog
  2. Go to edit Layout page, click on Edit HTML
  3. Look for any end curly bracket }
  4. Copy and paste the below "css code" under the end curly bracket
  5. Save the template
css code:

Follow just the steps below to insert image gallery in blog
  1. In your post, click Edit HTML
  2. Copy and paste the "html code" below to where the image gallery is to be displayed
  3. Replace main_image and image1 to image12 with links to your images
  4. Save and enjoy your rollover image gallery
html code:

1 comment:

  1. Thanks for sharing Chelsea..that is very kind of you. I may just have to give this a try some day ;)