Pop Up HTML Image when clicked

问题

Hi so I have a few pictures on a website that im creating (Please not im learning as I go along). I would like users to be able to click the image and view a full a pop up of the image, so like the original size of the actual image, I have added the code for the pictures below.

<section id="main">
          <div class="inner">
            <section>

<div class="box alt">
      <div class="row 50% uniform">

                              <div class="4u"><span class="image fit"><img 
src="images/marble/1.jpg" width="321" height="230" alt="" /><h3>Marble</h3>
</span></div>

                                <div class="4u"><span class="image fit"><img 
src="images/marble/2.jpg" width="321" height="230" alt="" /><h3>Marble</h3>
</span></div>
                                <div class="4u"><span class="image fit"><img 
src="images/marble/3.jpg" width="321" height="230" alt="" /><h3>Marble</h3>
</span></div>

    </div>
              </div>
</section>

            </div>
        </section>

Hover:

.image.fit >img:hover {
            width: 1000px;
            height: 1000px;
            position: absolute;
        }

回答1:

The span elements should be completely removed and its classes placed on the image elements themselves.

Also, you have a nested section element that isn't doing anything for you.

Lastly, do not use HTML heading elements (<h1>...<h6>) because of the way they style the text. Formatting is the job of CSS. Instead of headings, it is more appropriate to surround each image and its accompanying text with figure and figcaption elements.

img { 
  width:200px;
  border:1px solid black; /* This is only added for testing purposes*/
}

.thumbnail:hover {
   width: 500px;
   height:auto;
   position:relative;
   /* push image to the right by 1/2 the screen width and 1/2 the image width */
   margin-left:calc(50% - 250px);
}

<section id="main">
  <div class="inner">
    <div class="box alt">
      <div class="row 50% uniform">
         <div class="4u">
           <figure>
             <img src="https://pbs.twimg.com/profile_images/562466745340817408/_nIu8KHX.jpeg" alt="" class="thumbnail">
             <figcaption>Marble</figcaption>
           </figure>
         </div>

         <div class="4u">
           <figure>
             <img src="http://www.critterbabies.com/wp-content/gallery/kittens/cats-animals-kittens-background-us.jpg" alt="" class="thumbnail">
             <figcaption>Marble</figcaption>
           </figure>
         </div>
         
         <div class="4u">
           <figure>
             <img src="http://www.warrenphotographic.co.uk/photography/bigs/08482-Fluffy-ginger-female-kitten.jpg" alt="" class="thumbnail">
             <figcaption>Marble</figcaption>
           </figure>
         </div>
         
       </div>
     </div>
   </div>
 </section>

回答2:

To do this function you need to learn some of Javascript or jquery

I think the below code will meet what you need

<html>
<head>
<meta charset="utf-8"/>
<script>
function show_img(obj) {
    var img_src = obj.getAttribute("src");
    document.getElementById("full_screen").style.display = "block";
    document.getElementById("img_explore").innerHTML = "<img src="+img_src+">";
}
</script>
</head>
<body>
<style>
#full_screen {position:fixed; display:none; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.6);}
#full_screen img {position:absolute; width:100%; height:100%;}
#close {position:absolute; background:rgba(0,0,0,0.6); width:100%; text-align:right; color:#fff; z-index:10;}
        </style>
<div id="full_screen">
<div id="close" onclick="document.getElementById('full_screen').style.display = 'none';">Close</div>
<div id="img_explore"></div>
</div>
<section id="main">
          <div class="inner">
            <section>

<div class="box alt">
      <div class="row 50% uniform">

                              <div class="4u"><span class="image fit"><img 
src="editor-photo-landing-image-v1.jpg" width="321" height="230" alt="" onclick="show_img(this)"/><h3>Marble</h3>
</span></div>

                                <div class="4u"><span class="image fit"><img 
src="food-restaurant-kitchen-meat-23086.jpg" width="321" height="230" alt="" onclick="show_img(this)"/><h3>Marble</h3>
</span></div>
                                <div class="4u"><span class="image fit"><img 
src="pexels-photo-167890.jpeg" width="321" height="230" alt="" onclick="show_img(this)"/><h3>Marble</h3>
</span></div>

    </div>
              </div>
</section>

            </div>
        </section>
</body>
</html>

回答3:

I've taken Scott Marcus' answer and adapted to click, which was your original request.

The main diffence is the addition of a tags targeting elements on the page and using :target in the css.

img { 
  width:200px;
  border:1px solid black; /* This is only added for testing purposes*/
}

.thumbnail:target {
   width: 500px;
   height:auto;
   position:relative;
   /* push image to the right by 1/2 the screen width and 1/2 the image width */
   margin-left:calc(50% - 250px);
}

<section id="main">
  <div class="inner">
    <div class="box alt">
      <div class="row 50% uniform">
         <div class="4u">
           <figure>
             <a href="#image1">
             <img src="https://pbs.twimg.com/profile_images/562466745340817408/_nIu8KHX.jpeg" alt="" class="thumbnail" id="image1">
             </a>
             <figcaption>Marble</figcaption>
           </figure>
         </div>

         <div class="4u">
           <figure>
             <a href="#image2">
             <img src="http://www.critterbabies.com/wp-content/gallery/kittens/cats-animals-kittens-background-us.jpg" alt="" class="thumbnail" id="image2">
             </a>
             <figcaption>Marble</figcaption>
           </figure>
         </div>
         
         <div class="4u">
           <figure>
             <a href="#image3">
             <img src="http://www.warrenphotographic.co.uk/photography/bigs/08482-Fluffy-ginger-female-kitten.jpg" alt="" class="thumbnail" id="image3">
             </a>
             <figcaption>Marble</figcaption>
           </figure>
         </div>
         
       </div>
     </div>
   </div>
 </section>

来源：https://stackoverflow.com/questions/45045598/pop-up-html-image-when-clicked

标签

javascript

html

css