Components - Image cards

Image card

Card with text over an image background.

<div class="row">
    <div class="col-md-4">
        <!-- Image card. Replace the href to link the card to something useful -->
        <a href="#"
           class="image-card image-card-mobility">
            <div class="image-content">
                <h3 class="image-title">
                    Mobility
                </h3>
                <p class="image-description">
                    Quam vulputate dignissim suspendisse in est ante in nibh. Faucibus nisl tincidunt eget nullam non nisi est sit amet.
                </p>
            </div>
        </a>
    </div>
    <div class="col-md-4">
        <!-- Image card. Replace the href to link the card to something useful -->
        <a href="#"
           class="image-card image-card-garden">
            <div class="image-content">
                <h3 class="image-title">
                    Garden
                </h3>
                <p class="image-description">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                </p>
            </div>
        </a>
    </div>
    <div class="col-md-4">
        <!-- Image card. Replace the href to link the card to something useful -->
        <a href="#"
           class="image-card image-card-gastronomy">
            <div class="image-content">
                <h3 class="image-title">
                    Gastronomy
                </h3>
                <p class="image-description">
                    Massa id neque aliquam vestibulum. Fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate.
                </p>
            </div>
        </a>
    </div>
    <div class="col-md-4">
        <!-- Image card -->
        <a href="#"
           class="image-card image-card-sport">
            <div class="image-content">
                <h3 class="image-title">
                    Sport
                </h3>
                <p class="image-description">
                    Sed augue lacus viverra vitae congue. Neque egestas congue quisque egestas diam in arcu.
                </p>
            </div>
        </a>
    </div>
    <div class="col-md-4">
        <!-- Image card -->
        <a href="#"
           class="image-card image-card-culture">
            <div class="image-content">
                <h3 class="image-title">
                    Culture
                </h3>
                <p class="image-description">
                    Integer malesuada nunc vel risus commodo viverra maecenas. Sem et tortor consequat id porta.
                </p>
            </div>
        </a>
    </div>
    <div class="col-md-4">
        <!-- Image card -->
        <a href="#"
           class="image-card image-card-education">
            <div class="image-content">
                <h3 class="image-title">
                    Education
                </h3>
                <p class="image-description">
                    Euismod lacinia at quis risus sed vulputate odio. Parturient montes nascetur ridiculus mus mauris vitae.
                </p>
            </div>
        </a>
    </div>
</div>
/* Image Card
   ========================================================================== */
.image-card {
	background-color: rgba(0,0,0,.1);
	background-color: var(--highlight);
	color: #FFFFFF;
	padding: 39px;
	border-radius: 4px;
	margin-bottom: 20px;
	min-height: 300px;
	height: 100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	-webkit-box-align: stretch;
	    -ms-flex-align: stretch;
	        align-items: stretch;
	text-align: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	-webkit-transition: all .2s;
	-o-transition: all .2s;
	transition: all .2s;
	text-decoration: none;
}
.image-card:hover,
.image-card:focus {
	text-decoration: none;
    -webkit-transform: scale(1.02);
        -ms-transform: scale(1.02);
            transform: scale(1.02);
    -webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,.1);
            box-shadow: 0 0 10px 0 rgba(0,0,0,.1);
}
.image-title {
	color: inherit;
	font-size: 1.733rem;
	line-height: 2.26;
	font-weight: bold;
	margin-top: 0;
	margin-bottom: 13px;
}
.image-description {
	color: inherit;
	font-size: 1rem;
	line-height: 1.5;
	font-weight: bold;
	margin: 0;
}
/* Image card backgrounds
   ========================================================================== */
/**
 * - Replace the background image URL.
 * - Change the class name to something related to your project and update the HTML as well.
 */
.image-card-mobility {
	background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.5)), to(rgba(0,0,0,0.5))), url('/img/image-card/mobility-bg.jpg');
	background-image: -o-linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('/img/image-card/mobility-bg.jpg');
	background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('/img/image-card/mobility-bg.jpg');
}
.image-card-garden {
	background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.5)), to(rgba(0,0,0,0.5))), url('/img/image-card/garden-bg.jpg');
	background-image: -o-linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('/img/image-card/garden-bg.jpg');
	background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('/img/image-card/garden-bg.jpg');
}
.image-card-gastronomy {
	background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.5)), to(rgba(0,0,0,0.5))), url('/img/image-card/gastronomy-bg.jpg');
	background-image: -o-linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('/img/image-card/gastronomy-bg.jpg');
	background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('/img/image-card/gastronomy-bg.jpg');
}
.image-card-sport {
	background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.5)), to(rgba(0,0,0,0.5))), url('/img/image-card/sport-bg.jpg');
	background-image: -o-linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('/img/image-card/sport-bg.jpg');
	background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('/img/image-card/sport-bg.jpg');
}
.image-card-culture {
	background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.5)), to(rgba(0,0,0,0.5))), url('/img/image-card//culture-bg.jpg');
	background-image: -o-linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('/img/image-card/culture-bg.jpg');
	background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('/img/image-card/culture-bg.jpg');
}
.image-card-education {
	background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.5)), to(rgba(0,0,0,0.5))), url('/img/image-card/education-bg.jpg');
	background-image: -o-linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('/img/image-card/education-bg.jpg');
	background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('/img/image-card/education-bg.jpg');
}