Today, We want to share with you how to make a pop up image in html?.In this post we will show you image popup, hear for As Simple As It Gets CSS Popup Image we will give you demo and example for implement.In this post, we will learn about How To Create Modal Images with an example.
How to show an image in a pop-up window?
index.html
<!DOCTYPE html>
<html>
<head>
<style>
.popup{
width: 900px;
margin: auto;
text-align: center
}
.popup img{
width: 200px;
height: 200px;
cursor: pointer
}
.show{
z-index: 999;
display: none;
}
.show .overlay{
width: 100%;
height: 100%;
background: rgba(0,0,0,.66);
position: absolute;
top: 0;
left: 0;
}
.show .img-show{
width: 600px;
height: 400px;
background: #FFF;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
overflow: hidden
}
.img-show span{
position: absolute;
top: 10px;
right: 10px;
z-index: 99;
cursor: pointer;
}
.img-show img{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function () {
"use strict";
$(".popup img").click(function () {
var $src = $(this).attr("src");
$(".show").fadeIn();
$(".img-show img").attr("src", $src);
});
$("span, .overlay").click(function () {
$(".show").fadeOut();
});
});
</script>
</head>
<body>
<div class="popup">
<img src="http://images.entertainment.ie/images_content/rectangle/620x372/success-kid.jpg">
<img src="https://pbs.twimg.com/media/CX1PAZwVAAANemW.jpg">
<img src="http://images5.fanpop.com/image/photos/30900000/beautiful-pic-different-beautiful-pictures-30958249-1600-1200.jpg">
</div>
<div class="show">
<div class="overlay"></div>
<div class="img-show">
<span>X</span>
<img src="">
</div>
</div>
</body>
</html>
As Simple As It Gets CSS Popup Image
index.html
<!DOCTYPE HTML><html><head><meta charset="UTF-8">
<title>As Simple As It Gets CSS Popup Image Demo 1</title>
<style type="text/css">
#cartwrap {
position:relative;
width:252px;
height:252px;
}
.cart img {
border:1px solid #000;
margin:3px;
float:left;
}
.cart span {
position:absolute;
visibility:hidden;
}
.cart:hover, .cart:hover span {
visibility:visible;
top:0;
left:250px;
z-index:1;
}
</style>
</head>
<body>
<h2>As Simple As It Gets CSS Popup Image</h2>
<div id="cartwrap">
<a class="cart" href="#"><img src="../media/tamilrokers-new-link1.jpg" alt=""><span><img src="../media/tamilrokers-new-link1big.jpg" alt=""></span></a>
<a class="cart" href="#"><img src="../media/tamilrokers-new-link2.jpg" alt=""><span><img src="../media/tamilrokers-new-link2big.jpg" alt=""></span></a>
<a class="cart" href="#"><img src="../media/tamilrokers-new-link1.jpg" alt=""><span><img src="../media/tamilrokers-new-link1big.jpg" alt=""></span></a>
<a class="cart" href="#"><img src="../media/tamilrokers-new-link2.jpg" alt=""><span><img src="../media/tamilrokers-new-link2big.jpg" alt=""></span></a>
<a class="cart" href="#"><img src="../media/tamilrokers-new-link1.jpg" alt=""><span><img src="../media/tamilrokers-new-link1big.jpg" alt=""></span></a>
<a class="cart" href="#"><img src="../media/tamilrokers-new-link2.jpg" alt=""><span><img src="../media/tamilrokers-new-link2big.jpg" alt=""></span></a>
<a class="cart" href="#"><img src="../media/tamilrokers-new-link1.jpg" alt=""><span><img src="../media/tamilrokers-new-link1big.jpg" alt=""></span></a>
<a class="cart" href="#"><img src="../media/tamilrokers-new-link2.jpg" alt=""><span><img src="../media/tamilrokers-new-link2big.jpg" alt=""></span></a>
<a class="cart" href="#"><img src="../media/tamilrokers-new-link1.jpg" alt=""><span><img src="../media/tamilrokers-new-link1big.jpg" alt=""></span></a>
</div>
</body>
</html>
I hope you get an idea about onclick image popup jquery(how to make a pop up image in html?).
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.