We Keep Coding

CSS - How to responsively align diagonal edges?

I am trying to create a responsive diagonal layout (see attached image). Of course, this is a challenge at different screen sizes as the edges come out of alignment (example: see the last two rows on the image).
How can I vertically align the top edge of each slanted shape with the bottom edge of the one above it?
So far, the only way I've found to achieve this is by changing the left position of ::before pseudo element on the skewed shapes. But I would like to achieve this responsively as the size of the rows grow and the screen resizes.
.slant::before {
background-color: lightblue;
}
.lr .right-content,
.rr .left-content {
background-color: green;
}
.lr .slant,
.rr .slant {
position: relative;
}
.lr .slant::before,
.rr .slant::before {
content: '';
transform-origin: 100% 0%;
position: absolute;
top: 0;
bottom: 0;
}
.lr .slant::before {
transform: skewX(-10deg);
left: -100vw;
right: 0;
}
.rr .slant::before {
transform: skewx(10deg);
left: 0;
right: -100vw;
}
<div class="container">
<div class="row lr one">
<div class="col-xs-5 left-content slant">
<h1>Title</h1>
</div>
<div class="col-xs-7 right-content">
</div>
</div>
<div class="row rr card two">
<div class="col-xs-5 left-content">
</div>
<div class="col-xs-7 right-content slant">
<p>Lorem Ipsum is simply dummy...</p>
<p>Lorem Ipsum is simply dummy...</p>
<p>Lorem Ipsum is simply dummy...</p>
</div>
</div>
...
</div>

Here is an idea using clip-path:
.row {
position:relative;
background:lightblue;
height:50px;
margin:5px;
}
.row::before {
content:"";
position:absolute;
top:0;
bottom:0;
width:50%;
background:green;
}
.row.left::before {
left:0;
clip-path:polygon(0 0,100% 0, calc(100% - 30px) 100%,0 100%);
}
.row.right::before {
right:0;
clip-path:polygon(0 0,100% 0, 100% 100%,30px 100%);
}
.row.left.bottom::before,
.row.right.bottom::before{
transform:scaleY(-1);
}
<div class="row right bottom"></div>
<div class="row left" style="height:100px"></div>
<div class="row left bottom"></div>
<div class="row right" style="height:200px"></div>
<div class="row right bottom" style="height:100px"></div>
<div class="row left" style="height:100px"></div>

responsive 3 boxed layout zoom in/zoom out on mouseover

I am trying to creating responsive 3 boxed layout zoom in/zoom out on mouseover, but can't.
Example: https://www.americaneagle.com/
In American eagle website homepage slideshow below we can find above examples.
Please suggest any example or links.

For starters you could try like this.. But do not expect someone else to write your code..
Try yourself first and then ask for specific doubts and clarifications here. :)
* {
box-sizing: border-box;
}
body {
margin-top: 100px;
}
.grid:after,
.grid:before {
display: 'table' content:'';
}
.col {
float: left;
width: 33%;
padding: 0px 10px;
}
.block {
background-color: #eee;
border: 1px solid #ddd;
transform: scale(1);
transition: all 0.3s ease;
height: 200px;
z-index: 1;
position: relative;
}
.block:hover {
transform: scale(1.5);
z-index: 10;
}
.block-hidden {
display: none;
text-align: center;
padding: 20px;
}
.block:hover .block-hidden {
display: block;
}
<div class="grid">
<div class="col">
<div class="block">
<div class="block-hidden">
Hidden Content
</div>
</div>
</div>
<div class="col">
<div class="block">
<div class="block-hidden">
Hidden Content
</div>
</div>
</div>
<div class="col">
<div class="block">
<div class="block-hidden">
Hidden Content
</div>
</div>
</div>
</div>

each box you can use bootstrap col for responsive
col-lg-4 col-md-4 col-sm-4 col-xs-12
or
col-lg-4 col-md-4 col-sm-6 col-xs-12

How to fit child div inside the padding of parent class?

I am creating columns inside a row using Foundation CSS front-end framework.
<div class="row small-up-2 large-up-3 food-container">
<div class="column food-wrap">
<img src="http://placehold.it/500x500&text=Thumbnail" class="thumbnail">
<div class="panel food-panel-top">
<p>Description</p>
</div>
</div>
<div class="column food-wrap">
<img src="http://placehold.it/500x500&text=Thumbnail" class="thumbnail">
<div class="panel food-panel-top">
<p>Description</p>
</div>
</div>
<div class="column food-wrap">
<img src="http://placehold.it/500x500&text=Thumbnail" class="thumbnail">
<div class="panel food-panel-top">
<p>Description</p>
</div>
</div>
</div>
This is my CSS:
.column, .columns {
padding-left: 0.9375rem;
padding-right: 0.9375rem;
}
.food-wrap { position: relative; }
.food-wrap > .panel {
position: absolute;
width: 100%;
background-color: rgba(0, 0, 0, 0.2);
}
.food-panel-top { top: 0; }
.food-panel-bottom { bottom: 0; }
.food-wrap .thumbnail {
border: medium none;
box-shadow: none;
}
Problem: Each class .foodwrap has a padding to the left and right. I want the class .food-panel-top to be wrapped inside the paddings of .foodwrap. What happens when I give .food-panel-top a width of 100% is that it is going outside the limits. I want the .food-panel-top to have the same width with class="thumbnail"
Any help is appreciated.

I know the answer to this post now. I still to post the answer so it can help out other developers out there.
The key in solving this question is to remove the left and right padding of class="column". After removing the left and right paddings, we can now maximing the width of food panel classes to 100%.

Hover div another div appear on top

I'm creating something like this. When I hover the buttons upper content will change but each buttons have different content.
But I cannot see the content when hovering it :(
Does anybody know how to fix it? or is there any jquery fix?
Thanks in advance
#service-content {
display: none;
opacity: 1;
height: 200px;
-webkit-animation: flash 1.5s;
animation: flash 1.5s;
}
#-webkit-keyframes flash {
0% {
opacity: .4;
}
100% {
opacity: 1;
}
}
#keyframes flash {
0% {
opacity: .4;
}
100% {
opacity: 1;
}
}
#home-button-1:hover~#service-content .construction-neuve,
#home-button-2:hover~#service-content .renovation-residentiel,
#home-button-3:hover~#service-content .service-de-plan-et-design,
#home-button-4:hover~#service-content .entrepreneur-commercial,
#home-button-5:hover~#service-content .apres-sinistre,
#home-button-6:hover~#service-content .decontamination-d-amiante
{
display: block;
opacity: 1;
-webkit-animation: flash 1.5s;
animation: flash 1.5s;
}
#slider-buttons .span4 {
width: 383px;
float:left;
height:50px;
}
#slider-buttons .image-content {
position: relative;
}
#slider-buttons .image-caption {
background: #000000 none repeat scroll 0 0;
bottom: 0;
color: #6e6e6e;
padding: 10px 0;
position: absolute;
text-align: center;
text-transform: uppercase;
width: 383px;
font-weight: 600;
}
#slider-buttons .image-caption:hover {
background: #ba9444 none repeat scroll 0 0;
bottom: 0;
color: #000000;
padding: 10px 0;
position: absolute;
text-align: center;
text-transform: uppercase;
width: 383px;
font-weight: 600;
cursor: pointer;
}
<div id="service-content">
<div class="construction-neuve">
content
</div>
<div class="renovation-residentiel">
content
</div>
<div class="service-de-plan-et-design">
content
</div>
<div class="entrepreneur-commercial">
content
</div>
<div class="apres-sinistre">
content
</div>
<div class="decontamination-d-amiante">
content
</div>
</div>
<div id="slider-buttons" class="span12">
<div id="construction-neuve" class="span4 m-l00">
<div class="image-content">
<img src="images/home-buttons/home-button-1.jpg">
<div id="home-button-1" class="image-caption">Construction Neuve</div>
</div>
</div>
<div id="renovation-residentiel" class="span4 m-l10">
<div class="image-content">
<img src="images/home-buttons/home-button-2.jpg">
<div id="home-button-2" class="image-caption">Rénovation Résidentiel</div>
</div>
</div>
<div id="service-de-plan-et-design" class="span4 m-l10">
<div class="image-content">
<img src="images/home-buttons/home-button-3.jpg">
<div id="home-button-3" class="image-caption">Service de plan et design</div>
</div>
</div>
<div id="entrepreneur-commercial" class="span4 m-l00">
<div class="image-content">
<img src="images/home-buttons/home-button-4.jpg">
<div id="home-button-4" class="image-caption">Entrepreneur Commercial</div>
</div>
</div>
<div id="apres-sinistre" class="span4 m-l10">
<div class="image-content">
<img src="images/home-buttons/home-button-5.jpg">
<div id="home-button-5" class="image-caption">Aprés-Sinistre</div>
</div>
</div>
<div id="decontamination-d-amiante" class="span4 m-l10">
<div class="image-content">
<img src="images/home-buttons/home-button-6.jpg">
<div id="home-button-6" class="image-caption">Décontamination d'amiante</div>
</div>
</div>
</div>

It can be done using JQuery.
First, each part that should be hovered must have an onmouseover attribute that the first parameter of that should be a unique number. like this:
<div onmouseover="run_hover(1);"></div>
<div onmouseover="run_hover(2);"></div>
<div onmouseover="run_hover(3);"></div>
and each big part that will be shown should have a unique ID with a number that is the same with the parameter you entered for the div that should be hovered. Like this:
<div id="box_for_show">
<div id="div_1">Content 1</div>
<div id="div_2">Content 2</div>
<div id="div_3">Content 3</div>
</div>
and this is the JQuery code of that:
function run_hover(id) {
$("#box_for_show div").fadeOut(function(){
$("#div_"+id).fadeIn();
});
}
Point: #box_for_show div {display: none;}
Here is the fiddle that will work for you:
http://jsfiddle.net/h0puq1Ld/4/

It is not the best example but i hope it helps. You could also use list
$('div.image-caption').hover(function(){
var nums = $(this).attr('id');
$('#cont-'+nums).css('display','block');
}, function() {
$('.cont').hide();
});

Prevent Divs from starting a new line with percentage width

I have several divs inside another div and I want the user to be able to resize those divs but they should stay in percentage width. This example shows 6 divs with 18% width which is more than 100% together and the 6th div starts a new line:
http://jsfiddle.net/v3o3vqqo/
div {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.container {
width: 100%;
}
.inner {
width: 18%;
float: left;
margin: 1px;
}
.red {
background-color: red;
}
.orange {
background-color: orange;
}
.yellow {
background-color: yellow;
}
.green {
background-color: green;
}
.blue {
background-color: blue;
}
.purple {
background-color: purple;
}
<h4>The goal</h4>
<p>Get all the boxes to fit on one line, with equal width.</p>
<div class="container"><div class="inner red"> </div><div class="inner orange"> </div><div class="inner yellow"> </div><div class="inner green"> </div><div class="inner blue"> </div><div class="inner purple"> </div>
<!-- Plus arbitrarily many more boxes... -->
</div>
I want it to show 2 children since their width is 100% togheter and 2 children in overflow (which means I need to scroll to see the other.
The problem is, if the parent's width is 100% and the sum of the children is more than 100%, they start a new line rather then cause a horizontal scroll.
So my question is how do I cause a horizontal scroll?

You can't achieve this with floats. You will have to use different layouts.
You can use flexbox. By default it has flex-wrap: nowrap, so there is no line wrap.
You will need to use flex-shrink: 0 to prevent shrinking when the flex items occupy more space than the available one.
.container {
display: flex;
overflow: auto;
}
.inner {
width: 18%;
height: 2em;
flex-shrink: 0;
}
<h4>The goal</h4>
<p>Get all the boxes to fit on one line, with equal width.</p>
<div class="container">
<div class="inner" style="background: red"></div>
<div class="inner" style="background: orange"></div>
<div class="inner" style="background: yellow"></div>
<div class="inner" style="background: green"></div>
<div class="inner" style="background: blue"></div>
<div class="inner" style="background: purple"></div>
</div>
Alternatively, you can use inline-block, and prevent line wrapping with white-space: nowrap. However, be aware of How to remove the space between inline-block elements?
.container {
overflow: auto;
white-space: nowrap;
}
.inner {
display: inline-block;
width: 18%;
height: 2em;
}
<h4>The goal</h4>
<p>Get all the boxes to fit on one line, with equal width.</p>
<div class="container">
<div class="inner" style="background: red"></div
><div class="inner" style="background: orange"></div
><div class="inner" style="background: yellow"></div
><div class="inner" style="background: green"></div
><div class="inner" style="background: blue"></div
><div class="inner" style="background: purple"></div>
</div>

One possible solution to what I understand your problem to be is the following.
Basic idea: use display: inline-block, and prevent white space issues by putting the closing > on the next line.
div {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.container {
width: 100%;
}
.inner {
display: inline-block;
width: 20%;
}
.red {
background-color: red;
}
.orange {
background-color: orange;
}
.yellow {
background-color: yellow;
}
.green {
background-color: green;
}
.blue {
background-color: blue;
}
.purple {
background-color: purple;
}
<h4>The goal</h4>
<p>Get all the boxes to fit on one line, with equal width.</p>
<div class="container">
<div class="inner red"> </div
><div class="inner orange"> </div
><div class="inner yellow"> </div
><div class="inner green"> </div
><div class="inner blue"> </div>
<!-- Plus arbitrarily many more boxes... -->
</div>