My simple gallery using css transitions isn't working

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.