My simple gallery using css transitions isn't working - css

Question

I've been trying to create a very simple gallery with a main image and three thumbnails down the right side, which when hovered over will display themselves as the main image. I used a found jfiddle and tried to edit it for my own needs but seem to have agot a bit mixed up along the way! This is my first time using css transitions to create something like this so it could quite possibly be something very obvious - i just can't see it.
The code I have is as follows:
<div id="gallery">
<div class="thumb" id="thumb-1"><img alt="" src="/wp-content/themes/magicmirror/images/gallery1-thumb.jpg" /></div>
<div class="main"><img alt="" src="/wp-content/themes/magicmirror/images/gallery1-main.jpg" /></div>
<div class="thumb" id="thumb-2"><img alt="" src="/wp-content/themes/magicmirror/images/gallery2-thumb.jpg" /></div>
<div class="main"><img alt="" src="/wp-content/themes/magicmirror/images/gallery2-main.jpg" /></div>
<div class="thumb" id="thumb-3"><img alt="" src="/wp-content/themes/magicmirror/images/gallery3-thumb.jpg" /></div>
<div class="main"><img alt="" src="/wp-content/themes/magicmirror/images/gallery3-main.jpg" /></div>
</div>
#gallery {
position: relative;
width: 470px;
height: 350px;
float: left;
margin: 0 35px 20px 0;
}
#gallery .thumb img {
height: 110px;
width: 110px;
}
#gallery .main img {
height: 350px;
width: 350px;
}
#gallery .thumb {
cursor: pointer;
left: 357px;
position: absolute;
display: block;
width: 112px;
height: 112px;
border: 1px solid #6d6d6d;
}
#thumb-2 {
top: 117px;
}
#thumb-3 {
top: 234px;
}
#gallery .main {
opacity: 1;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
position: absolute;
border: 1px solid #6d6d6d;
}
#gallery .thumb:hover + .main {
opacity:0;
}

Answer 1

Hovering on the thumbnail should show the corresponding image in the main view. But you're doing it reversely (which hides the image in the main view with opacity:0). So try changing it like this:
#gallery .main {
opacity: 0; /* changed 1 to 0 */
...
}
/* always show the first initially */
#gallery > .main:nth-of-type(2) {
opacity:1;
}
#gallery .thumb:hover + .main {
opacity:1; /* changed 0 to 1 */
}
Demo.
NOTE: The demo just solves your problem mentioned in the question. To make it an acceptable gallery, I think you have to change the layout (HTML code) if you want a pure CSS solution, otherwise you have to add more script code.