stackoom
  简体   繁体   中英

How do I display modal images with hover effect captions?

 原文  2020-04-13 19:19:45  1   2    javascript/ html/ css/ modal-dialog/ hover

Question

I have a responsive image grid, which is working fine and i am happy with.

Now i would like to add hover effects to the images so that a white semi-transparent filter is applied and text appears over the images with further details on the image. I would also like the images to be modal and popup when clicked on.

It seems when i apply the hover effects the popup image stops working. Can anybody tell me what is going wrong? NOTE: I'm aware that hover effects have not been applied to all the images. This is because i didnt bother when i realised it wasnt functioning. 

 var modalEle = document.querySelector(".modal"); var modalImage = document.querySelector(".modalImage"); Array.from(document.querySelectorAll(".ImgThumbnail")).forEach(item => { item.addEventListener("click", event => { modalEle.style.display = "block"; modalImage.src = event.target.src; }); }); document.querySelector(".close").addEventListener("click", () => { modalEle.style.display = "none"; });
 img { border: 2px solid; min-height: 100px; min-width: 100px; } body { max-width: 1024px; margin-left: auto; margin-right: auto; font-family: verdana } /*MAIN*/ main { margin: 200px 0 100px 0; height: auto; max-width: 1024px; color: #66704D; letter-spacing: 3px; }.row { display: flex; flex-wrap: wrap; padding: 0 4px 4px 2%; }.column { flex: 31.3%; max-width: 31.3%; padding: 0 4px; }.column img { margin-top: 8px; vertical-align: middle; width: 100%; } /*overlay*/.container { position: relative; width: 100%; }.ImgThumbnail { display: block; width: 100%; height: auto; }.overlay { position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 100%; width: 100%; opacity: 0; transition: .5s ease; background-color: rgba(255,255,255,0.9); }.container:hover.overlay { opacity: 1; }.text { color: #66704d; font-size: 20px; letter-spacing: 5px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center; } /*modal*/.ImgThumbnail { cursor: pointer; transition: 0.3s; }.modal { display: none; position: fixed; z-index: 1; padding-top: 100px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(255, 255, 255,0.85); }.modalImage { margin: auto; display: block; width: 100%; height: auto; max-width: 1024px; }.close { position: absolute; top: 15px; right: 35px; color: #66704d; font-size: 40px; font-weight: bold; transition: 0.3s; }.close:hover, .close:focus { cursor: pointer; } @media only screen and (max-width: 700px) {.modalImage { width: 100%; } } /*Tablet*/ @media (max-width:768px) {.column { flex: 47%; max-width: 47%; } /*Mobile*/ @media (max-width:400px) {.column { flex: 100%; max-width: 100%; } }
 <html> <body> <.--MAIN CONTENT--> <main> <div class="row"> <div class="column"> <div class="container"> <img class="ImgThumbnail" src="images/Painting/Oranges in Berlin.jpg" alt=""> <div class="overlay"> <div class="text">caption content</div> </div> </div> <img class="ImgThumbnail" src="images/Painting/Bread Rolls.jpeg" alt=""> <img class="ImgThumbnail" src="images/Painting/the Market.jpg" alt=""> <img class="ImgThumbnail" src="images/Painting/Life Drawing with card.jpg" alt=""> <img class="ImgThumbnail" src="images/Painting/Copy of The Carrofs IV.jpg" alt=""> <img class="ImgThumbnail" src="images/Painting/The Carrofs I,JPG" alt=""> <img class="ImgThumbnail" src="images/Painting/The Trig. from memory.jpg" alt=""> <img class="ImgThumbnail" src="images/Painting/The Beacon.jpg" alt=""> <img class="ImgThumbnail" src="images/Painting/Farm on the Hill.jpg" alt=""> <img class="ImgThumbnail" src="images/Painting/Terrace Sunlight.jpg" alt=""> <img class="ImgThumbnail" src="images/Painting/Across the Road.jpg" alt=""> <img class="ImgThumbnail" src="images/Painting/Back Lane I.jpg" alt=""> </div> <div class="column"> <img class="ImgThumbnail" src="images/Painting/Cloud Study.jpg" alt=""> <img class="ImgThumbnail" src="images/Painting/ London Bodies.jpg" alt=""> <img class="ImgThumbnail" src="images/Painting/The Cloud.jpg" alt=""> <img class="ImgThumbnail" src="images/Painting/Life Drawing II.jpg" alt=""> <img class="ImgThumbnail" src="images/Painting/Copy of The Carrofs III.jpg" alt=""> <img class="ImgThumbnail" src="images/Painting/The cow Field,jpg" alt=""> <img class="ImgThumbnail" src="images/Painting/Bridal Veil. from memory.jpg" alt=""> <img class="ImgThumbnail" src="images/Painting/The Sheep_s Pool.jpg" alt=""> <img class="ImgThumbnail" src="images/Painting/Bunyan_s Valley.jpg" alt=""> <img class="ImgThumbnail" src="images/Painting/Terrace Sunlight Study II.jpg" alt=""> <img class="ImgThumbnail" src="images/Painting/The Back Lane.jpg" alt=""> </div> <div class="column"> <img class="ImgThumbnail" src="images/Painting/Maria_s House.jpg" alt=""> <img class="ImgThumbnail" src="images/Painting/on The Tube.jpg" alt=""> <img class="ImgThumbnail" src="images/Painting/Ben.jpg" alt=""> <img class="ImgThumbnail" src="images/Painting/Life Drawing I.jpg" alt=""> <img class="ImgThumbnail" src="images/Painting/The Carrofs II.JPG" alt=""> <img class="ImgThumbnail" src="images/Painting/Aotea Harbor.jpg" alt=""> <img class="ImgThumbnail" src="images/Painting/Aotea from description I.jpg" alt=""> <img class="ImgThumbnail" src="images/Painting/The Valley.jpg" alt=""> <img class="ImgThumbnail" src="images/Painting/Bunyans Oak.jpg" alt=""> <img class="ImgThumbnail" src="images/Painting/Terrace Sunlight Study I.jpg" alt=""> <img class="ImgThumbnail" src="images/Painting/Back Lane II.jpg" alt=""> </div> </div> <div class="modal"> <span class="close">×</span> <img class="modalImage" id="img01"> </div> </main> </body> </html>

2 answers

solution1
 1 ACCPTED  2020-04-13 20:16:32

Welcome to the forum:)

It sounds like when the cursor is hovering over your image, the hover state is essentially layered on top of your clickable image element and therefore blocking the user from clicking it and activating the pop-up modal. Try adding your listener to your hover state element as well, or grouping the caption with the image so they can both be clicked on. I've paired down your example for this snippet below.

Cheers! 

 var modalEle = document.querySelector(".modal"); var modalImage = document.querySelector(".modalImage"); Array.from(document.querySelectorAll(".overlay")).forEach(item => { item.addEventListener("click", event => { modalEle.style.display = "block"; modalImage.src = event.target.parentNode.querySelector(".ImgThumbnail").src; }); }); document.querySelector(".close").addEventListener("click", () => { modalEle.style.display = "none"; });
 body { color: #66704D; letter-spacing: 3px; } /*overlay*/.container { position: relative; width: 300px; height: 200px; }.ImgThumbnail { display: block; width: 100%; height: auto; }.overlay { position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 100%; width: 100%; opacity: 0; transition: .5s ease; background-color: rgba(255, 255, 255, 0.9); }.container:hover.overlay { opacity: 1; }.text { color: #66704d; font-size: 20px; letter-spacing: 5px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center; } /*modal*/.ImgThumbnail { cursor: pointer; transition: 0.3s; }.modal { display: none; position: fixed; z-index: 1; padding-top: 100px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(255, 255, 255, 0.85); }.modalImage { margin: 0 auto; display: block; width: 80%; height: auto; max-width: 1024px; }.close { position: absolute; top: 15px; right: 35px; color: #66704d; font-size: 40px; font-weight: bold; transition: 0.3s; }.close:hover, .close:focus { cursor: pointer; } @media only screen and (max-width: 700px) {.modalImage { width: 100%; } }
 <div class="container"> <div class="imgGroup"> <img class="ImgThumbnail" src="https://placehold.it/300x200" alt=""> <div class="overlay"> <div class="text">caption content</div> </div> </div> </div> <div class="modal"> <span class="close">×</span> <img class="modalImage" id="img01"> </div>

solution2
 0  2020-04-13 19:52:33

Check out demo: https://codepen.io/turibamwe/pen/xxwGozx

use this javascript:

<script>
var modalEle = document.querySelector(".modal");
var modalImage = document.querySelector(".modalImage");
Array.from(document.querySelectorAll(".ImgThumbnail + .overlay")).forEach(item => {
  var itemImage = item.parentNode.firstElementChild.getAttribute("src");
   item.addEventListener("click", event => {
      modalEle.style.display = "block";
      modalImage.src = itemImage//event.target.src;
   });
});
document.querySelector(".close").addEventListener("click", () => {
   modalEle.style.display = "none";
});
</script>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question How to get hover captions on images in Ishimoto how can i do this jquery hover effect? How to apply hover effect on images? How do i do this with hover effect with javascript/jquery? How do I do the image mouse hover effect? How do i mask images on hover? How do I disable hover effect for a particular element inside a div? How do i re-enable link hover effect How do I achieve a hover over image effect? How do I remove a hover effect if the Element has focus?
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM