Home
Posts

Card Image hover effect | Components



        Hello guys. Welcome to my notes. If you want to see the steps making this tutorial, you can directly watch the video below.  and If you want the code from the tutorial, just scroll down.


HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>Card Hover</title>
    </head>
    <body>
        <div class="card">
            <div class="card_content">
                <h5 class="card_head">White Tiger</h5>
                <p class="card_text">
                    A white tiger is a rare color morph of the Bengal tiger
                    (Panthera tigris tigris) in which the pigmentation in its
                    fur and skin is reduced, leading to a white or near-white
                    coloration.
                </p>
            </div>
            <div class="layer"></div>
        </div>
    </body>
</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap');

*{
  margin: 0;
  padding: 0 ;
  box-sizing: border-box;
  font-family: 'Montserrat', sans-serif;
}

body{
  min-height: 100vh;
  width: 100%;
  /* purpose mid only */
  display: flex;
  justify-content: center;
  align-items: center;
}


.card{
  width: 381px;
  height: 508px;
  display: flex;
  padding: 36px 24px;
  border-radius: 24px;
  background-image: url('src/white-tiger.jpeg');
  background-position: center;
  background-size: cover;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease-in;
}

.card_content{
  position: relative;
  align-self: end;
  z-index: 3;
}

.card_head{
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 12px;
  transition: color 0.3s ease-in;
}

.card_text{
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  transition: color 0.3s ease-in;
}

.card:hover{
  box-shadow: 9px 10px 30px -10px rgba(0, 0, 0, 0.75);
  color: #3c3136;
}

.layer{
  transition: all 0.3s ease;
}

.card:hover .layer{
  z-index: 0;
  background-color: rgba(255, 255, 255, 0.3);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.card:hover .card_head,.card:hover .card_text{
  color: #f0ec00;
}
or you can get full code in by clicking button bellow :

Download Code

Buy Me A Coffee

Thank You for coming to my notes, if you wanna see another tutorial , you can check to my notes or you can subscribe to my Youtube channel , where I post new tips&tricks and tutorials about HTML, CSS and Javascript. See You !!!

Post a Comment