Jump to:

3445 Posts in 1031 Topics by 872 members

Template Questions

SilverStripe Forums » Template Questions » [SOLVED]CSS Rollover Images[/SOLVED]

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

Page: 1
Go to End
Author Topic: 866 Views
  • ambient
    Avatar
    Community Member
    123 Posts

    [SOLVED]CSS Rollover Images[/SOLVED] Link to this post

    Hi all

    So I'm having all sorts of fun playing around with Silverstripe but I've come to a problem with using css rollover images.

    This is the code I've been playing with

    layout.css

    .main_img a{
       width: 600px;
       height: 288px;
       float: left;   
    }

    .main_img a:hover   {
       background: bottom;
    }
    .main_img a:current   {
       background: top;
    }

    Page.ss

    <div class="main_img"><a href="#" style=" background: url($Photo.URL) top;"></a></div>

    With this code I can get the image to appear but the rollover won't work.
    I've tried all kinds of variations of the code but just can't get it to work.

    If anyone can help with this, even with some other method of getting rollovers to work that would be brilliant.

    Thanks all

    Update 22/04/11

    Woooo Hooooo, finally got it working!!
    Heres how...

    layout.css

    a.main_img {
       width: 600px;
       height: 288px;
       float: left;
       background: top;   
    }

    a.main_img:hover   {
       background: bottom;
    }

    Page.ss

    <div><a href="#" class="main_img" style=" background-image: url('$Photo.URL');"></a></div>

    This is very unforgiving code, the class="main_img" had to be in the href and not in the div itself. style=" background-image: url('$Photo.URL'); had to be background-image and not just background whereas in the css it had to be background and not background-image. Also the a.main_img { would not work as .main_img a{, same for the hover. Bizarre but true. I'm just happy it's working. Hope someone else gets some use out of this.
    Cheers

    866 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.