HTML Card Style with Background Image

Written by @kerixa 30 March 2021

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.

Code Snippet:

                                                
                                                <!-- this script is provided by https://www.htmlbestcodes.com coded by: Kerixa Inc. -->
<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'>Html Best Codes</a>

Example:

About @kerixa

I am Krishna Eydat. I studied Software Engineering at University of Waterloo in Canada. I lead a few tech companies. I am passionate about the way we are connected. I would like to be part of something big or be the big deal!

Comments

Here you can leave us commments. Let us know what you think about this code tutorial!

0 / 300