Modern Web
Posted on May 6, 2021
Demo
I suggest you to view this demo in full new window view. yeah it's not responsive but you can make it. Click on the top right most button to view full new window.
Video tutorial : )
If you found this tutorial useful then show your support by subscribing my youtube channel and following me.
Let see how to code this -
first make a two files index.html and style.css. Then write the basic HTML structure also link css file to index.html.
Now create a <div> with class .card and inside that create a <div> with class .design-elements that will hold our all styling spans. Now create a <div> inside of that make four <span> with same class .dot and then outside this div but inside .design-element create another <div> and inside of that make four <span> also with class name .lines.
Done we will add our content later. This should look like this.
<div class="card">
<!-- designing element -->
<div class="design-elements">
<div>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
<div>
<span class="lines"></span>
<span class="lines"></span>
<span class="lines"></span>
<span class="lines"></span>
</div>
</div>
</div>
Now let's style these. So add this to your stylesheet.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
width: 100%;
height: 100vh;
display: flex;
justify-content: space-evenly;
align-items: center;
overflow: hidden;
background: rgb(44, 44, 44);
}
.card{
width: 300px;
height: 450px;
position: relative;
background-image: url(img1.jpg);
background-size: cover;
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
transition: .5s;
}
.design-elements{
position: absolute;
width: 95%;
height: 97%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: .5s;
}
.dot{
position: absolute;
width: 30px;
height: 30px;
border-radius: 50%;
background: #ff5050;
transform: scale(0);
}
.dot:nth-child(1){
top: -15px;
left: -15px;
}
.dot:nth-child(2){
top: -15px;
right: -15px;
}
.dot:nth-child(3){
bottom: -15px;
right: -15px;
}
.dot:nth-child(4){
bottom: -15px;
left: -15px;
}
.card:hover .dot{
transform: scale(1);
transition: 1s;
}
.card:hover .dot:nth-child(2){
transition-delay: .3s;
}
.card:hover .dot:nth-child(3){
transition-delay: .6s;
}
.card:hover .dot:nth-child(4){
transition-delay: .9s;
}
.lines{
position: absolute;
background: #fff;
z-index: -1;
transform: scale(0);
}
.lines:nth-child(1){
width: 3px;
height: 100%;
transform-origin: top;
top: 0;
left: 0;
}
.lines:nth-child(2){
width: 100%;
height: 3px;
transform-origin: left;
bottom: 0;
left: 0;
}
.lines:nth-child(3){
width: 3px;
height: 100%;
transform-origin: bottom;
right: 0;
bottom: 0;
}
.lines:nth-child(4){
width: 100%;
height: 3px;
transform-origin: right;
top: 0;
right: 0;
}
.card:hover .lines{
transform: scale(1);
transition: 1s;
transition-delay: 1.5s;
}
.card:hover{
transform: translateY(-10px);
box-shadow: 0 20px 20px rgba(0, 0, 0, 0.4);
}
.card:hover .design-elements{
background: #fff;
transform: translate(-50%, -50%) rotate(-5deg);
transition-delay: 2.5s;
}
.card-content{
padding: 40px;
position: relative;
color: #2f2f2f;
font-family: roboto, sans-serif;
text-align: center;
opacity: 0;
}
what we did till we did almost everything : ). this styles are just setting up .card width and heights and some other properties and then we are styling .dot here where we set their width and height with border-radius. after that we select each .dot element with :nth-child selector and gave different top, left, right, bottom values to properly position them to the corners. After that we are styling out .lines where we set each element different width and height with different top left right bottom values to properly align them to the edges. and at last we made .dot and .lines scale to 0 and setting their scale back to 1 whenever .card is being hover.
Now let's add content to out card. So inside .card element in index.html file but outside of .design-elements add a <div> with class .card-content and inside of that add <h1> and <p> and write in whatever you want.After this our card structure should look like this.
<div class="card">
<!-- designing element -->
<div class="design-elements">
<div>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
<div>
<span class="lines"></span>
<span class="lines"></span>
<span class="lines"></span>
<span class="lines"></span>
</div>
</div>
<div class="card-content">
<h1 class="title">card 1</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus quae expedita ab sint nemo animi amet numquam nostrum quos tempora.</p>
</div>
</div>
then just copy the structure for 2 more time to make 3 cards in total and just add some basic style again.
.card:nth-child(2){
background-image: url(img2.jpg);
}
.card:nth-child(3){
background-image: url(img3.jpg);
}
.card-content{
padding: 40px;
position: relative;
color: #2f2f2f;
font-family: roboto, sans-serif;
text-align: center;
opacity: 0;
}
.card:hover .card-content{
opacity: 1;
transition: .5s;
transition-delay: 3s;
}
.title{
font-size: 60px;
text-transform: capitalize;
margin-bottom: 30px;
}
p{
font-size: 18px
}
So what this style do this will set different images to each cards and some little bit of style to its content.
We are done we made this card hover effect. I hope you like it. If you find any mistake I made feel free to tell me in comment section.
Thanks for visiting : )
Posted on May 6, 2021
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
