If you want to download the source code then click here
Hello friends, now i am creating cool landing page design with hover effects using only html and csss. when user hover the image to scale or expand and coming up the text, and after hover out to hide text and image size is normal, all the hover effects using html, css only so easy to understand and implement to your project also i put the code below step by step eplain, scroll down to view. i have uploaded video tutorial on our learndesign youtube channel watch now.
Below I’ve added the structure of HTML. you can write and upderstand or you can copy to your file. i have added the link of google font. here you can see the basic css reset code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Creative Landing Page With Hover Effects Using Only HTML & CSS</title>
<link href="https://fonts.googleapis.com/css2?family=Italiana&display=swap" rel="stylesheet">
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none;
}
body{
font-family: 'Italiana', sans-serif;
background-color: #235764;
overflow: hidden;
}
</style>
</head>
<body>
</body>
</html>Below I have attached some html and css animation video tutoral link you can watch and learn more for this video.
You also might like this video
Pure CSS FadeIn FadeOut Animation – CSS Property #01
Pure CSS Bouncing Ball Animation #02
Square to Circle Rotate Loading Animation with Multiple Colors #03
Pure CSS Three Dots Loading Animation #04
Pure CSS Jumping Dots Loading Animation #05
Pure CSS Ripple Loading Animation Effect #06
Pure CSS Simple Loader Animation Effect #07
For more video something like amazing you can visit our learndesign youtube channel.
Landing page design with hover to show image and text using only html and css
If you like our videos visit our learndesign tutorial YouTube channel. You can use all of this code on your projects, school projects feel free. just copy the code and use it, also have a download option to download all the files, and images in one click.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Creative Landing Page With Hover Effects Using Only HTML & CSS</title>
<link href="https://fonts.googleapis.com/css2?family=Italiana&display=swap" rel="stylesheet">
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none;
}
body{
font-family: 'Italiana', sans-serif;
background-color: #235764;
overflow: hidden;
}
</style>
</head>
<body>
<main>
<header>
<div class="logo">
<img src="images/logo.png" alt="">
</div>
<div class="menu">
<div class="toggle">
<span></span><span></span><span></span>
</div>
</div>
</header>
<div class="content">
<div class="item">
<div class="text">
<h4>AJ</h4>
<h5>Amata Joanna</h5>
</div>
<img src="images/img1.png" alt="">
</div>
<div class="item">
<div class="text">
<h4>LS</h4>
<h5>Lishat Samara</h5>
</div>
<img src="images/img2.png" alt="">
</div>
<div class="item">
<div class="text">
<h4>AJ</h4>
<h5>Amata Joanna</h5>
</div>
<img src="images/img3.png" alt="">
</div>
<div class="item">
<div class="text">
<h4>AJ</h4>
<h5>Amata Joanna</h5>
</div>
<img src="images/img4.png" alt="">
</div>
<div class="item">
<div class="text">
<h4>AJ</h4>
<h5>Amata Joanna</h5>
</div>
<img src="images/img5.png" alt="">
</div>
<div class="item">
<div class="text">
<h4>AJ</h4>
<h5>Amata Joanna</h5>
</div>
<img src="images/img6.png" alt="">
</div>
</div>
</main>
</body>
</html>As you can see above HTML code. first i have created as always main tag and inside header tag and beside content div. first header tag for logo and navigation menu. i have put 6 item div becuase of i want only 6 images in display if you need more image you can add more item div and remove as your requirement. for all these item tag put inside content div. you can add multiple item div because we use css flex proerty and it is auto adjust multiple divs.
header{
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
width: 100%;
z-index: 99;
padding: 25px 100px;
background-color: rgba(0,0,0,0.1);
}
.menu .toggle{
width: 50px;
display: inline-block;
cursor: pointer;
}
.menu .toggle span{
width: 100%;
height: 2px;
display: inline-block;
float: left;
margin: 3px 0;
background-color: #fff;
transition: all ease 1s .1s;
}
.menu .toggle:hover span{
margin: 5px 0;
}
.content{
display: flex;
flex-wrap: nowrap;
height: 100vh;
}
.content .item{
position: relative;
width: 100%;
overflow: hidden;
transition: all ease 1s .1s;
}
.content .item img{
width: 100%;
height: 100vh;
object-fit: cover;
}
.content .item:hover{
width: 300%;
}
.content .item:hover .text{
bottom: 200px;
}
.content .item:hover .text h5{
opacity: 1;
}
.text{
position: absolute;
bottom: 150px;
left: 0;
right: 0;
text-align: center;
transition: all ease 1s .1s;
}
.text h4{
font-size: 150px;
color: #ffffff;
font-weight: normal;
}
.text h5{
font-size: 22px;
color: #fff;
font-weight: normal;
text-transform: uppercase;
opacity: 0;
transition: all ease 1s .1s;
}As you can see above the code, i have write first header tag code which is flex property use so that is adjust side by side logo and toggle menu. then content div. and I have used hover pseudo property which is use for item, and text. when user hover item div to increase width normal to 300% and shows the text bottom to 200px with smooth fadein effect. but one thing you don’t miss that is transition property i used in text class and h5 tag you can see above the code. 1 second is duration and 0.1 second is delay when you hover and transition effect is ease. thats all my friends just copy and past that code and enjoy no need any javascript or other libraries. Â
I hope you like this website, articles and video tutorial so thanks for watching our video. I have added the video tutorial on our youtube channel and you must have got to learn lot of new things. and if you like our work to share this website and our learndesign tutorial youtube channel. thanks for your valuable time.
