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.

Template Questions /

[SOLVED]CSS Rollover Images[/SOLVED]


Reply


887 Views

Avatar
ambient

Community Member, 123 Posts

22 April 2011 at 4:01am

Edited: 23/04/2011 7:47am

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!! :D
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 :)