Skip to main content

Clip Image On Text Using HTML & CSS | CSS Overlay Text On Image | background-clip text effect-CSS

   In this video, we will create an awesome text effect CSS only. This video on how to clip image on text using -webkit-background-clip. For a preview click on  Demo If you want to get the complete source code in a zip file then click the "Fork me on GitHub" button below that will redirect you to my GitHub account where you found all my source code files. Copy Code(select code part and copy using "CTRL + C" or using R Click to mouse)🡇 HTML <! DOCTYPE   html > < html   lang = "en" > < head >     < meta   charset = "UTF-8" >     < meta   http-equiv = "X-UA-Compatible"   content = "IE=edge" >     < meta   name = "viewport"   content = "width=device-width, initial-scale=1.0" >     < title >How to clip image on text</ title >      <!-- style.css -->     < link   rel = "stylesheet"   href = "style.css" > </ head > < body >

Awesome Card Design | HTML CSS Card UI Design | Creative Card Design Using HTML And CSS


In this video, we will create an awesome card UI design with an amazing hover animation effect using only HTML & CSS.

You can use it in your next project to get more of a client or user impression.

If you want to get the complete source code in a zip file then click the "Fork me on GitHub" button below that will redirect you to my GitHub account where you found all my source code files.
Copy Code(select code part and copy using "CTRL + C" or using R Click to mouse)🡇

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Awesome Card Design</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>

    <!-- card -->
    <div class="card">
        <div class="circles c1"></div>
        <!-- card body -->
        <div class="card-img">
            <img src="img.png" alt="img">
        </div>
        <div class="card-content">
            <h4>Supercell</h4>
            <h2>Clash Royale</h2>
            <h5>Exp 8</h5>
            <p>Lorem ipsum dolor sit amet, consectetur adipi elit rnatur.</p>
        </div>
        <!-- card body -->
        <div class="circles c2"></div>
    </div>
    <!-- card -->
</body>

</html>

CSS
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #2a3a49;
    font-family: 'Poppins', sans-serif;
}

.card {
    width: 30em;
    height: 15em;
    background-color: #2a3a49;
    border-radius: 32px;
    position: relative;
    display: flex;
    justify-content: center;
}

.card::before {
    content: '';
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    width: 30.5em;
    height: 15.5em;
    background: linear-gradient(160deg, #f8fd01, #f8fd01b4, #263542, #263542, #03dee0b4, #03dee0);
    border-radius: 35px;
    transform: translate(-50%, -50%);
}

.circles {
    position: absolute;
    z-index: 1;
    filter: blur(50px);
}

.c1 {
    top: 0;
    left: 0;
    width: 3em;
    height: 3em;
    background-color: #f8fd01;
}

.c2 {
    bottom: -7%;
    right: -5%;
    width: 4em;
    height: 4em;
    background-color: #03dee0;
}

.card-img {
    width: 35%;
    height: 100%;
    position: relative;
}

.card-img img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    transform: translate(-50%, -50%);
}

.card:hover .card-img img {
    animation: zoom 0.8s cubic-bezier(1, 2, 0.2, 0.6);
}

@keyframes zoom {
    0% {
        transform: scale(0) translate(-150%, -200%);
    }
    100% {
        transform: scale(1) translate(-50%, -50%);
    }
}

.card-content {
    width: 65%;
    height: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding: 0 30px;
}

.card-content h4 {
    color: #7f94a5;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.card-content h2 {
    color: #fff;
    text-transform: capitalize;
}

.card-content h5 {
    color: #03dee0;
    text-transform: uppercase;
    margin-top: 8px;
}

.card-content p {
    color: #7f94a5;
    margin-top: 12px;
}


Fork me on GitHub

Subscribe to me on YouTube

Like & Comment on my video on YouTube & press the bell icon to get notification first.

Follow me on Instagram

Comment down any query if you have.

Comments

Post a Comment

If you have any doubts please let me know.

Popular posts from this blog

Play GIF On Hover | Animate GIF on hover | How To Animate GIF On Hover In CSS

In this video, we will create a hover animated GIF using HTML & CSS. When we hover on the image box the image change into a GIF image. You can easily create this with only CSS. For a preview click on  Demo If you want to get the complete source code in a zip file then click the "Fork me on GitHub" button below that will redirect you to my GitHub account where you found all my source code files. Copy Code(select code part and copy using "CTRL + C" or using R Click to mouse)🡇 HTML <! DOCTYPE  html > < html  lang = " en " > < head >      < meta  charset = " UTF-8 " >      < meta  http-equiv = " X-UA-Compatible "   content = " IE=edge " >      < meta  name = " viewport "   content = " width=device-width, initial-scale=1.0 " >      < title > Play GIF on hover </ title >      <!-- style -->      < link  rel = " stylesheet "   href = " st

Bootstrap 5 Sidebar Navigation | Bootstrap Side Navbar With Responsive | Speed Code UI Design

In this video, we will create a responsive sidebar using Bootstrap 5 with an easy trick, most of the people stuck in this to how to create this type of sidebar using Bootstrap. For a preview click on   Demo For more about bootstrap 5 click here If you want to get the complete source code in a zip file then click the "Fork me on GitHub" button below that will redirect you to my GitHub account where you found all my source code files. Copy Code(select code part and copy using "CTRL + C" or using R Click to mouse)🡇 HTML <! DOCTYPE  html > < html  lang = " en " > < head >      < meta  charset = " UTF-8 " >      < meta  name = " viewport "   content = " width=device-width, initial-scale=1.0 " >      < title > Bootstrap 5 Side Bar Navigation </ title >      <!-- bootstrap 5 css -->      < link  rel = " stylesheet "   href = " https://stackpath.bootstrapcdn.com/bootst

Login System Using NodeJS & MySQL Database | 2020 latest video

  ➣ In this video, we will create a login system using Node.JS & MySQL database ➣  Download Source Code