1

I want to make responsive image gallery. That will display extended image on thumbnail hover. Gallery can't use any JS this is requirement.

But there is 1 little problem. Gallery needs to be responsive. That means expanded image have to be the same size as the default image that is responsive and resize on smaller devices.

Here is my html code

<div class="container"></div>
<div class="container">

  <div id="gallery-photo-container">
    <img src="http://imgur.com/60BBDre.jpg">
    <div class="gallery-thumbnail-image">
      <img src="http://imgur.com/60BBDre.jpg">
      <div class="gallery-main-image">
        <img src="http://imgur.com/60BBDre.jpg">
      </div>
    </div>
    <div class="gallery-thumbnail-image">
      <img src="http://i.imgur.com/C7SFJxy.jpg">
      <div class="gallery-main-image">
        <img src="http://i.imgur.com/C7SFJxy.jpg">
      </div>
    </div>
    <div class="gallery-thumbnail-image">
      <img src="http://i.imgur.com/aa5kiAi.jpg">
      <div class="gallery-main-image">
        <img src="http://i.imgur.com/aa5kiAi.jpg">
      </div>
    </div>
    <div class="gallery-thumbnail-image">
      <img src="http://imgur.com/TWLJOVv.jpg">
      <div class="gallery-main-image">
        <img src="http://imgur.com/TWLJOVv.jpg">
      </div>
    </div>
  </div>
</div>

Absolute approach

I have almost done it, using absolute position and positioning with top attribute. But on resize expanded image is the size of left container beginning to the right end of the page.

Here is my DEMO1 and CSS.

.gallery-thumbnail-image:hover > .gallery-main-image {
  visibility: visible;
  opacity: 1;
}

.gallery-thumbnail-image {
  display: inline-block;
}

#gallery-photo-container .gallery-thumbnail-image > img {
  width: 79px;
}

#gallery-photo-container img {
  max-width: 100%;
}

.gallery-main-image {
  position: absolute;
  visibility: hidden;
  top: 18px;
  left: 18px;
  margin-right: 8px;
}

.container {
  width: 50%;
}

#gallery-photo-container {
  border: 1px solid black;
  padding: 10px;
}

Relative approach

I think it can be done it too, by using relative position and positioning with bottom attribute. But here the problem is that thumbnail image container is resizing to the expanded image size on hover. And the bottom attribute value is screen size dependent.

In this DEMO2 you have to click on a thumbnail because they are jumping. And here is CSS for relative approach. 

.gallery-thumbnail-image:hover > .gallery-main-image {
  display: block;
  opacity: 1;
}

.gallery-thumbnail-image {
  display: inline-block;
}

#gallery-photo-container .gallery-thumbnail-image > img {
  width: 79px;
}

#gallery-photo-container img {
  width: 100%;
}

.gallery-main-image {
  position: relative;
  display: none;
  bottom: 373px;
}

So, could it be done responsive way with one of these two approaches? Or maybe you have another idea. I'm looking forward for your help.

dagi12
  • 365
  • 3
  • 13

2 Answers2

1

You need a margin-right: 8px;, because of the top: 8px; left: 8px; Plunkr:

.gallery-thumbnail-image:hover > .gallery-main-image {
  visibility: visible;
  opacity: 1;
  margin-right: 8px;
}

Slightly off-topic, but... just in case you're interested in simulating an onclick event with CSS, see this SO answer.

Community
  • 1
  • 1
Nick Bull
  • 9,518
  • 6
  • 36
  • 58
1

See this update of your plunk.

https://plnkr.co/edit/6EOKiKEQcxDiuIXApPLo?p=preview

the main changes are here:

.gallery-main-image {
  position: absolute;
  display: none;
  top: 10px;
  left: 10px;
  right: 10px;
}

#gallery-photo-container {
  border: 1px solid black;
  padding: 10px;
  position: relative;
}

Use of an absolute element positioned within relatively positioned element.

Andy
  • 454
  • 2
  • 7
  • 22