arrow_back
View code

<div class="card-v1">
  <figure>
    <img src="/assets/images/2a.jpg" alt="Card preview img">
    <figcaption>
      <div class="text-uppercase text-xs padding-bottom-xs">Label</div>
      <div class="text-sm">Card title comes here</div>
      <p class="color-lowest">Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum placeat!</p>
    </figcaption>
  </figure>
</div>
                        
Copy HTML

/*
 * File: _card-v1.scss
 * Location /src/scss/components
 * Card v1 component
 */

:root {
    --card-v1-picture-height: 220px;
}
a.card-v1 {
    transition: box-shadow 0.4s;
    &:hover {
        box-shadow: var(--shadow-md);    
    }
}
.card-v1 {
    width: 100%;
    box-shadow: var(--shadow-xs);
    border-radius: var(--radius-lg);
    display: block;
    overflow: hidden;
    &.overlay-info {
        figcaption {
            z-index: 1;
            display: block;
            &:before {
                z-index: -1;
                content: '';
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                overflow: hidden;
                opacity: 0.7;
                
                background-color: #000;
            }
        }
        &.blur {
            figcaption {
                &:before {
                    backdrop-filter: blur(10px);
                }
            }
        }
    }
    figure {
        margin: 0;
        padding: 0;
        overflow: hidden;
        display: block;
        position: relative;
        height: var(--card-v1-picture-height);
        img {
            width: 100%;
        }
        figcaption {
            position: absolute;
            width: 100%;
            bottom: 0;
            padding: var(--space-md);
            color: var(--color-bg);
        }
    }
}
                        
Copy SCSS
Upgrade to professional version

Using professional version, you will have unlimited number of projects and unlimited access to materials in Kodhus.com.