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