Ever wanted to make your site more interactive with just some simple HTML and CSS? If so, this is the post for and
I will be explaining how to make an interactive card that uses flex and scale.
Firstly, let us set up the HTML.
<body>
<!--The card is a div itself and the div is comprised of subsections-->
<div class="card">
<!--Setting two divs allows us to use flex-->
<div class="img">
</div>
<div class="text">
</div>
</div>
</body>
Notice that the div has 2 other divs in it. This makes it easier to apply flex in them.
The CSS is relatively easy too!
.card {
height: 200px;
width: 400px;
}
Giving the card a width of 400px may also make to possible to put the cards side-by-side and flex-wrap can easily be used to wrap the other
cards for a more responsive feel.
Secondly, let us add the image.
<body>
<!--The card is a div itself and the div is comprised of subsections-->
<div class="card">
<!--Setting two divs allows us to use flex-->
<div class="img">
<img src="/Folder/img.png" alt="Vector Image" class="card-pics">
</div>
<div class="text">
</div>
</div>
</body>
To avoid size problems, set the preferred image sizes and in this case, I want an image height of 200px and a width of 175px.
.card-pics {
height: 200px;
width: 175px;
}
*Note
Instead of setting all the images to 200 x 150 I created a class for the cards because you may want to place
other images on your website and overriding each image can be a tedious task.
The third part involves the inclusion of text and the flex feature within the card class.
<div class="card">
<!--Setting two divs allows us to use flex-->
<div class="img">
<img src="/Folder/img.png" alt="Vector Image" class="card-pics">
</div>
<div class="text">
<h1 class="card-header">Lorem</h1>
<p class="card-para">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minima eveniet quisquam reiciendis eum vitae?</p>
</div>
</div>
.card {
height: 200px;
width: 400px;
display: flex;
}
The text is too close to the image.Let us give it some breathing space.
.text {
padding: 20px;
}
The fourth part includes border-radius. It works by rounding the corners you want rounded. If you enter four values, expect them to be set in a clockwise manner.
.card {
height: 200px;
width: 400px;
display: flex;
align-items: center;
background: #ddd;
border-radius: 30px 0 30px 0;
}
.card-pics {
position: relative;
border-radius: 30px 0 0 0;
height: 200px;
width: 175px;
}
So we now have everything set, what about the zoom in effect? The zoom-in event is triggered by an event. Events include :focus and :hover.
Scale helps increase the image size.
A common problem that people encounter here is that they often set their code in such a way that instead of triggering the image to grow on card:hover,
they set it on img:hover.
To avoid this we can say that when we hover on card, we want the image to grow. Check the code below.
.card:hover {
.card-pics {
scale: 1.05;
}
}
After following the above code, you may have noticed that the image is outgrowing it confines. The solution is simple. Since the image is within the card div, you can
easily set the can in such a way that it hides any overflow.
.card {
height: 200px;
width: 400px;
display: flex;
align-items: center;
background: #ddd;
border-radius: 30px 0 30px 0;
overflow: hidden;
}
Now that is taken care of, let us get a little bit fancy. Maybe some transitions.
When we hover, we want it to animate.
.card:hover {
.card-pics {
transition: all 300ms ease-out;
scale: 1.05;
}
}
The transition when we hover works but as soon as we leave, there is no animation. We can fix this by leaving another transition in the card-pics
but this time it will be an ease-in effect.
.card-pics {
position: relative;
border-radius: 30px 0 0 0;
height: 200px;
width: 175px;
transition: all 300ms ease-in;
}
This that we have a good looking card, we can use this concept to apply it to many different problems we encounter in
the CSS world. Have fun!
Top comments (0)