খুব সহজে CSS দিয়ে  Image Pop  up

খুব সহজে CSS দিয়ে Image Pop up

Capture

আজ আমরা শিখব কিভাবে CSS দিয়ে  Image Pop up করা যায়……………………………

<html>
<meta charset=”utf-8″ />

<head>

<title>CSS POPUP IMAGE</title>
<style>
#box
{
width:800px;
top:20%;
position:relative;

height:100px ;
//overflow:auto;
margin: 0 auto;

}
#popup
{
width:500px;
height:300px;;
border:1px solid white;
background-color:white;
top:20%;
position:relative;
margin: 0 auto;
background: rgb(247, 247, 247);
border: 1px solid rgba(147, 184, 189,0.8);
-webkit-box-shadow: 0pt 2px 5px rgba(105, 108, 109,  0.7),    0px 0px 8px 5px rgba(208, 223, 226, 0.4) inset;
-moz-box-shadow: 0pt 2px 5px rgba(105, 108, 109,  0.7),    0px 0px 8px 5px rgba(208, 223, 226, 0.4) inset;
box-shadow: 0pt 2px 5px rgba(105, 108, 109,  0.7),    0px 0px 8px 5px rgba(208, 223, 226, 0.4) inset;
-webkit-box-shadow: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
opacity:1;

}

#overlay_gallary
{
position:absolute;
top:0px;
visibility:hidden;
background-color:black;
opacity:1;
left:0px;
height:100%;
width:100%;
text-align:center;
}
#overlay_gallary:target
{
visibility:visible;
-webkit-animation: fade 400ms ease;
}
#overlay_gallary:target > #popup
{

-webkit-animation: moveFromBottom 400ms ease;
}

.close_button
{
position:absolute;
right:1px;
cursor:pointer;
border:none;
margin-top:-30px;
}

</style>

</head>
<body>
<div id=”box”>
<center><h1>CSS POPUP IMAGE DEMO</h1><br>
<a href=”#overlay_gallary”><img src=”http://www.webtuts.info/wp-content/uploads/2012/12/YOUTUBE.png”  height=”100″/></a>
</center>
</div>
<div id=”overlay_gallary”>
<div id=”popup” style=”height:200px;width:600px;padding:10px;”>
<a href=””><img class=”close_button” src=”https://cdn3.iconfinder.com/data/icons/interface/100/close_button-128.png”/></a>
<!– ANY CONTENTS –>
<img src=”http://www.webtuts.info/wp-content/uploads/2012/12/YOUTUBE.png”/>

</div>
</div>

</body>
</html>

পরবর্তীতে আমরা শিখব কিভাবে CSS দিয়ে form pop up করা যায়। ধন্যবাদ………………………

About Nure Jannat

একটি উত্তর দিন