Develop Reference

Adding a Product List on Image

I am using the minimal template in Shopify and would like to recreate this image attached. I have tried researching for similar examples but can't seem to find anything. How do I go about creating this image? How do I get an image behind a menu?
Any links or documents to achieving image would really help.

Try to break down the design to work out it's constituent parts. You want a background image and an overlay with product cards. You want to position the overlay on top of the picture you do this by applying position:relative to the parent and position:absolute to the child so it will be positioned within it's parent. Then apply transform: translate() to translate the overlay dependant on it's size to achieve the offset on the right hand side.
Here's a pen : https://codepen.io/NeilWkz/pen/qgRMyW
<div class="img-hero-with-menu-overlay">
<div class="left-img">
</div>
<div class="overlay">
<div class="product-card">
<img src="https://lorempixel.com/300/150/" alt="">
<div class="info">
<h3>Product 1</h3>
<p>lorem</p>
</div>
</div>
<div class="product-card">
<img src="https://lorempixel.com/300/150/" alt="">
<div class="info">
<h3>Product 2</h3>
<p>lorem</p>
</div>
</div>
<div class="product-card">
<img src="https://lorempixel.com/300/150/" alt="">
<div class="info">
<h3>Product 3</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
</div>
</div>
</div>
</div>
The CSS
img-hero-with-menu-overlay {
position: relative;
background-color: #bcbdc0;
width: 100%;
display: block;
}
.left-img {
height: 100vh;
display: block;
width: 75%;
background: url("https://www.llialighting.com/Content/files/ProductImages/v_06f3_angled448253599.png")
no-repeat center center;
background-size: cover;
}
.overlay {
position: absolute;
right: 0;
top: 50%;
transform: translate(-12.5%, -50%);
width: 40%;
}
.product-card {
display: flex;
margin-bottom: 1.5rem;
}
.info {
padding: 1.5rem;
}

How to customize arrow buttons in Swiper

How can I customize the arrow buttons below from swipers?
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
I did it crudely but it does not seem to be the right way because I get some margin on the right of the button.
<div class="swiper-button-next hide-for-small-only hide-for-medium-only" style="border: 1px solid red; background-color: yellow; padding: 30px; ></div>
The entire code:
.swiper-container {
width: 100%;
height: 450px;
}
.swiper-slide {
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.swiper-slide {
font-size: 18px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.swiper-banner-slide {
-webkit-background-size: cover;
background-size: cover;
background-position: center;
}
.swiper-slide .title {
font-family: 'Bellefair', serif;
font-size: 41px;
line-height: 40px;
font-weight: 300;
}
.swiper-slide .subtitle {
font-size: 21px;
}
.swiper-slide .text {
font-size: 21px;
letter-spacing: 1px;
}
.slide-info-container {
color: #000;
}
.swiper-block {
padding: 40px 0 40px;
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color: #000;
margin: 0;
/*padding: 0;*/
}
.swiper-block .swiper-container {
width: 100%;
height: 300px;
margin: 20px auto;
}
.swiper-block .swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
<!-- CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Zurb - CDN -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.1/css/foundation.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.1/js/foundation.min.js"></script>
<!-- Swiper - CDN -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.jquery.min.js"></script>
<main>
<div class="row" id="banner">
<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide swiper-banner-slide" style="background-image: url('images/1.jpg')">
<!-- grid container -->
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="small-12 medium-10 large-8 cell slide-info-container">
<h3 class="title">Aliquam dictum mattis velit 1</h3>
<div class="text">
<p>Nulla laoreet justo vitae porttitor porttitor. Suspendisse in sem justo. Integer laoreet magna nec elit suscipit, ac laoreet nibh euismod. </p>
</div>
More Details
</div>
</div>
</div>
<!-- grid container -->
</div>
<div class="swiper-slide swiper-banner-slide" style="background-image: url('images/2.jpg')">
<!-- grid container -->
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="small-12 medium-10 large-8 cell slide-info-container">
<h3 class="title">Aliquam dictum mattis velit 2</h3>
<div class="text">
<p>Aliquam hendrerit lorem at elit facilisis rutrum. Ut at ullamcorper velit. Nulla ligula nisi, imperdiet ut lacinia nec, tincidunt ut libero. Aenean feugiat non eros quis feugiat.</p>
</div>
More Details
</div>
</div>
</div>
<!-- grid container -->
</div>
<div class="swiper-slide swiper-banner-slide" style="background-image: url('images/3.jpg')">
<!-- grid container -->
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="small-12 medium-10 large-8 cell slide-info-container">
<h3 class="title">Aliquam dictum mattis velit 3</h3>
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum mattis velit, sit amet faucibus felis iaculis nec. </p>
</div>
More Details
</div>
</div>
</div>
<!-- grid container -->
</div>
<div class="swiper-slide swiper-banner-slide" style="background-image: url('images/4.jpg')">
<!-- grid container -->
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="small-12 medium-10 large-8 cell slide-info-container">
<h3 class="title">Aliquam dictum mattis velit 4</h3>
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum mattis velit, sit amet faucibus felis iaculis nec. Nulla laoreet justo vitae porttitor porttitor. </p>
</div>
More Details
</div>
</div>
</div>
<!-- grid container -->
</div>
<div class="swiper-slide swiper-banner-slide" style="background-image: url('images/5.jpg')">
<!-- grid container -->
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="small-12 medium-10 large-8 cell slide-info-container">
<h3 class="title">Aliquam dictum mattis velit 5</h3>
<div class="text">
<p>Nulla laoreet justo vitae porttitor porttitor. Suspendisse in sem justo.</p>
</div>
More Details
</div>
</div>
</div>
<!-- grid container -->
</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
<!-- Add Arrows -->
<div class="swiper-button-next hide-for-small-only hide-for-medium-only" style="border: 1px solid red; background-color: yellow; padding: 30px; ></div>
<div class=" swiper-button-prev hide-for-small-only hide-for-medium-only "></div>
</div>
<!-- Swiper -->
</div>
<!-- row block -->
<div class="row swiper-block ">
<div class="grid-container ">
<div class="grid-x grid-padding-x ">
<div class="small-12 cell ">
<!-- Swiper -->
<div class="swiper-container ">
<div class="swiper-wrapper ">
<div class="swiper-slide ">Slide 1</div>
<div class="swiper-slide ">Slide 2</div>
<div class="swiper-slide ">Slide 3</div>
<div class="swiper-slide ">Slide 4</div>
<div class="swiper-slide ">Slide 5</div>
<div class="swiper-slide ">Slide 6</div>
<div class="swiper-slide ">Slide 7</div>
<div class="swiper-slide ">Slide 8</div>
<div class="swiper-slide ">Slide 9</div>
<div class="swiper-slide ">Slide 10</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination "></div>
</div>
</div>
</div>
</div>
</div>
</main>
<script>
$(function() {
$(document).foundation();
var swiper = new Swiper('#banner .swiper-container', {
pagination: '#banner .swiper-pagination',
slidesPerView: 1,
paginationClickable: true,
centeredSlides: true,
spaceBetween: 30,
loop: true,
keyboardControl: true,
nextButton: '#banner .swiper-button-next',
prevButton: '#banner .swiper-button-prev',
});
var swiper2 = new Swiper('.swiper-block .swiper-container', {
pagination: '.swiper-block .swiper-pagination',
slidesPerView: 5,
paginationClickable: true,
spaceBetween: 30,
freeMode: true,
keyboardControl: false,
});
});
</script>
I don't want the margin.
Any ideas?
EDIT:
How do I change the colour blue on the arrow to black?
.swiper-button-next,
.swiper-button-prev {
background-color: white;
background-color: rgba(255, 255, 255, 0.5);
right:10px;
padding: 30px;
color: #000 !important;
fill: black !important;
stroke: black !important;
}
Does not work of course!

Add this to style the prev / next arrows:
.swiper-button-prev {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%234c71ae'%2F%3E%3C%2Fsvg%3E") !important;
}
.swiper-button-next {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%234c71ae'%2F%3E%3C%2Fsvg%3E") !important;
}
Where "4c71ae" is the color you want to use in HEX.

:root {
--swiper-theme-color: #000;
}
Try this instead of !important to change color.

With the current version of SwiperJS (v.5.3.8) you can change the color of the arrows in css without any issues. Just define color.
.swiper-button-prev {
color: red;
}
.swiper-button-next {
color: #000;
}

Those who want to change the default arrows just set you custom SVG etc in the elements the HTML; mine is next & prev
<div class="swiper-button-next">Next</div>
<div class="swiper-button-prev">Prev</div>
And remove the default icons in CSS
.swiper-button-next::after, .swiper-button-prev::after {
content: "";
}

For anyone looking to change the color etc of various buttons etc for Swiper, be sure to inspect the CSS of what you are trying to change and see if the property you are trying to change is using a CSS variable.
In the case were a CSS variable has been used, you need to re-define it in order to change it.
Example for changing the color of the swiper next/prev buttons:
Underlying CSS:
.swiper-button-next, .swiper-button-prev {
position: absolute;
top: 50%;
width: calc(var(--swiper-navigation-size)/ 44 * 27);
height: var(--swiper-navigation-size);
margin-top: calc(0px - (var(--swiper-navigation-size)/ 2));
z-index: 10;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: var(--swiper-navigation-color,var(--swiper-theme-color));
}
Add this to the styles.css (or globals.css in NextJS)
:root {
--swiper-navigation-color: #E49A38;
}

"I don't want the margin. Any ideas?"
If the margin is really the margin, not the result of right property, try to overwrite default "swipers" styles using !important, like this:
.class {
margin: 0 !important;
}
Otherwise set right property to 0:
.class {
right: 0;
}
Or
.class {
right: 0 !important;
}
If it doesn't work without !important.
"How do I change the colour blue on the arrow to black?"
If you just want to make them black, you can simply use one of the built-in classes (swiper-button-black in your case) - thanks to this comment.

If you use JavaScript, you can also change --swiper-navigation-color inside the page/component instead of changing :root in the CSS file. I found it more convenient in React/Next.js. Just add this to your code.
document.documentElement.style.setProperty("--swiper-theme-color", "#000")
If you are going with this solution and you are building a React/Next.js app, remember to include the code from above in useEffect to load the document in the appropriate moment (more about it here).
useEffect(() => {
document.documentElement.style.setProperty("--swiper-theme-color", "#000")
}, [])

If you're using React, another approach apart from #Jakub’s is to pass a style prop to Swiper like this
<Swiper style={{"--swiper-navigation-color": "#FFF", "--swiper-pagination-color": "#FFF"}}>
.....
</Swiper>

If you're using Angular, you can simply use ::ng-deep to override the color.
For example :
::ng-deep .swiper-button-prev,
::ng-deep .swiper-button-next {
color: white;
}

.swiper-button-next::after, .swiper-button-prev::after{
content: "";
}

.swiper-button-next {
--swiper-navigation-color:white;
}
.swiper-button-prev {
--swiper-navigation-color:white;
}

If you just want to make them white or black you can use the built-in classes.
<div class="swiper-button-prev swiper-button-white"></div>
or
<div class="swiper-button-next swiper-button-black"></div>

Very simple
.main__swiper_left {
background-image: url("../img_2/main__swiper_left.png");
width: 58px;
height: 58px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.main__swiper_left::after {
display: none;
}
Source

For the color, edit the swiper-bundle.min.css on line 13, change the :root attribute to this:
:root {
--swiper-theme-color: #FFFFFF;
}

For those who want to replace default arrows with custom SVG icon. I'm using Swiper version 8.3.2.
Here is a demo example project.
Place <img> tag into both elements.
<!-- Navigation arrows -->
<div class="swiper-button-prev">
<img src="#/assets/icons/svg/right-arrow.svg" />
</div>
<div class="swiper-button-next">
<img src="#/assets/icons/svg/right-arrow.svg" />
</div>
Then, remove the default icons in CSS.
.swiper-button-prev::after,
.swiper-button-next::after {
display: none;
}
.swiper-button-prev img {
transform: rotate(180deg);
}

This solution worked for me:
// use the `useState` hook instead of `useRef`
const [prevEl, setPrevEl] = useState<HTMLElement | null>(null)
const [nextEl, setPrevEl] = useState<HTMLElement | null>(null)
<Swiper navigation={{ prevEl, nextEl }}>
// some slides
</Swiper>
<div ref={(node) => setPrevEl(node)}>prev</div>
<div ref={(node) => setNextEl(node)}>next</div>

.swiper.swiper-button-next {color: black; --swiper-navigation-size: 30px;}
.swiper.swiper-button-prev{color: black; --swiper-navigation-size: 30px;}
Try this one! to Increase and Decrease Size and Change Color.
Don't forget to use !important after the color property.

There are many ways to customize these arrows. You just need to specify your proper parameters in the :root of your CSS file.
:root {
--swiper-navigation-size: 16px; /* To edit the size of the arrows */
--swiper-navigation-color: #000; /* To edit the color of the arrows */
}

.swiper-button-prev {
color: green !important;
}
.swiper-button-next {
color: green !important;
}

If you want to change the color, you can simply do the following and it will overwrite the current color to white... Hope this will be useful!
Note: You can specify any color you want to change! Thanks
.swiper-button-prev,.swiper-button-next{
color:white !important;
}

This worked for me.
.swiper-button-prev {
color: red !important;
}
.swiper-button-next {
color: red !important;
}

Hover on divs changes background smoothly

I made a quick hub for two websites I created and I wanted to have two divs centered side by side, so that when you put your mouse over each div, it changes the body background image. I have made it so that when you hover over it, it changes the background but, its not smooth.
I really want to learn java script and I feel like this a good experience for me, thanks for any help
I'm using jQuery and Bootstrap.
Is there a way to just use css? if there isn't a way then its fine.
HTML:
<body>
<div class="container">
<div class="row vertical-center">
<div class="col-md-6">
<div class="fre">
<h3>Howdy</h3>
<a href="http://www.google.com">
<div class="fre-moveleft smooth" id="fre">
<img src="http://www.logospike.com/wp-content/uploads/2015/11/Logo_Image_03.png" class="scale">
</div>
</a>
<div class="caption">
<p>Lorem ipsum dolor sit
<br> consectetur adipiscing elit. Aliquam</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="med">
<h3>Partner</h3>
<a href="http://www.google.com">
<div class="med-moveright smooth" id="med">
<img src="http://www.logospike.com/wp-content/uploads/2015/11/Logo_Image_03.png" class="scale">
</div>
</a>
<div class="caption">
<p>Lorem ipsum dolor sit
<br> consectetur adipiscing elit. Aliquam</p>
</div>
</div>
</div>
</div>
</div>
</body>
CSS:
.vertical-center {
min-height: 100%;
/* Fallback for browsers do NOT support vh unit */
min-height: 100vh;
/* These two lines are counted as one :-) */
display: flex;
align-items: center;
}
.scale {
width: 60%;
position: relative;
}
.smooth {
transition: 0.3s ease;
cursor: pointer;
}
.med {
float: left;
}
.med-moveright:hover {
transform: translate(50px);
}
.fre {
float: right;
text-align: right;
}
.fre-moveleft:hover {
transform: translate(-50px);
}
/*
body {
background-image: url(../images/kabobi.jpg);
}
*/
/*
body .fre-moveleft:hover {
background-image: url(http://img.mynet.com/ha2/tayyip.jpg);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
*/
JS:
$("#med").hover(function() {
$('body').css("background", "url(https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png");
});
$("#fre").hover(function() {
$('body').css("background", "url(https://www.purinamills.com/2.purinamills.com/media/Images/MasterBrand/Lifestages/horse_lifestage_any-life-stage.png?ext=.png");
});
JSFiddle

Here's a way you can fade between the two by toggling a class and setting a data attribute in jQuery, the rest controlled in CSS.
var $body = $('body');
function setBg(str) {
var bg = $body.attr('data-bg');
$body.addClass('out');
var t = setTimeout(function() {
$body.attr('data-bg', str).removeClass('out');
},250);
}
function hideBg() {
$body.addClass('out');
}
$("#med img").hover(function() {
setBg('med');
},function() {
hideBg();
});
$("#fre img").hover(function() {
setBg('fre');
},function() {
hideBg();
});
.vertical-center {
min-height: 100%;
/* Fallback for browsers do NOT support vh unit */
min-height: 100vh;
/* These two lines are counted as one :-) */
display: flex;
align-items: center;
}
.scale {
width: 60%;
position: relative;
}
.smooth {
transition: 0.3s ease;
cursor: pointer;
}
.med {
float: left;
}
.med-moveright:hover {
transform: translate(50px);
}
.fre {
float: right;
text-align: right;
}
.fre-moveleft:hover {
transform: translate(-50px);
}
/* new stuff */
body::before,
body::after {
transition: opacity .25s;
z-index: -1;
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.out::after,
.out::before {
opacity: 0;
}
[data-bg="med"]::before {
background-image: url("https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png");
}
[data-bg="fre"]::after {
background-image: url("https://www.purinamills.com/2.purinamills.com/media/Images/MasterBrand/Lifestages/horse_lifestage_any-life-stage.png?ext=.png");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="container">
<div class="row vertical-center">
<div class="col-md-6">
<div class="fre">
<h3>Howdy</h3>
<a href="http://www.google.com">
<div class="fre-moveleft smooth" id="fre">
<img src="http://www.logospike.com/wp-content/uploads/2015/11/Logo_Image_03.png" class="scale">
</div>
</a>
<div class="caption">
<p>Lorem ipsum dolor sit
<br> consectetur adipiscing elit. Aliquam</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="med">
<h3>Partner</h3>
<a href="http://www.google.com">
<div class="med-moveright smooth" id="med">
<img src="http://www.logospike.com/wp-content/uploads/2015/11/Logo_Image_03.png" class="scale">
</div>
</a>
<div class="caption">
<p>Lorem ipsum dolor sit
<br> consectetur adipiscing elit. Aliquam</p>
</div>
</div>
</div>
</div>
</div>
</body>

Sure, you can add a transition to the body like this:
body {
-webkit-transition: background-image 0.2s ease-in-out;
transition: background-image 0.2s ease-in-out;
}
https://jsfiddle.net/zdwksre7/
This css will transition between the background in the body
Also, you can start experimenting adding classes with javascript with timeouts, so you can add more custom effects. Like fade, opacity, animate, etc. (Like, on hover, add the class 'fade' to the body (this class can have opacity: 0, and add to the body instead of a background-image, a opacity transition, wait 250ms, and then remove the class fade and change the background. This will make a smooth opacity transition between backgrounds)
You can see an example here
https://jsfiddle.net/866wwr0f/

how to slide out content on hover - flexbox-layout

i have a beautiful little landing page with big pictures and small boxes with headings in it.
if you hover over the headings, the box around it should slide out (getting more width but shouldn't push the picture away, instead it should be above the picture) the picture next to it and shows some text there. this is all done in a flexbox-bootstrap layout.
will position: absolute, z-index and some left or right stuff do this trick as well even in a flexbox-content? or do i have to use some jscript/jQuery stuff?
here's my bootply: http://www.bootply.com/d2liwNZnCH
and the code for the greater good:
<main class="container">
<div class="row row-flex row-flex-wrap">
<div class="col-md-3 bgb fw">
<div class="contentbox flex-col">
<h2>example</h2>
</div>
</div>
<div class="col-md-3">
<div class="imagecontainer">
<img src="http://placehold.it/365x365" alt="Beispielinhalt" class="img-responsive">
</div>
</div>
<div class="col-md-3">
<div class="imagecontainer">
<img src="http://placehold.it/365x365" alt="Beispielinhalt" class="img-responsive">
</div>
</div>
<div class="col-md-3 bgr fw">
<div class="contentbox flex-col">
<h2>example</h2>
</div>
</div>
</div>
<div class="row row-flex row-flex-wrap">
<div class="col-md-8">
<div class="imagecontainer">
<img src="http://placehold.it/1265x365" alt="Beispielinhalt" class="img-responsive">
</div>
</div>
<div class="col-md-4 bgp fw">
<div class="contentbox flex-col">
<h2>example</h2>
</div>
</div>
</div>
<div class="row row-flex row-flex-wrap">
<div class="col-md-5 bgg fw">
<div class="contentbox flex-col">
<h2>example</h2>
</div>
</div>
<div class="col-md-7">
<div class="imagecontainer">
<img src="http://placehold.it/765x365" alt="Beispielinhalt" class="img-responsive">
</div>
</div>
</div>
</main> <!-- Maincontent -->
css:
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
margin: 0;
padding: 0;
}
.row-flex, .row-flex > div[class*='col-'] {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex:1 1 auto;
}
.row-flex-wrap {
-webkit-flex-flow: row wrap;
align-content: flex-start;
flex:0;
}
.row-flex > div[class*='col-'], .container-flex > div[class*='col-'] {
margin:-.2px; /* hack adjust for wrapping */
}
.container-flex > div[class*='col-'] div,.row-flex > div[class*='col-'] div {
width:100%;
}
.flex-col {
display: flex !important;
display: -webkit-flex !important;
flex: 1 100%;
flex-flow: column nowrap;
align-items: center;
justify-content: center;
}
.flex-grow {
display: flex;
-webkit-flex: 2;
flex: 2;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 0px;
word-break: break-word;
}
.contentbox {
padding: 15px 30px 15px 30px;
text-align: center;
display: block;
}
.contentbox h2 {
font-variant: small-caps;
}
.imagecontainer {
display: block;
}

did it with a second ".contentbox"-div and some helper classes and jQuery click event and i chosed to fade the readmore-text in the contentbox itself above the centered heading.
html:
<div class="col-lg-3 col-sm-6 col-xs-12 fw">
<div class="contentbox readmore bgr flex-col">
<h2>example</h2>
</div>
<div class="contentbox expand bgr flex-col">
<span aria-hidden="true" class="pull-right closebox">×</span>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata.</p>
<p>read more</p>
</div>
</div>
css:
.contentbox {
padding: 15px 30px 15px 30px;
text-align: center;
display: block;
height: auto;
min-height: 160px; /* Only for my layout */
}
.readmore {
cursor: pointer; /* So your complete box seems clickable */
}
.expand {
position: absolute;
top: 0; /* You can switch these values to whatever values wished */
left: 0; /* It will then slide from the direction you chose */
right: 0; /* but remember to put the chosen direction to 0 again on .expanded */
bottom: 0; /* for me, the fadeeffect was the most elegant way */
font-size: 15px;
opacity: 0;
visibility: hidden;
transition: all .75s ease-in-out;
}
.expanded {
top: 0;
opacity: 1;
visibility: visible;
cursor: default;
transition: all .75s ease-in-out;
}
.closebox {
font-size: 24px;
position: absolute;
right: 10px;
top: 0px;
cursor: pointer;
}
js within document ready:
$(".readmore").click(function(){
$(this).next(".expand").addClass("expanded");
});
$(".closebox").click(function(){
$(this).parent(".expanded").removeClass("expanded");
});

Uneven Responsive Image/Text Grid with Overlay

I've been trying to create the below layout to no avail. Would someone be kind enough to help me out in either creating a minimal working example or linking to somewhere that would be able to help me out with this?
What I need is a grid where the row heights are the same. With each row containing 2 images and 1 text column (the text column being placed in different locations in each row). The text column needs to be the same height as the images and I'd like the text to be vertically centered but the width of it needs to smaller (half the size). With the images, I'd like to have a white overlay on hover or touch(mobile) with a header and a couple lines for links and one link that will have a video popup (a la fancybox).
I'd like for this to be responsive and adapt to screen sizes. On mobile I'm fine with each box being 100% width but it's the tablet sizes I think I'm having issues with laying this thing out properly. The hover state would obviously need to become a touch state on these platforms.
I'd supply my code if need be but I think I'd like to just start from scratch since I feel like I've just created a huge mess.
I feel like this is something that should be so simple yet I'm having way too many problems with this and I can't seem to find any websites that showcase examples of what I'm trying to create....similar ideas have been found but not exactly what I'm looking for.
Details:
1140px as the max width of the container
444px as the max width of the images
222px as the max width of the text boxes
5px margin/padding
Any help in the right direction would be grateful.
http://jsfiddle.net/sa7v57bf/
<div class="container">
<ul>
<li class="text">
<div>
Some Text.
</div>
</li>
<li class="media">
<img src="http://placehold.it/444x342" alt="Image">
<div class="info">
<h2>HEADER</h2>
<div class="program-info">
<p>Program Page</p>
<p>Video</p>
</div>
</div>
</li>
<li class="media">
<img src="http://placehold.it/444x342" alt="Image">
<div class="info">
<h2>HEADER</h2>
<div class="program-info">
<p>Program Page</p>
<p>Video</p>
</div>
</div>
</li>
</ul>
<ul>
<li class="media">
<img src="http://placehold.it/444x342" alt="Image">
<div class="info">
<h2>HEADER</h2>
<div class="program-info">
<p>Program Page</p>
<p>Video</p>
</div>
</div>
</li>
<li class="text">
<div>
Some Text.
</div>
</li>
<li class="media">
<img src="http://placehold.it/444x342" alt="Image">
<div class="info">
<h2>HEADER</h2>
<div class="program-info">
<p>Program Page</p>
<p>Video</p>
</div>
</div>
</li>
</ul>
</div>
CSS:
*{box-sizing:border-box}.container{max-width:1140px;margin:0 auto;padding:0 10px}ul,ul li{padding:0}ul{list-style:none;margin:1% 0;font-size:0}ul li{display:inline-block;width:100%;margin:0 0 1%;height:100%;position:relative}ul li img{width:100%;display:block}ul li.text{background-color:#000;color:#FFF;padding:20px 10px;font-size:1.5rem;width:100%;vertical-align:top;text-align:center}#media (min-width:550px){ul li{width:50%}ul li.text div{margin:2%}}#media (min-width:1000px){ul li{width:39.5%;margin:0 .5%}ul li:first-child{margin-left:0}ul li:last-child{margin-right:0}ul li.text{width:19%;min-height:305px}}#media (min-width:1140px){ul li.text{min-height:341px}ul li.text div{margin:40% 0}}.info{background:rgba(255,255,255,.83);color:#000;font-size:2.4rem;left:10px;opacity:0;overflow:hidden;padding:3rem;position:absolute;top:10px;right:10px;bottom:10px;-webkit-transition:.6s;transition:.6s}.info:hover{opacity:1}

A combination of things here.
Flexbox for the equal heights, max-width where required, paddings/margin for spacing....oh, and positioning for the overlays.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.wrapper {
max-width: 1140px;
margin: auto;
margin-top: 5px;
border: 1px solid grey;
display: flex;
padding: 5px;
}
.wrapper > *:nth-child(2) {
margin: 0 5px;
}
.text,
header,
imgwrap {
flex: 1;
}
.text {
width: 20%;
padding: 1em;
max-width: 222px;
background: orange;
display: flex;
justify-content: center;
align-items: center;
}
header {
background: #bada55;
position: relative;
}
.imgwrap .overlay,
header .overlay {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba(155, 0, 65, .25);
padding: 1em;
font-weight: bold;
color: #fff;
opacity: 0;
visibility: hidden;
transition: opacity .25s ease, visibility 0.25s ease;
}
.imgwrap:hover .overlay,
header:hover .overlay {
opacity: 1;
visibility: visible;
}
.imgwrap {
width: 40%;
position: relative;
}
.imgwrap img {
width: 100%;
display: block;
max-width: 444px;
}
<div class="wrapper">
<div class="text">Lorem ipsum dolor.</div>
<header>
<div class="overlay">Overlay Text</div>
</header>
<div class="imgwrap">
<img src="http://lorempixel.com/output/food-q-c-444-250-3.jpg" alt="" />
<div class="overlay">Image text</div>
</div>
</div>
<div class="wrapper">
<div class="imgwrap">
<img src="http://lorempixel.com/output/food-q-c-444-250-3.jpg" alt="" />
<div class="overlay">Image text</div>
</div>
<div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
<div class="imgwrap">
<img src="http://lorempixel.com/output/food-q-c-444-250-3.jpg" alt="" />
<div class="overlay">Image text</div>
</div>
</div>
Media queries can manage the rest.
Codepen Demo.