Rajneesh Tutorial
Amazing Hover design
By html and css only
By Rajneesh
3th June, 2020
Introduction
Do you want to make a amazing hover design !
Here it is
What special in it
You can write anything in it. It is editabel.
See that video
Code
Html
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<style>
--css style goes here--
</style>
</head>
<body>
<div>
<ul>
<li class="a">
<spam>
</spam>
<spam>
</spam>
<spam>
</spam>
<spam>
</spam>
<spam>
<b contenteditable="true">Rajneesh</b>
</spam> </li>
</ul>
</div>
</body>
</html>
CSS
body{
background: rgb(200,0,100);
display: flex;
align-items:center ;
//justify-content: center;//
}
ul{
width: 100%;
//border:1px solid blue;
}
li{
//border:1px solid green;
margin: 0px;
list-style: none;
font-size: 30px;
width: 200px;
height: 100px;
display: inline-block;
margin-right: 60px;
transform: rotate(-36deg) translate3d(0px,0px,0px) skew(20deg);
}
li spam{
position: absolute ;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background: #000;
color: white;
display: flex;
align-items:center ;
justify-content: center;
box-sizing: border-box;
transition: 0.7s;
border-radius: 10px 50px;
//box-shadow: -1px 1px 1px rgba(0,0,0.2);
}
.a spam{
background: linear-gradient(45deg,rgb(255,0,255),rgb(255,0,0));
}
li spam:hover{
box-shadow: -1px 1px 1px rgba(0,0,0.2);
}
li:hover spam:nth-child(5){
transform: translate(50px,-50px);
}
li:hover spam:nth-child(4){
transform: translate(40px,-40px);
opacity: .8;
}
li:hover spam:nth-child(3){
transform: translate(30px,-30px);
opacity: .6;
}
li:hover spam:nth-child(2){
transform: translate(20px,-20px);
opacity: .4;
}
li:hover spam:nth-child(1){
transform: translate(10px,-10px);
opacity: .2;
}
View our previous post
How to run this code
To run this code there are some simple steps
Copy code
Make a file index.html
Paste code and save file
Open file in browser
Next topic on amazing clock design with html css only:
Example
Thanks to see our blog
Follow me to get more like this
© Rajneesh Tutorials
Facebook id Rajneesh
Website Rajneesh home
Facebook page Rajneesh Tutorials
Blog Top 10s
Blog Rajneesh Tutorials
Comments
Post a Comment