Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

We're retiring the forums!

The SilverStripe forums have passed their heyday. They'll stick around, but will be read only. We'd encourage you to get involved in the community via the following channels instead:

General Questions /

General questions about getting started with SilverStripe that don't fit in any of the categories above.

Moderators: martimiz, Sean, Ed, biapar, Willr, Ingo, swaiba

Rollover Effects on Images in pages

Go to End

3 Posts   2054 Views


Community Member, 95 Posts

6 March 2009 at 12:11pm

I'm looking for a way to have a box appear when I rollover an image I've added to a page. See the three big white boxes in the example website below:

I don't need the client to be able to edit the content of those boxes (although that would be excellent if possible). I know I could just put each image in it's own <div> and have an a:hover for that div for each image. But that seems like a very sloppy way to do this.

Any ideas?

~ James


Community Member, 254 Posts

6 March 2009 at 12:56pm

Nice transition on the images so far. I can't think of any cleaver way of controlling this. You'd need to make a dynamic style sheet or dynamic javascript file to allow the images and on hover states to be editable. I'd stick with the sloppy but functional :hover. Is the whole image meant to swap out on hover? I'd just apply a lite grey hover to the white container box. Or I've found applying opacity to a image worked quite well for me, just to lighten the image on hover


You have to apply both. I think filter is for IE and opacity is for Mozilla


Community Member, 400 Posts

6 March 2009 at 2:45pm

try JQuery UI and the JQuery Plugins directory, there you can find a lot of effects.