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');
}