Make Pop Up Affect of Card Using JavaScripts | HTML And CSS | Coding With Roannie
Source Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
body{
margin: 0;
padding: 0;
background-color: #1750eb;
display: flex;
justify-content: center;
align-items: center;
border-radius: 10px;
min-height: 100vh;
}
section{
height: 300px;
width:350px;
background-color: #ffff;
color: black;
border-radius: 10px;
animation: animate 500ms linear ;
}
@keyframes animate {
0%{
width: 0px;
height: 0px;
}
100%{
transform:matrix3d(5deg);
}
}
.container{
padding: 10px ;
margin: 10px;
}
.item1{
text-align: center;
padding: 10px ;
margin: 30px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: medium;
font-weight: bold;
}
.item2{
text-align: center;
padding: 1px ;
margin: 2px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.item3{
text-align: center;
padding: 0px ;
margin: 0px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.btn{
position: absolute;
padding: 4px 4px 4px 4px ;
margin: 4px;
text-align: center;
background-color: #1750eb;
border-radius: 4px;
color: #ffff;
font-weight: 300;
cursor: pointer;
top: 60%;
left: 46%;
border: 2px solid #ffff;
font-size: large;
}
.x{
position: absolute;
top: 30%;
padding: 3px;
margin: 3px;
cursor: pointer;
left: 60%;
font-family: Arial, Helvetica, sans-serif;
font-size: large;
}
.show{
cursor: pointer;
background-color:#1750eb;
color:#1750eb;
border: 1px solid royalblue;
border-radius: 2px;
font-size: small;
padding: 4px 4px 4px 4px ;
margin: 4px;
text-align: center;
height: 10px;
width: 40px;
font-family: sans-serif;
position: absolute;
top: 70%;
left: 50%;
}
.show:hover{
color: black;
border: 2px solid white;
}
img{
float: right;
display: flex;
justify-content: center;
align-self: center;
outline: 3px double dodgerblue;
border-radius: 4px;
}
.btn:hover{
color:wheat;
background-color: rgb(34, 114, 243);
box-shadow: inset 4px 4px 4px solid #4d4c4e;
}
</style>
<body>
<div class="show" onclick="hide('block')">Show</div>
<section class="section">
<div class="x" onclick="hide('none')">X</div>
<div class="container">
<div class="item1">This Is The Pop Up Effect </div>
<img src="../Downloads/macOSBigSur.jpg" width="100px" alt="">
<div class="item2">Hey Guys I am Coder</div>
<div class="item3">Web Developer </div>
</div>
<button class="btn">Learn More</button>
</section>
<script>
function hide(anything){
let btn = document.querySelector(".section")
btn.style.display = anything
}
function show(anything){
let show = document.querySelector(".show")
btn.style.display = anything
}
</script>
</body>
</html>
Subscribe us on YouTube
Thanks for visiting