Free Consultation: +1 (888) 374 0906

Once again our fantastic partners have asked us to push the boundaries of what SiteCM is capable of and today I am excited to bring you pure css user managed content image rollovers. I know I know it's exciting so read on...

Pre-requisite: Your client needs to have code snippets in order for this to be user friendly. Otherwise we are asking them to copy and or write their own divs and html and that is just not any fun for the average content user.

However if your client does have snippets (any client above a Solo or who has a Content Block add-on has them) then we are off to the races. All you need to do now is copy and paste this html into your snippet window and a little piece of css into structure and tada! A user managed image rollover.

<div class="ui_rollover">
<div class="ui_greyscale"><img src="/sitecm/i/sitecmime-grey.jpg"
width="200" alt="sitecmime-grey.jpg"  /></div>
<div class="ui_color"><img src="/sitecm/i/me.jpg"
width="200" border="0" alt="me.jpg"  />  </div>

The CSS:
.ui_rollover{position: relative; width: 200px; height: 200px;}
    .ui_greyscale{position: relative; z-index: 2;}
          .ui_greyscale img{border: 0;}
    .ui_color{position: absolute; top: 0; left: 0; z-index: 1;
        width: 200px; height: 200px;}
          .ui_color img{border: 0;}
    .ui_greyscale:hover img{display: none;}
    .ui_color:hover{z-index: 5;}

The explanation:

We are using absolute positioning, a pseudo state and the z-index property in order to create this effect.When you mouse over the grey scale image our pseudo hover state is enabled and the image goes display none. The color image which has been positioned absolutely and layered beneath the grey image with z-index then comes to the front. We need to use the pseudo hover class again to set the color image z-index as well otherwise you wind up with this fantastic flicker effect that is reminiscent of the 90s days of the blink property.

Finally if the whole thing needs to be linked (which is likely the point of this exercise) the user can simply click on the color image, apply a link to it through the content editor and done.

Your css can go in structure.css as it is not needed by the client. Remember that any classes that are not needed by the client stay in structure. The HTML goes into a snippet so that the client can then insert this snippet anywhere in their site that they want to use it. They simply would click on the images and select insert image from the editor toolbar.

There are some limitations to this of course. Fixed width and height. Because we are using position absolute we have to define a width and height to the color image. This means that your client needs to be aware of and savvy enough to upload two images that are the same width and height and maintain that where ever they are using the snippet. Aside from that it is cross browser friendly on all major browsers. I would even dare say it is likely backwards compatible.

You can see it in action here >
Write A Comment

Post A Comment


Sign up for email updates from our team

View Our Privacy Policy or Terms of Use