CSS-only hover over thumbnail to display div

Question

I am attempting a simple way of using CSS only to display images within an element, when you hover over their corresponding thumbnail div. I thought this would be relatively easy using the tildie (~) to target the element outside of the thumbnail:hover scope, as both of them would be in the parent container, however it doesn't seem to work, I'd rather not use Javascript for this, but if this isn't possible, then so be it, just thought I'd see what anyone else's input is on this and maybe it can help someone in the future.

HTML

<div class="container">
  <!-- Main images -->
  <div class="primary img1">
    <img src="myimage.jpg" />
  </div>

  <div class="primary img2">
    <img src="myimage2.jpg" />
  </div>

  <!-- Thumbnails -->
  <div class="thumb img2">
    <img src="myimage2.jpg" />
  </div>
</div>

CSS

.primary.img1 {
  display: block;
}

.primary.img2 {
  display: none;
}

.primary.img2:hover, .primary.img1 {
  display: none;
}

.primary.img2:hover, .primary.img2 {
  display: block;
}

Answer 1

The problem with your code is that thumb is after the images you want to display. If you look up the selector you are using then you will understand why.

The ~ combinator separates two selectors and matches the second element only if it is preceded by the first, and both share a common parent.

General sibling selectors

So as you can see now we can get it working by putting .thumb infront. (a little change to the CSS so when we hover .thumb it displays the new image.)

 .primary.img1 { display: block; } .primary.img2 { display: none; } .thumb.img2:hover ~ .primary.img1 { display: none; } .thumb.img2:hover ~ .primary.img2 { display: block; } 

 <div class="container"> <!-- Thumbnails --> <div class="thumb img2"> <img src="http://placehold.it/350x150" /> </div> <!-- Main images --> <div class="primary img1"> <img src="http://placehold.it/351x150" /> </div> <div class="primary img2"> <img src="http://placehold.it/352x150" /> </div> </div> 

Answer 2

Actually it's quite wrong what you are doing here because although you have a container that is .primary your img clases should be on the images instead . Second of all you cannot hover over display: none elements . Display none removes the element from the page it's not like visibility: hidden; (element invisible but still there in the structure) .So basically you are hovering .primary.img2:hover which you gave display: none and making .primary.img1 display: none . Don't really get what you are trying to ... but i'll show you a structure that i hope it helps .

HTML:

<div class="container">
  <!-- Main images -->
  <div class="primary">
    <img class="img1" src="myimage.jpg" />
  </div>

  <div class="primary">
    <img class="img2" src="myimage2.jpg" />
  </div>

  <!-- Thumbnails -->
  <div class="thumb">
    <img class="thumb-img2" src="myimage2.jpg" />
  </div>
</div>

CSS:

.primary .img1 {
  display: block;
}

.primary .img2 {
  display: block;
}

.img2:hover .img1 {
  display: none;
}

.img2:hover .img1 {
  display: block;
}

Hope it helps you somehow ...