CSS Hover Effect

October 23, 2019

CSS Hover Effect Source Code

Download Pdf:-> Click here

Coding

<html>
<head>
<style>

.fond{
position:absolute;
padding-top:85px;
top:0;
left:0;
right:0;
bottom:0;
background: radial-gradient( circle farthest-corner at 10% 20%, rgba(233,122,129,1) 0%, rgba(181,64,149,1) 100.2% );
}

.div1{
   display:inline-block;
   border:0;
   width:196px;
   height:210px;
   position: relative;
transition: all 200ms ease-in;
transform: scale(1);
}

.div1:hover{
box-shadow: 0px 0px 150px #000000;
z-index: 2;
   transition: all 200ms ease-in;
   transform: scale(1.5);
}
</style>
</head>
<body>
<div align="center" class="fond">

<div style="width:1000px;">

<div class="div1" style="background-image: radial-gradient( circle farthest-corner at 10% 20%, rgba(102,116,236,1) 0%, rgba(50,231,219,1) 90% );"></div>

<div class="div1" style="background-image: linear-gradient( 75.1deg, rgba(207,89,24,1) 26.5%, rgba(246,203,90,1) 93.7% );"></div>

<div class="div1" style="background-image: linear-gradient( 109.6deg, rgba(216,23,100,1) 27.3%, rgba(63,48,48,1) 100.2% );"></div>

<div class="div1" style="background-image: linear-gradient( 109.6deg, rgba(83,5,5,1) 11.2%, rgba(0,0,0,1) 91.1% );"></div>

<div class="div1" style="background-image: radial-gradient( circle farthest-corner at 2.4% 35.1%, rgba(129,211,225,1) 0%, rgba(239,145,236,1) 90% );"></div>

</div>
</div>
</body>
</html>

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)