<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="item">
<img src="https://placeimg.com/640/480/any" alt="" class="bg_img" />
<div class="text_wrapper">
<div class="text_position">
<h2 class="item--title">Item Title</h2>
<p class="item--text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio maiores suscipit illo nihil molestiae quas adipisci delectus facere odit hic placeat aut eius, quo atque eaque magni, iste iusto voluptate.</p>
</div>
</div>
</div>
<div class="item">
<img src="https://placeimg.com/640/480/rand" alt="" class="bg_img" />
<div class="text_wrapper">
<div class="text_position text_position-left">
<h2 class="item--title item--title-left">Item Title</h2>
<p class="item--text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio maiores suscipit illo nihil molestiae quas adipisci delectus facere odit hic placeat aut eius, quo atque eaque magni, iste iusto voluptate.</p>
</div>
</div>
</div>
<div class="item">
<img src="https://placeimg.com/640/480/rando" alt="" class="bg_img" />
<div class="text_wrapper">
<div class="text_position text_position-right">
<h2 class="item--title item--title-right">Item Title</h2>
<p class="item--text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio maiores suscipit illo nihil molestiae quas adipisci delectus facere odit hic placeat aut eius, quo atque eaque magni, iste iusto voluptate.</p>
</div>
</div>
</div>
</div>
<hr />
<div class="container">
<div class="item item-2-3">
<img src="https://placeimg.com/640/480/cba" alt="" class="bg_img" />
<div class="text_wrapper">
<div class="text_position">
<h2 class="item--title">Item Title</h2>
<p class="item--text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio maiores suscipit illo nihil molestiae quas adipisci delectus facere odit hic placeat aut eius, quo atque eaque magni, iste iusto voluptate.</p>
</div>
</div>
</div>
<div class="item item-1-3">
<img src="https://placeimg.com/640/480/abc" alt="" class="bg_img" />
<div class="text_wrapper">
<div class="text_position text_position-1-3">
<h2 class="item--title">Item Title</h2>
<p class="item--text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio maiores suscipit illo nihil molestiae quas adipisci delectus facere odit hic placeat aut eius, quo atque eaque magni, iste iusto voluptate.</p>
</div>
</div>
</div>
<div class="item item-1-3">
<img src="https://placeimg.com/640/480/abcd" alt="" class="bg_img" />
<div class="text_wrapper">
<div class="text_position text_position-1-3">
<h2 class="item--title">Item Title</h2>
<p class="item--text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio maiores suscipit illo nihil molestiae quas adipisci delectus facere odit hic placeat aut eius, quo atque eaque magni, iste iusto voluptate.</p>
</div>
</div>
</div>
<div class="item item-2-3">
<img src="https://placeimg.com/640/480/dcba" alt="" class="bg_img" />
<div class="text_wrapper">
<div class="text_position">
<h2 class="item--title">Item Title</h2>
<p class="item--text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio maiores suscipit illo nihil molestiae quas adipisci delectus facere odit hic placeat aut eius, quo atque eaque magni, iste iusto voluptate.</p>
</div>
</div>
</div>
</div>
html {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
*,
*::before,
*::after {
position: relative;
-webkit-box-sizing: inherit;
box-sizing: inherit;
}
.container {
max-width: 100%;
margin-left: auto;
margin-right: auto;
display: block;
width: 90%;
max-width: 90rem;
margin: 5rem auto;
}
.container:after {
content: " ";
display: block;
clear: both;
}
.item {
display: block;
width: 100%;
overflow: hidden;
border: 2px solid #676767;
margin: 3rem auto;
font-size: 1rem;
}
@media screen and (min-width: 40rem) {
.item {
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
float: left;
height: 60vw;
max-height: 30rem;
margin: 0 auto;
border: 0.2rem solid #fff;
}
}
@media screen and (min-width: 60rem) {
.item-1-3 {
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 33.33333%;
float: left;
font-size: 0.8rem;
}
}
@media screen and (min-width: 60rem) {
.item-2-3 {
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 66.66667%;
float: left;
}
}
.bg_img {
display: block;
width: 100%;
height: 60vw;
-o-object-fit: cover;
object-fit: cover;
}
@media screen and (min-width: 40rem) {
.bg_img {
position: absolute;
z-index: 0;
width: 100%;
height: 100%;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-transition: width 1.3s ease-in-out, height 1.3s ease-in-out;
transition: width 1.3s ease-in-out, height 1.3s ease-in-out;
}
}
@media screen and (min-width: 40rem) {
.item:hover .bg_img {
width: 110%;
height: 120%;
}
}
.text_wrapper {
display: block;
color: #313131;
}
@media screen and (min-width: 40rem) {
.text_wrapper {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 1;
background: rgba(0, 0, 0, 0.7);
color: #dfdfdf;
font-size: 1.25em;
-webkit-transition: opacity 0.3s ease-in-out;
transition: opacity 0.3s ease-in-out;
}
.text_wrapper:hover {
opacity: 0;
}
}
@media screen and (min-width: 70rem) {
.text_wrapper {
font-size: 1.5rem;
}
}
.text_position {
display: block;
}
@media screen and (min-width: 40rem) {
.text_position {
position: absolute;
top: 50%;
left: 15%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
width: 70%;
}
}
@media screen and (min-width: 50rem) {
.text_position {
width: 60%;
left: 20%;
}
}
@media screen and (min-width: 60rem) {
.text_position {
width: 50%;
left: 25%;
}
}
@media screen and (min-width: 40rem) {
.text_position-left {
left: 5%;
width: 60%;
}
}
@media screen and (min-width: 50rem) {
.text_position-left {
width: 40%;
}
}
@media screen and (min-width: 40rem) {
.text_position-right {
right: 5%;
left: auto;
width: 60%;
}
}
@media screen and (min-width: 50rem) {
.text_position-right {
width: 40%;
}
}
@media screen and (min-width: 50rem) {
.text_position-1-3 {
left: 5%;
width: 90%;
}
}
.item--title {
display: block;
font-family: "Julius Sans One", Arial, sans-serif;
font-size: 1.8em;
font-weight: 100;
text-align: center;
letter-spacing: 0.1em;
color: inherit;
}
@media screen and (min-width: 40rem) {
.item--title-left {
text-align: left;
}
.item--title-right {
text-align: right;
}
}
.item--text {
display: block;
padding: 0 1em;
margin: 1em 0;
font-family: "Crimson Text", serif;
font-size: 1.2em;
text-align: justify;
letter-spacing: 0.05em;
color: inherit;
}
@media screen and (min-width: 40rem) {
.item--text {
padding: 0;
}
}
