RPG Styles Card with Hover Effect – HTML/CSS


hello and welcome to red stapler channel
in this tutorial I’m going to show you how to create a card design to show each
post statistic for your website in just a few minutes with CSS ready let’s check
it out here is the example page that we are going to work on I already set the
suitable background image and flex layout for center alignment so let’s
start with a card structure the card will have three sections image text and
stats I will put some content into the text
section now let’s use the grid layout to
allocate the space for each section also set the font background color by
the radius and box-shadow then assign each section into the grid
that we have just defined now let’s add image I’m going to set
this one as a background of the image section I’m going to set the top left and right
border radius and set the background size to
cover to fit the image also add a small margin to the text
section for spacing now let’s adjust the font styles of the
section next let’s work on the stats section we will
show the number of views and comment here. let’s add some dummy content I will place the value and type on a
separate div now we will use grid layout again to
equally allocate the space for each number
notice that I use fraction unit also set the bottom border radius and
background color next let’s use flex layout to vertically center the text also add some padding and adjust the
font styles now I’m going to superscript this letter
so add a line to separate the numbers cover the letter of its sup tag then for border I’m going to add a body
class to the middle box then add left and right border also adjust the font size for a
superscript as well alright the design is finished next we
will work on a hover effect to zoom out a card it’s really easy just add
transform scale to the wrapper using pseudo-class I will reduced box-shadow intensity when
a card is floating the add transition property and set the cursor to pointer you can find a source code at a video
description box below if you love this video and want to see more dev tips
and tutorials don’t forget to subscribe this channel to stay tuned thanks for
watching see you next time bye

Add a Comment

Your email address will not be published. Required fields are marked *