Item Card Hover Effect Using HTML CSS

Item Card Hover Effect Using HTML CSS

Introduction :

Hello friends, welcome to this new blog post today. Today we have created a beautiful project for you which is quite amazing. This is an Item Card Hover Effect Using HTML CSS in which when you hover the item box, you get an amazing hover effect which looks very good. Today we have created this for you which is very easy to create. To create this you should have some knowledge of HTML and CSS.

Explanation :

First of all, we are going to create the structure of our project with the help of HTML in which we are going to use some text and icons.

  • Head Section:
    • <meta>: First of all we have added a meta link in our head section. Any kind of link is added in the head section only.
    • <title>: If we want to add the title of the project then we have to add it in our head section only.
  • Body Section:
    • <div class=”ag-format-container”>: First of all we have created a main container in which we are going to add the text and other things of our item box.
    • <a>: We’ve added an item link to the project.
    • <div class=”ag-courses-item_title”>: To add the title to the item box, we have created a title box in which we are going to add our title.
    • <span>: We have also used a span tag in which we have added the date.

CSS Styling:

Now we are going to design our item box with the help of cursor in which we are going to set color font width.

  • body: First of all we have used black color in the background of the body, you can use another color also.
  • ag-courses_item: In item box we have added margin and hidden overflow and also used border radius.
  • item_link: In item link we have added padding and made display block and kept position relative.
  • ag-courses-item_bg: In the course box we have used yellow color in Bakaround in which we have kept height and width 128px and used border radius.
  • @media: We have also used media queries to make sure our content is responsive.

Index.html:

  <div class="ag-format-container">
      <div class="ag-courses_box">
        <div class="ag-courses_item">
          <a href="#" class="ag-courses-item_link">
            <div class="ag-courses-item_bg"></div>

            <div class="ag-courses-item_title">
              UI/Web&amp;Graph design for teenagers 11-17 years old
            </div>

            <div class="ag-courses-item_date-box">
              Start:
              <span class="ag-courses-item_date"> 04.11.2022 </span>
            </div>
          </a>
        </div>
      </div>
    </div>

Style.css:

.ag-format-container {
  width: 1142px;
  margin: 0 auto;
}

body {
  background-color: #000;
}
.ag-courses_box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;

  padding: 50px 0;
}
.ag-courses_item {
  -ms-flex-preferred-size: calc(33.33333% - 30px);
  flex-basis: calc(33.33333% - 30px);

  margin: 0 15px 30px;

  overflow: hidden;

  border-radius: 28px;
}
.ag-courses-item_link {
  display: block;
  padding: 30px 20px;
  background-color: #121212;

  overflow: hidden;

  position: relative;
}
.ag-courses-item_link:hover,
.ag-courses-item_link:hover .ag-courses-item_date {
  text-decoration: none;
  color: #fff;
}
.ag-courses-item_link:hover .ag-courses-item_bg {
  -webkit-transform: scale(10);
  -ms-transform: scale(10);
  transform: scale(10);
}
.ag-courses-item_title {
  min-height: 87px;
  margin: 0 0 25px;

  overflow: hidden;

  font-weight: bold;
  font-size: 30px;
  color: #fff;

  z-index: 2;
  position: relative;
}
.ag-courses-item_date-box {
  font-size: 18px;
  color: #fff;

  z-index: 2;
  position: relative;
}
.ag-courses-item_date {
  font-weight: bold;
  color: #f9b234;

  -webkit-transition: color 0.5s ease;
  -o-transition: color 0.5s ease;
  transition: color 0.5s ease;
}
.ag-courses-item_bg {
  height: 128px;
  width: 128px;
  background-color: #f9b234;

  z-index: 1;
  position: absolute;
  top: -75px;
  right: -75px;

  border-radius: 50%;

  -webkit-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
.ag-courses_item:nth-child(2n) .ag-courses-item_bg {
  background-color: #3ecd5e;
}
.ag-courses_item:nth-child(3n) .ag-courses-item_bg {
  background-color: #e44002;
}
.ag-courses_item:nth-child(4n) .ag-courses-item_bg {
  background-color: #952aff;
}
.ag-courses_item:nth-child(5n) .ag-courses-item_bg {
  background-color: #cd3e94;
}
.ag-courses_item:nth-child(6n) .ag-courses-item_bg {
  background-color: #4c49ea;
}

@media only screen and (max-width: 979px) {
  .ag-courses_item {
    -ms-flex-preferred-size: calc(50% - 30px);
    flex-basis: calc(50% - 30px);
  }
  .ag-courses-item_title {
    font-size: 24px;
  }
}

@media only screen and (max-width: 767px) {
  .ag-format-container {
    width: 96%;
  }
}
@media only screen and (max-width: 639px) {
  .ag-courses_item {
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
  }
  .ag-courses-item_title {
    min-height: 72px;
    line-height: 1;

    font-size: 24px;
  }
  .ag-courses-item_link {
    padding: 22px 40px;
  }
  .ag-courses-item_date-box {
    font-size: 16px;
  }
}

Tags: ,