Create interactive grid with CSS

Question

Create interactive grid with CSS

Navigation

#1 by (3 votes)
#2 by (1 votes)

1

I wanted to create an interactive grid where when the person clicked on the image this same appeared next to the shopping site style.

<div id='gridImagens>
    <div>
        <div>
            <div>
                <img src"miniatura.png">
            </div>
        </div>
        <div>
            <div>
               <img src"miniatura.png">
            </div>
        </div>
        <div>
            <div>
               <img src"miniatura.png">
            </div>
        </div>
    </div>
    <div>
        <img src='imgs/imgGrande.jpg' />
    </div>    
</div>

I would like that when clicking on one of the thumbnail images that image appears in place of the imgGrande

javascript html css css3

asked by anonymous 21.09.2017 / 15:48

2 answers

3

I think using a Modal would be interesting, I can recommend the w3school site ( link ) it helped me enough to get a feel for the beginning.

21.09.2017 / 16:34

Display only one message at the end of an operation within a WHILE How to know if an object can be focused

score 1 · Accepted Answer

There is a way to do this without needing JavaScript .

In this example, replace the small images with the thumbnail and large with the large image.

% w / o of large images is set to 500x375 pixels, so if you use images with different sizes adjust the CSS of the images or change the size of the div .

HTML:

<div id="gallery">
  <ul id="navigation">
    <li><a href="#pic1"><img alt="" src="small_nature1.jpg" /></a></li>
    <li><a href="#pic2"><img alt="" src="small_nature2.jpg" /></a></li>
    <li><a href="#pic3"><img alt="" src="small_nature3.jpg" /></a></li>
    <li><a href="#pic4"><img alt="" src="small_nature4.jpg" /></a></li>
    <li><a href="#pic5"><img alt="" src="small_nature5.jpg" /></a></li>
  </ul>
  <div id="full-picture">
    <div><a name="pic1"></a><img alt="" src="large_nature1.jpg" /></div>
    <div><a name="pic2"></a><img alt="" src="large_nature2.jpg" /></div>
    <div><a name="pic3"></a><img alt="" src="large_nature3.jpg" /></div>
    <div><a name="pic4"></a><img alt="" src="large_nature4.jpg" /></div>
    <div><a name="pic5"></a><img alt="" src="large_nature5.jpg" /></div>
  </div>
</div>

CSS:

#gallery {
  width: 600px;
  overflow: hidden;
  position: relative;
  z-index: 1;
  margin: 100px auto;
  border: 2px solid #003C72;
}

#navigation {
  list-style: none;
  padding: 0;
  margin: 0;
  float: left;
}

#navigation li {
  padding: 0;
  margin: 0;
  float: left;
  clear: both;
}

#navigation li a img {
  display: block;
  border: none;
}

#navigation li a {
  display: block;
}

#full-picture {
  width: 500px;
  height: 375px;
  overflow: hidden;
  float: left;
}

Font

Demo