Create interactive grid with CSS

Asked

Viewed 258 times

1

I wanted to create a grid interactive where when the person clicked on the image this same one appeared large beside, 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>

That when clicking on one of the thumbnail images this image would appear in place of imgGrande

javascript html css css3

  • Okay, what is your level of knowledge in HTML, Javascript and CSS? Can you describe what you have tried? You can [Edit] the question and add the HTML structure at least. If you have JS and CSS, search to make a [mcve] and you can use the snippet to execute it (button </> question editor). For more information, read the [Ask] guide and do the [tour] to understand how the community works.

  • My level of knowledge is basic, I am starting in this area I have not yet done anything in Java and css for this question, only the structure in html

2 answers

3

  • I liked that example. thanks.

1


There is a way to do this without needing to Javascript.

In this example below replace the images small by miniature and large by the big image.

To div large images is adjusted to 500x375 pixels, so if using images of different sizes should 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;
}

Source

Demonstration

  • 1

    Thank you so much is exactly what I wanted.

Browser other questions tagged javascript html css css3

You are not signed in. Login or sign up in order to post.