Cards are a very important part of any website. It is used to display some important information in short to viewers for posts, products, services, etc.
In this post (Card Design with a hover effect), in a webpage there are three images, below the image, there is a title, subtitle, and some description of the image and the name of the person or a team that this page is done by. When you hover the card, the image will expand and occupy the full card with the image, with an opacity. You can create as many cards as you need. This card is done by using the CSS hover effect.
The source code for making this Card Design with a hover effect is given below, if you want the source code of this program, you can copy it. You can use this Card Design with a hover effect with your creativity and can take this to the next level.
Card Design with a hover effect [Source Code]
To make this website, you need to create two files: an HTML file & a CSS file. First, create an HTML file with the name index.html and remember, you've to create a file with a .html extension.
@import url('https://fonts.googleapis.com/css?family=Roboto+Slab:100,300,400,700');
@import url('https://fonts.googleapis.com/css?family=Raleway:300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i');
*{
box-sizing: border-box;
}
body, html {
font-family: sans-serif;
margin: 0;
width: 100%;
height: 100%;
padding: 0;
}
body {
background-color: #e0e0e0;
display: flex;
display: -webkit-flex;
-webkit-justify-content: center;
-webkit-align-items: center;
justify-content: center;
align-items: center;
}
.cards {
width: 100%;
display: flex;
display: -webkit-flex;
justify-content: center;
-webkit-justify-content: center;
max-width: 1100px;
}
.card--1 .card__img, .card--1 .card__img--hover {
background-image: url('https://cdn.pixabay.com/photo/2015/01/07/11/31/tigers-591359__340.jpg');
}
.card--2 .card__img, .card--2 .card__img--hover {
background-image: url('https://cdn.pixabay.com/photo/2017/02/19/15/28/sunset-2080072__340.jpg');
}
.card--3 .card__img, .card--3 .card__img--hover {
background-image: url('https://cdn.pixabay.com/photo/2018/01/14/23/12/nature-3082832__340.jpg');
}
.card__img {
visibility: hidden;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
width: 100%;
height: 235px;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
}
.card__img--hover {
transition: 0.2s all ease-out;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
width: 100%;
position: absolute;
height: 235px;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
top: 0;
}
.card {
margin: 25px;
transition: all .4s cubic-bezier(0.175, 0.885, 0, 1);
background-color: #fff;
width: 33.3%;
position: relative;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.card:hover {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
transform: scale(1.10, 1.10);
}
.card__info {
z-index: 2;
background-color: #fff;
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
padding: 16px 24px 24px 24px;
}
.card__category {
font-family: sans-serif;
text-transform: uppercase;
font-size: 13px;
letter-spacing: 2px;
font-weight: 500;
color: #868686;
}
.card__title {
margin-top: 5px;
margin-bottom: 10px;
font-family: sans-serif;
}
p{
color: #808080;
}
.card__by {
font-size: 12px;
font-family: sans-serif;
font-weight: 500;
}
.card__author {
font-weight: 600;
text-decoration: none;
color: crimson;
}
.card:hover .card__img--hover {
height: 100%;
opacity: 0.3;
}
.credit{
text-align: center;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
width: 100%;
}
.credit a{
text-decoration: none;
color: #330000;
font-weight: bold;
}
Thank you for reading our blog. If you face any problem in creating this Card Design with a hover effect using HTML & CSS, then contact us or comment us. We'll try to provide a solution to your problem as soon as possible.
Post a Comment
Thank you
Learning robo team