PenPocketNote: September 2019

Friday, 27 September 2019

Rain Effect in CSS

Take a look at how to make a raindrops on Background, using HTML and CSS.

Rain effect

Source Code:

<!Doctype html>
<html>
<head>
<title> Rain Effect</title>
<style>
*{
margin:0px;
padding:0px;
}
.maindiv{
width:100%;
height:100vh;
background-image:url("bg.jpg");
background-repeat:no-repeat;
background-size:100% 100%;
}
.main{
height:100vh;
background-image:url("rain.png");
animation:main .4s linear infinite;
}
@keyframes main{
from{
background-position:0% 0%;
}
to{
background-position: 40% 100%;
}
</style>
</head>
<body>
<div class="maindiv">
<div class="main">
</div>
</div>

</body>

Thursday, 26 September 2019

Zoom Effect in CSS

There are many different ways we can add a special effects to the web pages and one of them is adding a Zoom Effect on Images when user hovers over the images. That means Image on mouse hover then the Zoom effect Will come .

Zoom Effect in CSS

so here we are using transform: scale(1.5);

<!Doctype html>
<html>
<head>
<title> Zoom Effect </title>
<style>
body{
height: 100vh;
display:flex;
justify-content:center;
align-items:center;
background: #5d6e73;
}
div{
height : 300px;
width:500px;
border: 10px solid #fff;
overflow:hidden;
}
img{
height:100%;
width:100%;
transition: all 1s;
}
img:hover{
transform: scale(1.5);
}
</style>
</head>
<body>
<div>
<img src="1.jpg">
</div>
</body>

</html>

PenPocketNote

Friday, 27 September 2019

Rain Effect in CSS

Rain Effect in CSS

Thursday, 26 September 2019

Zoom Effect in CSS

Zoom Effect in CSS

SEO introduction

Followers

Report Abuse