Change base image on hover

Question

I want to change .product-image div when I click or hover on the small thumbnails only with HTML. Before I use a JavaScript code but I want to skip JavaScript method and leave only pure HTML.

Is there any way to can do this only with HTML?

I just want to say that the images will not have the same name like, instead the image name will be a variable, so every time when the page is loaded there will be other names for the images.

Here is my code:

ul,ol {list-style:none;}
.product-img-box {float:left;}
.product-img-box .product-image {width:300px; float: right;}
.product-img-box .more-views li img {width:90px; }

<div class="product-img-box">
<div class="more-views" style="float:left">
    <ul class="slides" id="slides">
        <li><a rel="#" href="#"><img src="http://i64.tinypic.com/24cuyhk.jpg" alt=""></a></li>
        <li><a rel="#" href="#"><img src="http://i64.tinypic.com/23mamww.jpg" alt=""></a></li>
        <li><a rel="#" href="#"><img src="http://i63.tinypic.com/1zwyaux.jpg" alt=""></a></li>
        <li><a rel="#" href="#"><img src="http://i63.tinypic.com/1zmk0ag.jpg" alt=""></a></li>
        <li><a rel="#" href="#"><img src="http://i64.tinypic.com/espx68.jpg" alt=""></a></li>
    </ul>
</div>
<p class="product-image" style="float:right">
    <a href="#"><img src="http://i64.tinypic.com/24cuyhk.jpg" alt="" id="mainImage"></a>
</p>
</div>

Thank you so much

https://stackoverflow.com/questions/38803868/responsive-pure-css-hover-image-gallery , http://thecodeplayer.com/walkthrough/css3-image-slider-with-stylized-thumbnails - A simple search of pure css image gallery would give you a lot of examples — Fabrizio Calderan, Feb 15 '18 at 11:23
You can only make a pure CSS solution work with hover. Not when using a click. — Gerard, Feb 15 '18 at 11:36

davecar21 · Answer 1 · 2018-02-16T15:21:59.693

but is imposible for me to use href there, all that href will be populated automatically.

Then In this case you could try to use CSS :hover

What I did is that when you hover the .grid1 it will look for the preceded(~) element that is the .grid6 and then it will look for #img1 where the parent(>) is .grid6.

.grid1:hover ~ .grid6>#img1{
  display:block;
}

Please see the sample code below.

html,body{
  height:100%;
  width:100%;
  padding:0;
  margin:0;
}

.container{
  margin-left:5%;
  margin-top:5%;
  display:grid;
  grid-template-columns: 15% 1fr;
  grid-template-rows: repeat(5, 1fr);
  justify-items: center;
  align-items: center;
  height:80%;
  width:80%;
}

.container img{
  height:auto;
  width:100%;
}

.grid1, .grid2, .grid3, .grid4, .grid5{
  height:100%;
  width:100%;
}

.grid6{
  grid-row: 1 / 6;
  grid-column: 2 / 3;
}

.grid6 a{
  display:none
}


.grid1:hover ~ .grid6>#img1{
  display:block;
}

.grid2:hover ~ .grid6>#img2{
  display:block;
}

.grid3:hover ~ .grid6>#img3{
  display:block;
}

.grid4:hover ~ .grid6>#img4{
  display:block;
}

.grid5:hover ~ .grid6>#img5{
  display:block;
}

<div class="container">
  <div class="grid1">
    <a rel="#" href="#img1">
      <img src="http://i64.tinypic.com/24cuyhk.jpg" alt="">
    </a>
  </div>
  <div class="grid2">
    <a rel="#" href="#img2">
      <img src="http://i64.tinypic.com/23mamww.jpg" alt="">
    </a>
  </div>
  <div class="grid3">
    <a rel="#" href="#img2">
      <img src="http://i63.tinypic.com/1zwyaux.jpg" alt="">
    </a>
  </div>
  <div class="grid4">
    <a rel="#" href="#img2">
      <img src="http://i63.tinypic.com/1zmk0ag.jpg" alt="">
    </a>
  </div>
  <div class="grid5">
    <a rel="#" href="#img2">
      <img src="http://i64.tinypic.com/espx68.jpg" alt="">
    </a>
  </div>
  <div class="grid6">
    <a href="#" id="img1">
      <img src="http://i64.tinypic.com/24cuyhk.jpg" alt="">
    </a>
    <a href="#" id="img2">
      <img src="http://i64.tinypic.com/23mamww.jpg" alt="">
    </a>
    <a href="#" id="img3">
      <img src="http://i63.tinypic.com/1zwyaux.jpg" alt="">
     </a>
    <a href="#" id="img4">
      <img src="http://i63.tinypic.com/1zmk0ag.jpg" alt="">
     </a>
    <a href="#" id="img5">
      <img src="http://i64.tinypic.com/espx68.jpg" alt="">
     </a>
  </div>
  </div>
</div>

Hope this helps.

thank you so much for your answer I really appreciate your help, but is imposible for me to use href there, all that href will be populated automatically. — Stefan D., Feb 15 '18 at 17:20
@StefanD. I see then the option left is using CSS hover.. Please see my updated answer and it hope it helps. — davecar21, Feb 16 '18 at 15:22

Change base image on hover

1 Answers1