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.

General Questions

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

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

Rollover Effects on Images in pages


Reply

3 Posts   1551 Views

Avatar
Valorinbattle

6 March 2009 at 12:11pm Community Member, 95 Posts

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:

http://www.brighthopeworld.com/index.asp

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

Avatar
Bambii7

6 March 2009 at 12:56pm Community Member, 254 Posts

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

filter:alpha(opacity=75);
opacity:.75;

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

Avatar
Nivanka

6 March 2009 at 2:45pm Community Member, 395 Posts

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