<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<section id="features">
<div class="features-inner">
<div class="features-image"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/495197/phone-1.png"/></div>
<ul class="features-list list-1">
<li class="features-item" data-src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/495197/phone-1.png">
<h3 class="features-item-header">Feature 1</h3>
<p class="features-item-text">I don’t mean to say that I know, of my own knowledge, what there is particularly dead about a door-nail.</p>
</li>
<li class="features-item" data-src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/495197/phone-2.png">
<h3 class="features-item-header">Feature 2</h3>
<p class="features-item-text">I don’t mean to say that I know, of my own knowledge, what there is particularly dead about a door-nail.</p>
</li>
<li class="features-item" data-src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/495197/phone-3.png">
<h3 class="features-item-header">Feature 3</h3>
<p class="features-item-text">I don’t mean to say that I know, of my own knowledge, what there is particularly dead about a door-nail.</p>
</li>
</ul>
<ul class="features-list list-2">
<li class="features-item" data-src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/495197/phone-4.png">
<h3 class="features-item-header">Feature 4</h3>
<p class="features-item-text">I don’t mean to say that I know, of my own knowledge, what there is particularly dead about a door-nail.</p>
</li>
<li class="features-item" data-src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/495197/phone-5.png">
<h3 class="features-item-header">Feature 5</h3>
<p class="features-item-text">I don’t mean to say that I know, of my own knowledge, what there is particularly dead about a door-nail.</p>
</li>
<li class="features-item" data-src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/495197/phone-6.png">
<h3 class="features-item-header">Feature 6</h3>
<p class="features-item-text">I don’t mean to say that I know, of my own knowledge, what there is particularly dead about a door-nail.</p>
</li>
</ul>
</div>
</section>
@import url("https://fonts.googleapis.com/css?family=Montserrat:400,400i,700");
body {
font-family: Montserrat, sans-serif;
}
#features {
background: linear-gradient(rgba(0, 0, 255, 0.7), rgba(0, 0, 255, 0.7)), url(https://source.unsplash.com/random);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
padding: 3rem 0;
}
.features-inner {
padding: 2rem;
}
@media (min-width: 600px) {
.features-inner {
display: grid;
grid-template-columns: 1fr 1fr;
grid-row-gap: 0;
}
}
@media (min-width: 800px) {
.features-inner {
grid-template-columns: 1fr 2fr;
}
}
@media (min-width: 900px) {
.features-inner {
grid-template-columns: repeat(3, 1fr);
max-width: 1000px;
margin: 0 auto;
}
}
.features-image {
text-align: center;
margin-bottom: 2rem;
}
@media (min-width: 600px) {
.features-image {
grid-row: 1/span 2;
}
}
@media (min-width: 900px) {
.features-image {
grid-column: 2;
}
}
.features-image img {
-webkit-filter: drop-shadow(1px 1px 20px rgba(0, 0, 0, 0.4));
filter: drop-shadow(1px 1px 20px rgba(0, 0, 0, 0.4));
}
.features-list {
list-style: none;
padding: 0;
margin: 0;
}
.features-item {
transition: opacity 200ms ease;
}
.features-item:hover {
opacity: 0.7;
cursor: pointer;
}
.features-item-header,
.features-item-text {
color: white;
}
.features-item-header {
margin-bottom: 0;
font-size: 1.4rem;
}
.features-item-text {
margin-top: 0.3rem;
}
@media (min-width: 900px) {
.list-1 {
text-align: right;
}
}
@media (min-width: 600px) {
.list-2 {
grid-column: 2;
}
.list-2 .features-item-header:first-child {
margin-top: 0;
}
}
@media (min-width: 900px) {
.list-2 {
grid-column: 3;
}
.list-2 .features-item-header:first-child {
margin-top: 1.45rem;
}
}
$('.features-item').on('click', function() {
var $this = $(this);
var imgsrc = $this.attr('data-src');
$('.features-image img').attr('src', imgsrc);
});
