Jump to:

22997 Posts in 11620 Topics by 2827 members

General Questions

SilverStripe Forums » General Questions » Rollover Effects on Images in pages

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

Page: 1
Go to End
Author Topic: 1459 Views
  • Valorinbattle
    Avatar
    Community Member
    95 Posts

    Rollover Effects on Images in pages Link to this post

    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

  • Bambii7
    Avatar
    Community Member
    254 Posts

    Re: Rollover Effects on Images in pages Link to this post

    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

  • Nivanka
    Avatar
    Community Member
    395 Posts

    Re: Rollover Effects on Images in pages Link to this post

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

    1459 Views
Page: 1
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.