Hello everyone, I will give you all free code, about learning "HTML and CSS With Hover Effect NO JAVASCRIPT". Good luck, don't forget to keep learning and repeat until you can, happy coding and Spirit on.
this is my post for the previous one, you just have to learn it properly, and I will provide the latest updates about teaching web design quickly and easily
the best way is to always learn and practice directly, don't get hung up on confusing code, if you enter the wrong code, don't panic
This is the code HTML and CSS you need learn :
1. HTML
<!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>hover</title>
<script src="https://kit.fontawesome.com/0c13660f55.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="hero">
<div class="icon css">
<div class="btn css">CSS</div>
<span><i class="fab fa-css3-alt"></i></span>
</div>
<div class="icon html">
<div class="btn html">HTML</div>
<span><i class="fab fa-html5"></i></span>
</div>
<!----
<div class="icon js">
<div class="tooltip">Javascript</div>
<span><i class="fab fa-js"></i></span>
</div>
linear-gradient(315deg, #def8cb, #E0D98C)
.wrapper .js:hover span,
.wrapper .js:hover .tooltip{
background: #E5890A;
}
-->
</div>
</body>
</html>
2. CSS
* {
margin: 0; padding: 0;
list-style: none;
text-transform: capitalize;
box-sizing: border-box;
font-family: 'poppins', sans-serif;
text-decoration: none;
}
html,body {
height: 100%;
width: 100%;
display: grid;
place-items: center;
background: black;
background-size: cover;
}
.hero {
display: inline;
border: 2px solid #EEF2E6;
padding: 60px 4px;
border-radius: 10px;
}
.hero .icon {
margin: 0 20px;
padding: 5px;
align-items: center;
justify-content: center;
flex-direction: column;
position: relative;
z-index: 2;
cursor: pointer;
display: flex;
transition: all 0.4s cubic-bezier(0.68,-0.55,0.265,1.55);
}
.hero .icon span {
height: 60px;
width: 60px;
border-radius: 50%;
z-index: 2;
text-align: center;
font-size: 33px;
display: block;
background: #EEF2E6;
position: relative;
box-shadow: 0 10px 10px rgba(0,0,0,0.1);
line-height: 60px;
}
.hero .icon:hover span i {
color: #fff;
}
.hero .icon .btn {
position: absolute;
color: #fff;
top: 0px;
font-size: 20px;
padding: 10px 18px;
box-shadow: 0 10px 10px rgba(0,0,0,0.1);
opacity: 0;
pointer-events: none;
transition: all 0.4s cubic-bezier(0.68,-0.55,0.265,1.55);
}
.hero .icon:hover .btn {
top: 70px;
opacity: 1;
pointer-events: auto;
}
.hero .icon:hover .css {
top: -50px;
opacity: 1;
pointer-events: auto;
}
.hero .icon:hover span,
.hero .icon:hover .btn {
text-shadow: 0px -2px 0px rgba(0,0,0,0.4);
}
.hero .html:hover span{
background: #1C6758;
}
.hero .css:hover span{
background: #0F3460;
}
For more details, you can see the Video tutorial and Click link Channel below :
Don't forget to support my channel by comment, like and subscribe, success for all of us, happy world hereafter. Amin, Good Luck. 😀
Belum ada tanggapan untuk "HTML and CSS With Hover Effect NO JAVASCRIPT"
Post a Comment