Practice hover

Developer
Esambino Wei Cheng Hsieh
Size
1,919 Kb
Views
10,120
  1. Practice hover Previews
  2. Practice hover HTML Codes
  3. Practice hover CSS Codes

How do I make an practice hover?

What is a practice hover? How do you make a practice hover? This script and codes were developed by Esambino Wei Cheng Hsieh on 07 January 2023, Saturday.

Practice hover Previews
IQ Test

Practice hover - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>practice hover</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="icon"> <div class="hover-circle">></div> <div class="mask"></div> <div class="circle1"></div> <div class="circle2"></div> <div class="circle3"></div>
</div>
</body>
</html>

Practice hover - Script Codes CSS Codes

body,html { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; font-family: monospace; background-color: #000; min-height: 900px;
}
.icon { position: relative; margin: 0 auto; width: 600px; height: 300px; margin-top: 10px;
}
.circle1,
.circle2,
.circle3 { width: 10px; height: 10px; position: absolute; background-color: #00aced; border: 4px solid #00aced; border-radius: 50%; top: 130px; left: 295px; z-index: 2;
}
.circle2 { background-color: #21c2ff; z-index: 1;
}
.circle3 { background-color: #54d0ff; z-index: 0;
}
.mask { position: relative; z-index: 9; background: transparent url("https://2.bp.blogspot.com/-Qhlx5Qctr4Q/UhywN1nseLI/AAAAAAAAA6Q/L4Rvkw0HVyY/s1600/esam_logo.png") no-repeat center center; width: 600px; height: 300px; display: none;
}
.hover-circle { width: 300px; height: 50px; position: absolute; top: 130px; left: 300px; z-index: 10; overflow: hidden; cursor: pointer;
}
.hover-circle:hover { width: 400px; height: 200px; top: 50px; left: 50px;
}
.hover-circle:hover ~ .mask { display: block;
}
.hover-circle:hover ~ .circle1,
.hover-circle:hover ~ .circle2,
.hover-circle:hover ~ .circle3 { width: 500px; height: 250px; top: 20px; left: 45px;
}
.hover-circle:hover ~ .circle1 { -webkit-transition: all 6s ease-out; -moz-transition: all 6s ease-out; -ms-transition: all 6s ease-out; -o-transition: all 6s ease-out;
}
.hover-circle:hover ~ .circle2 { -webkit-transition: all 4s ease-out; -moz-transition: all 4s ease-out; -ms-transition: all 4s ease-out; -o-transition: all 4s ease-out;
}
.hover-circle:hover ~ .circle3 { -webkit-transition: all 2s ease-out; -moz-transition: all 2s ease-out; -ms-transition: all 2s ease-out; -o-transition: all 2s ease-out;
}
Practice hover - Script Codes
Practice hover - Script Codes
Home Page Home
Developer Esambino Wei Cheng Hsieh
Username Esambino
Uploaded January 07, 2023
Rating 3
Size 1,919 Kb
Views 10,120
Do you need developer help for Practice hover?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Esambino Wei Cheng Hsieh (Esambino) Script Codes
Name
CSS3 Slider Practice
Blank
Present Box
My first gsap
Cafe Lakulaku
Colorful card
My three.js practice
Gdf
Svg effect practice
Tribute to Rorschach
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!