Pure CSS Slideshow with transform fadein fadeout effects

I'm not able to make the transition of this slideshow to work with buttons, do you know how I could do?

I have this live example jsfiddle with this HTML:

<!DOCTYPE html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <title>myPage</title>
</head>
<body>
   <input id="button-1" type="radio" name="radio-set" class="sp-selector-1" checked="checked" />
   <label for="button-1" class="button-label-1"></label>

CSS Slideshow Transitions in Squarespace

I'm new to web design, and am using a Squarespace template. On my homepage I have a slideshow, and I am trying to ease the transitions between slides by inserting some snippet of CSS code. I found this page that shows a couple options. I used this snippet:

.slide {
  -webkit-transition: opacity 2000ms ease-in-out;
     -moz-transition: opacity 2000ms ease-in-out;
       -o-transition: opacity 2000ms ease-in-out;
          transition: opacity 2000ms ease-in-out;

Making a "push" CSS gallery

I want to make a CSS image gallery/slideshow, which uses a sort of "push" transition — a bit like frames on a strip of film. After getting to the last image, the animation would restart the cycle by returning to the first image. Is it possible to do this using CSS3? What if I want the transitions timed?

IE9 - transparent images, border shown anyway.

I am a javascript developer.
I have this weird problem, with IE of course. Only this time ONLY IE9 bugs.
I have made a picture slidehow: www.usefulurl.com/i13b
Press a thumb picture to see it. Slide around using the arrow keys.
When i close it(ESC) and enter a new one,
!! the pictures are transparent, which they should not be, though the border is still shown?? Puzzled !!
This weird, weird problem, which I've tried to fix in many ways, only occurs in IE9.

Making a slideshow - Can't find the problem with my code?!

I'm teaching myself how to build websites; up until now I have made websites using tables within tables and it's all fairly straight forward, now I realise that divs and css allow you to do soooo much more!

I have put these files in a temp folder on my website so not to over write the current site. Basically I have followed this online tutorial (http://www.cryer.co.uk/resources/javascript/script16_slideshow_links.htm) but when I test the slideshow, it doesn't work.

the link is:
www.telecaretechnology.com/telecare2/index.html

Syndicate content