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 */
}
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.