Html Code: HTML Card Style with Background Image

Cards are used to display summaries or product categories and many other sections of the website. The following code contains a card with a specific style that you can use for sections of your website. This card includes a box with a background image which the background color of the text changes on mouse hover. Besides, the whole card acts as a link and by clicking on any parts of the box, the page redirects to a desired URL. In this card, there are two parts, one is the title and the other is the descriptive text that is displayed briefly. Both of these writings are in white with a dark color for the background.

<!-- this script got from www.htmlbestcodes.com - Coded by: Krishna Eydat -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<style>
html {
    box-sizing: border-box;
    scroll-behavior: smooth;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

body,
body * {
    margin: 0;
    padding: 0;
}

body {
    font: normal 100%/1.15 "Lato", sans-serif;
    background-color: #fffaf0;
    color: #555;
    margin:20px;
}

.wrapper {
    position: relative;
    max-width: 64em;
    height: auto;
    margin: 0 auto;
    padding: 1em 1em;
}

h2 {
    margin-bottom: 0.8em;
    font-size: 1.25em;
}

ul {
    display: flex;
    flex-flow: row wrap;
    justify-content: space=between;
    gap: 2em 2em;
    margin: 1.5em 0;
    list-style: none;
}

li {
    position: relative;
    flex: 1 1 18em;
    padding: 0.5em 0.5em;
    border-radius: 0.25em 0.25em;
    box-shadow: 0 0 0 0.5em #bea26c;
    color: #fff;
}

li:first-child {
    background: #fffaf0 url("https://www.htmlbestcodes.com/files/card.webp") no-repeat left top/auto;
}
.info-wrap {
    height: 100%;
    padding: 0.5em 0.75em;
    background-color: rgba(47, 79, 79, 0.7)
}

li h2 a::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

li:hover h2 a::before {
    background-color: rgba(0, 255, 255, 0.125);
}

li a {
    display: block;
    padding: 0 0.25em;
    text-decoration: none;
    color: inherit;
}

li a:hover {
    text-decoration: underline;
}

li a:active,
li a:focus {
    text-decoration: none;
    outline: none;
    background-color: #2f4f4f;
    color: #ff0;
}

li p:not(:last-of-type),
p {
    margin-bottom: 0.75em;
}

.tag-and-author {
    margin-top: 2.5em;
    font-size: 75%;
}
</style>
<ul >
    <li>
        <div class="info-wrap">
            <h2><a href="#">How to Use PostCSS as a Configurable Alternative to Sass</a></h2>
            <p>Sass is handy, but can't do everything. Learn how to use PostCSS to create a custom CSS preprocessor that compiles Sass syntax but also adds extra features.</p>
        </div>
    </li>
</ul><a target="_blank" href="https://www.htmlbestcodes.com/" style="font-size: 8pt; text-decoration: none;font-family:Tahoma">HTML Best Codes</a>

If you don't know how to use this code or need more information Click here!

Compatible browsers:

Html Best Codes

Html Code: HTML Card Style with Background Image

Links