I have a division with class "centre" inside another division called "parallaxOne". With my css, if I view it in my laptop, it is showing the divisions properly, but if I view it in a mobile phone, the "centre" division is appearing outside the "parallaxOne" division, and in other browsers, it is appearing in front of the text. Why is this happening, and how do I correct it? Here is my code:
.centre {
position: absolute;
top: 75%;
left: 50%;
transform: translateY(-15%);
width: 0;
height: 140px;
border-left: 6px dashed #0079a5;
}
.arrow {
position: absolute;
top: 0;
left: -6px;
height: 40px;
width: 6px;
background: #007;
animation: animate 2s infinite;
}
.arrow:before {
content: '';
position: absolute;
bottom: 0;
left: -10px;
width: 20px;
height: 20px;
border-bottom: 6px solid #007;
border-right: 6px solid #007;
transform: rotate(45deg);
}
#keyframes animate {
0% {
transform: translateY(0);
opacity: 0.5;
}
50% {
transform: translateY(70px);
opacity: 1;
}
100% {
transform: translateY(140px);
opacity: 0;
}
}
.container {
max-width: inherit;
margin: 0 auto;
background-color: white;
font-size: 24px;
padding: 25px;
}
.parallaxOne {
background: /*url(images/parallax3.jpg); This is an image in my computer*/yellow;
text-align: center;
height: 450px;
padding: 2%;
margin: 2% 0;
}
.parallaxOne h6 {
color: black;
font-size: 200%;
margin: 8% 30%;
padding-top: 100px;
z-index: -1;
}
.parallaxTwo {
background: /*url('images/parallax2.jpg') no-repeat center; This is an image in my computer*/green;
background-size: cover;
background-attachment: fixed;
text-align: center;
height: 600px;
padding: 2%;
}
<html>
<head>
<title>My website</title>
</head>
<body>
<header>
<h1>My website</h1>
</header>
<div class="container">
<div class="parallaxOne">
<h3>Welcome to my website!</h3>
<div class="centre">
<div class="arrow"></div>
</div>
</div>
<div class="parallaxTwo">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</body>
</html
I'm sorry for the long code, but I edited it as much as I could to reproduce the same problem.
Use this tag in your head section for responsive scaling your contents
<meta name="viewport" content="width=device-width, initial-scale=1">
Related
Still learning, I've tried everything within my knowledge to make this work.
I'm trying to apply the following:
https://codepen.io/tech-lane/pen/XWbqGyx
<div class="codepen" data-height="201" data-theme-id="light" data-default-tab="css,result" data-user="tech-lane" data-slug-hash="XWbqGyx" data-prefill='{"title":"Pure CSS | FadeIn Text with bars | KeyFrames & Scss","tags":[],"head":" <script src=\"https://kit.fontawesome.com/aa09fdd343.js\"></script>\n\n","scripts":[],"stylesheets":[]}'>
<pre data-lang="html"><div class="container">
<div class="box">
<div class="title">
<span class="block"></span>
<h1>Lane Willmore<span></span></h1>
</div>
<!-- here role goes -->
<h4 class="wordCarousel">
<div>
<!-- Use classes 2,3, or 4 to match the number of words -->
<ul class="flip4">
<li>Oh My!</li>
<li>Swoosh</li>
<li>Cool</li>
<li>Awesome</li>
</ul>
</div>
</h4>
</div>
</div>
</pre>
<pre data-lang="scss" >#import url('https://fonts.googleapis.com/css?family=Lato:300,400|Poppins:300,400,800&display=swap');
* {
margin: 0;
padding: 0;
}
body, html {
overflow: hidden;
}
.container {
width: 100%;
height: 100vh;
background: #232323;
display: flex;
justify-content: center;
align-items: center;
.box {
width: 250px;
height: 250px;
position: relative;
display: flex;
justify-content: center;
flex-direction: column;
.title {
width: 100%;
position: relative;
display: flex;
align-items: center;
height: 50px;
.block {
width: 0%;
height: inherit;
background: #ffb510;
position: absolute;
animation: mainBlock 2s cubic-bezier(.74, .06, .4, .92) forwards;
display: flex;
}
h1 {
font-family: 'Poppins';
color: #fff;
font-size: 32px;
-webkit-animation: mainFadeIn 2s forwards;
-o-animation: mainFadeIn 2s forwards;
animation: mainFadeIn 2s forwards;
animation-delay: 1.6s;
opacity: 0;
display: flex;
align-items: baseline;
position: relative;
span {
width:0px;
height: 0px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background: #ffb510;
-webkit-animation: load 0.6s cubic-bezier(.74, .06, .4, .92) forwards;
animation: popIn 0.8s cubic-bezier(.74, .06, .4, .92) forwards;
animation-delay: 2s;
margin-left: 5px;
margin-top: -10px;
position: absolute;
bottom: 13px;
right: -12px;
}
}
}
.wordCarousel {
font-size: 36px;
font-weight: 100;
color: #939393;
div {
overflow: hidden;
position: relative;
float: left;
height: 45px;
padding-top: 5px;
margin-top: -10px;
li {
font-family: Serif;
color: #ccc;
font-weight: 250;
padding: 0 5px;
height: 45px;
margin-bottom: 45px;
display: block;
}
}
}
}
}
.flip4 { animation: flip4 15s cubic-bezier(1, 1, 0.32, 1.2) infinite; }
#keyframes flip4 {
0% { margin-top: -360px; }
5% { margin-top: -270px; }
25% { margin-top: -270px; }
30% { margin-top: -180px; }
50% { margin-top: -180px; }
55% { margin-top: -90px; }
75% { margin-top: -90px; }
80% { margin-top: 0px; }
99.99% { margin-top: 0px; }
100% { margin-top: -270px; }
}
#keyframes mainBlock {
0% {
width: 0%;
left: 0;
}
50% {
width: 100%;
left: 0;
}
100% {
width: 0;
left: 100%;
}
}
#keyframes secBlock {
0% {
width: 0%;
left: 0;
}
50% {
width: 100%;
left: 0;
}
100% {
width: 0;
left: 100%;
}
}
#keyframes mainFadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes popIn {
0% {
width: 0px;
height: 0px;
background: #e9d856;
border: 0px solid #ddd;
opacity: 0;
}
50% {
width: 10px;
height: 10px;
background: #e9d856;
opacity: 1;
bottom: 45px;
}
65% {
width: 7px;
height: 7px;
bottom: 0px;
width: 15px
}
80% {
width: 10px;
height: 10px;
bottom: 20px
}
100% {
width: 7px;
height: 7px;
background: #e9d856;
border: 0px solid #222;
bottom: 13px;
}
}
#keyframes secFadeIn {
0% {
opacity: 0;
}
100% {
opacity: 0.5;
}
}
footer {
width: 350px;
height: 80px;
background: #ffb510;
position: absolute;
right: 0;
bottom: -80px;
display: flex;
justify-content: center;
align-items: center;
animation: top 0.8s forwards;
animation-delay: 4s;
span {
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
color: #232323;
font-family: 'Poppins';
i {
margin-right: 25px;
font-size: 22px;
color: #232323;
animation: icon 2s forwards;
animation-delay: 4s;
opacity: 0;
}
}
}
#keyframes top {
0% {
opacity: 0;
bottom: -80px
}
100% {
opacity: 1;
bottom: 0px
}
}
#keyframes icon {
0% {
opacity: 0;
transform: scale(0.0);
}
50% {
opacity: 1;
transform: scale(1.3) rotate(-02deg);
}
100% {
opacity: 1;
bottom: 0px;
}
}</pre>
</div>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
to my header in the layout found here:
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_make_a_website
When applying it the CSS doesn't style it correctly. I'm hoping someone here can point me in the right direction.
Try this code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Page Title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
/* Style the body */
body {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
}
/* Header/logo Title */
.header {
padding: 80px;
text-align: center;
background: #1abc9c;
color: white;
}
/* Increase the font size of the heading */
.header h1 {
font-size: 40px;
}
/* Style the top navigation bar */
.navbar {
overflow: hidden;
background-color: #333;
}
/* Style the navigation bar links */
.navbar a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 20px;
text-decoration: none;
}
/* Right-aligned link */
.navbar a.right {
float: right;
}
/* Change color on hover */
.navbar a:hover {
background-color: #ddd;
color: black;
}
/* Column container */
.row {
display: -ms-flexbox;
/* IE10 */
display: flex;
-ms-flex-wrap: wrap;
/* IE10 */
flex-wrap: wrap;
}
/* Create two unequal columns that sits next to each other */
/* Sidebar/left column */
.side {
-ms-flex: 30%;
/* IE10 */
flex: 30%;
background-color: #f1f1f1;
padding: 20px;
}
/* Main column */
.main {
-ms-flex: 70%;
/* IE10 */
flex: 70%;
background-color: white;
padding: 20px;
}
/* Fake image, just for this example */
.fakeimg {
background-color: #aaa;
width: 100%;
padding: 20px;
}
/* Footer */
.footer {
padding: 20px;
text-align: center;
background: #ddd;
}
#import url("https://fonts.googleapis.com/css?family=Lato:300,400|Poppins:300,400,800&display=swap");
.container {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.container * {
margin: 0;
padding: 0;
}
.container .box {
width: 250px;
position: relative;
display: flex;
justify-content: center;
flex-direction: column;
}
.container .box .title {
width: 100%;
position: relative;
display: flex;
align-items: center;
height: 50px;
}
.container .box .title .block {
width: 0%;
height: inherit;
background: #ffb510;
position: absolute;
animation: mainBlock 2s cubic-bezier(0.74, 0.06, 0.4, 0.92) forwards;
display: flex;
}
.container .box .title h1 {
font-family: 'Poppins';
color: #fff;
font-size: 32px;
-webkit-animation: mainFadeIn 2s forwards;
-o-animation: mainFadeIn 2s forwards;
animation: mainFadeIn 2s forwards;
animation-delay: 1.6s;
opacity: 0;
display: flex;
align-items: baseline;
position: relative;
}
.container .box .title h1 span {
width: 0px;
height: 0px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background: #ffb510;
-webkit-animation: load 0.6s cubic-bezier(0.74, 0.06, 0.4, 0.92) forwards;
animation: popIn 0.8s cubic-bezier(0.74, 0.06, 0.4, 0.92) forwards;
animation-delay: 2s;
margin-left: 5px;
margin-top: -10px;
position: absolute;
bottom: 13px;
right: -12px;
}
.container .box .wordCarousel {
font-size: 36px;
font-weight: 100;
color: #939393;
}
.container .box .wordCarousel div {
overflow: hidden;
position: relative;
float: left;
height: 45px;
padding-top: 5px;
margin-top: -10px;
}
.container .box .wordCarousel div li {
font-family: Serif;
color: #ccc;
font-weight: 250;
padding: 0 5px;
height: 45px;
margin-bottom: 45px;
display: block;
}
.flip4 {
animation: flip4 15s cubic-bezier(1, 1, 0.32, 1.2) infinite;
}
#keyframes flip4 {
0% {
margin-top: -360px;
}
5% {
margin-top: -270px;
}
25% {
margin-top: -270px;
}
30% {
margin-top: -180px;
}
50% {
margin-top: -180px;
}
55% {
margin-top: -90px;
}
75% {
margin-top: -90px;
}
80% {
margin-top: 0px;
}
99.99% {
margin-top: 0px;
}
100% {
margin-top: -270px;
}
}
#keyframes mainBlock {
0% {
width: 0%;
left: 0;
}
50% {
width: 100%;
left: 0;
}
100% {
width: 0;
left: 100%;
}
}
#keyframes secBlock {
0% {
width: 0%;
left: 0;
}
50% {
width: 100%;
left: 0;
}
100% {
width: 0;
left: 100%;
}
}
#keyframes mainFadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes popIn {
0% {
width: 0px;
height: 0px;
background: #e9d856;
border: 0px solid #ddd;
opacity: 0;
}
50% {
width: 10px;
height: 10px;
background: #e9d856;
opacity: 1;
bottom: 45px;
}
65% {
width: 7px;
height: 7px;
bottom: 0px;
width: 15px;
}
80% {
width: 10px;
height: 10px;
bottom: 20px;
}
100% {
width: 7px;
height: 7px;
background: #e9d856;
border: 0px solid #222;
bottom: 13px;
}
}
#keyframes secFadeIn {
0% {
opacity: 0;
}
100% {
opacity: 0.5;
}
}
/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
#media screen and (max-width: 700px) {
.row {
flex-direction: column;
}
}
/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
#media screen and (max-width: 400px) {
.navbar a {
float: none;
width: 100%;
}
}
</style>
</head>
<body>
<div class="header">
<div class="container">
<div class="box">
<div class="title">
<span class="block"></span>
<h1>Lane Willmore<span></span></h1>
</div>
<!-- here role goes -->
<h4 class="wordCarousel">
<div>
<!-- Use classes 2,3, or 4 to match the number of words -->
<ul class="flip4">
<li>word 1</li>
<li>word 2</li>
<li>word 3</li>
<li>word 4</li>
</ul>
</div>
</h4>
</div>
</div>
</div>
<div class="navbar">
Link
Link
Link
Link
</div>
<div class="row">
<div class="side">
<h2>About Me</h2>
<h5>Photo of me:</h5>
<div class="fakeimg" style="height:200px;">Image</div>
<p>Some text about me in culpa qui officia deserunt mollit anim..</p>
<h3>More Text</h3>
<p>Lorem ipsum dolor sit ame.</p>
<div class="fakeimg" style="height:60px;">Image</div><br>
<div class="fakeimg" style="height:60px;">Image</div><br>
<div class="fakeimg" style="height:60px;">Image</div>
</div>
<div class="main">
<h2>TITLE HEADING</h2>
<h5>Title description, Dec 7, 2017</h5>
<div class="fakeimg" style="height:200px;">Image</div>
<p>Some text..</p>
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
<br>
<h2>TITLE HEADING</h2>
<h5>Title description, Sep 2, 2017</h5>
<div class="fakeimg" style="height:200px;">Image</div>
<p>Some text..</p>
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
</div>
</div>
<div class="footer">
<h2>Footer</h2>
</div>
</body>
</html>
I've got an image in the background and I've divided the space into four colored sections. How can I get a section to reduce opacity (which would allow for image in background to show), but also show a colored box with text, WITHOUT the <h2> showing before it is hovered?
This is how I'd like it to look like before hover:
This is how it currently looks like when hovered:
What it currently looks like before hover:
This is my current code:
<style>
html, body {
height: 100%;
padding: 0;
margin: 0;
display: block;
height: 100%;
margin: 0 auto;
max-width: 100%;
background-image: url('../images/4.jpg');
background-repeat: no-repeat;
background-position: center center;
background-size: 100% 100%;
}
.container {
max-width: 100%;
max-height: 100%;
}
.homePage div {
width: 50%;
height: 50%;
float: left;
}
#tRight {
top: 0;
left: 50%;
right: 0;
bottom: 50%;
background: rgba(67, 70, 75, 1);
}
#tRight:hover {
background: rgba(67, 70, 75, .3);
}
#bLeft {
top: 50%;
left: 0;
right: 50%;
bottom: 0;
background: rgba(251, 201, 80, 1);
}
#bLeft:hover {
background: rgba(251, 201, 80, .3);
}
#bRight {
top: 50%;
left: 50%;
right: 0;
bottom : 0;
background: rgba(186, 77, 25, 1);
}
#bRight:hover {
background: rgba(186, 77, 25, .3);
}
.logo {
position: absolute;
top: 30%;
left: 44%;
z-index: 10;
display: block;
}
.logo:hover {
}
#tLeft {
top: 0;
left: 0;
right: 50%;
bottom 50%;
background: rgba(10, 95, 107, 1);
display: inline-block;
position: relative;
}
#tLeft:hover .hover h2{
transition: opacity .75s ease-out;
position: absolute;
top: 15%;
bottom: 15%;
left: 0;
right: 0;
background-color: rgba(153,153,153,.9);
padding: 20px;
font-family: 'Roboto Condensed', sans-serif;
font-weight: 800;
font-size: 2em;
color: white;
opacity: 1;
}
</style>
</head>
<body class="homePage">
<header>
<img src="asset/images/LOGO.png" class="logo">
</header>
<div id="tLeft" alt="1">
<div class="hover">
<h2><strong>Graphic Design</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </h2>
</div>
</div>
<div id="tRight" alt="1">
</div>
<div id="bLeft" alt="1">
</div>
<div id="bRight" alt="1">
</div>
</body>
Hi ritchieRitchie,
I'm not sure if I correctly understand Your question but here comes a litle bit modified your code in snipped with solution.
Generally I hid text before container div is hovered and when container is hovered change background opacity like in other three. And also added same sample texts to all 4 sections.
html,
body {
height: 100%;
padding: 0;
margin: 0;
display: block;
height: 100%;
margin: 0 auto;
max-width: 100%;
background-image: url('https://s10.postimg.org/dibczxad5/mallard0.png');
background-repeat: no-repeat;
background-position: center center;
background-size: 100% 100%;
}
.homePage div {
width: 50%;
height: 50%;
float: left;
}
.logo {
position: absolute;
top: 30%;
left: 44%;
z-index: 10;
display: block;
}
.container {
max-width: 100%;
max-height: 100%;
}
#tLeft {
top: 0;
left: 0;
right: 50%;
bottom 50%;
background: rgba(10, 95, 107, 1);
}
#tLeft:hover {
background-color: rgba(10, 95, 107, .3);
}
#tRight {
top: 0;
left: 50%;
right: 0;
bottom: 50%;
background: rgba(67, 70, 75, 1);
}
#tRight:hover {
background: rgba(67, 70, 75, .3);
}
#bLeft {
top: 50%;
left: 0;
right: 50%;
bottom: 0;
background: rgba(251, 201, 80, 1);
}
#bLeft:hover {
background: rgba(251, 201, 80, .3);
}
#bRight {
top: 50%;
left: 50%;
right: 0;
bottom: 0;
background: rgba(186, 77, 25, 1);
}
#bRight:hover {
background: rgba(186, 77, 25, .3);
}
.hover-container {
position: absolute;
}
.hover-container .hover h2 {
visibility: hidden;
}
.hover-container:hover .hover h2 {
visibility: visible;
transition: opacity .75s ease-out;
position: absolute;
top: 15%;
bottom: 15%;
left: 0;
right: 0;
padding: 20px;
font-family: 'Roboto Condensed', sans-serif;
font-weight: 800;
font-size: 1em;
color: white;
background-color: rgba(153, 153, 153, .9);
opacity: 1;
}
<body class="homePage">
<header>
<img src="asset/images/LOGO.png" class="logo">
</header>
<div id="tLeft" class="hover-container" alt="1">
<div class="hover">
<h2><strong>Graphic Design1</strong> Lorem ipsum</h2>
</div>
</div>
<div id="tRight" class="hover-container" alt="1">
<div class="hover">
<h2><strong>Graphic Design2</strong> Lorem ipsum </h2>
</div>
</div>
<div id="bLeft" class="hover-container" alt="1">
<div class="hover">
<h2><strong>Graphic Design3</strong> Lorem ipsum</h2>
</div>
</div>
<div id="bRight" class="hover-container" alt="1">
<div class="hover">
<h2><strong>Graphic Design4</strong> Lorem ipsum</h2>
</div>
</div>
</body>
If You want to hide element and act like it isn't there use display instead of visibility rule:
.hover-container .hover h2 {
display: none;
}
.hover-container:hover .hover h2 {
display: initial;
}
More informations about difference between display and visibility e.g. on W3Schools page.
Cheers
I am using skew in order to achieve the same design as the one in the photo but I could only get it right for the top part.
How can I do something like this:
you can also see on my codepen here
section#products {
background-image: url("https://www.oceana-residence.com/wp-content/uploads/2016/09/3-min-2.jpg");
background-size: cover;
background-position: top center;
background-repeat: no-repeat;
color: white;
position: relative;
h3 {
font-family: 'Titillium Web';
line-height: 1.2;
font-weight: bold;
font-size: 28px;
text-transform: uppercase;
}
div.products_box {
overflow: auto;
width: 100%;
&>div {
opacity: 0.8;
max-width: 50%;
width: 100%;
height: 450px;
display: flex;
}
.box {
width: 100%;
display: flex;
align-items: center;
.flex {
max-width: 420px;
}
}
.products_left {
background: #2b2b2b;
float: left;
text-align: right;
.fa {
font-size: 100px;
}
.box {
justify-content: flex-end;
padding-right: 50px;
}
.content {}
.left_box {
padding-left: 40px;
}
}
.products_right {
float: right;
background: #d27473;
.box {
justify-content: inital;
padding-left: 50px;
}
.flex {
padding-right: 40px;
}
.fa {
font-size: 170px;
}
}
}
}
.anchor_top {
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 10px solid white;
position: absolute;
left: 49.2%;
top: 0px;
z-index: 1;
}
.anchor_bottom_left {
width: 0;
height: 0;
border-left: 15px solid transparent;
/*border-right: 15px solid transparent;*/
border-top: 10px solid grey;
position: absolute;
left: 49.2%;
bootom: 0px;
z-index: 1;
}
.anchor_bottom_right {
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 10px solid green;
position: absolute;
left: 49.2%;
bootom: 0px;
z-index: 1;
}
<section id="products">
<div class="anchor_top"></div>
<div class="products_box">
<div class="products_left">
<div class="box">
<div class="content flex">
</div>
<div class="left_box">
<div class="flex">
<i class="fa fa-cogs" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
<div class="products_right">
<div class="box">
<div class="flex">
<i class="fa fa-mobile" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
<div class="anchor_bottom_left"></div>
<div class="anchor_bottom_right"></div>
</section>
You can achieve this using :before and :after pseudo-elements.
You can have a container element <div class="image-container image-container-col-2"> and multiple children <div class="image-container-split">.
.image-container-col-2 was added in order to mark that the container will be split in two. Therefore this solution can be adapted to more columns. Or even more, use existing CSS libraries like Bootstrap own column system and adapt that.
The following code is long and, if you are using SCSS for example, you can easily parameterize this in order to be more readable.
SOLUTION 1: content on multiple columns but not on main container
p {
font-size: 1.1em;
font-family: Arial;
color: #fff;
}
.image-container {
position: relative;
width: 500px;
height: 331px;
}
.image-container.image-container-col-2 .image-container-split {
width: 50%;
}
.image-container:before {
content: '';
position: absolute;
z-index: -2;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url(http://az616578.vo.msecnd.net/files/2016/04/09/6359580807140768861266757027_Never-Study-Hard-The-Art-of-Studying-Smart.jpg);
background-repeat: none;
background-size: cover;
}
.image-container-split {
position: relative;
height: 100%;
float: left;
box-sizing: border-box;
border: 20px solid transparent;
border-bottom-color: #fff;
text-align: center;
/* Flexbox - use this to align items inside your container */
display: flex;
justify-content: center;
align-items: center;
flex-flow: wrap column;
}
.image-container-split:first-child {
border-left: none;
}
.image-container-split:last-child {
border-right: none;
}
.image-container-split:nth-child(odd) {
padding-left: 20px;
}
.image-container-split:nth-child(even) {
padding-right: 20px;
}
.image-container-split:after {
content: '';
position: absolute;
top: -20px;
border: 10px solid #fff;
border-bottom-color: transparent;
}
.image-container-split:nth-child(odd):after {
right: -20px;
border-left-color: transparent;
}
.image-container-split:nth-child(even):after {
left: -20px;
border-right-color: transparent;
}
.image-container-split:before {
content: '';
position: absolute;
z-index: -1;
top: -20px;
right: 0;
left: 0;
bottom: -20px;
border: 20px solid transparent;
border-bottom-color: #fff;
opacity: 0.5;
}
.image-container-split:first-child:before {
border-left: none;
}
.image-container-split:last-child:before {
border-right: none;
}
.image-container-split:nth-child(odd):before {
background-color: red;
right: -20px;
}
.image-container-split:nth-child(even):before {
background-color: blue;
left: -20px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div class="image-container image-container-col-2">
<div class="image-container-split">
<p>This is some content and some more and more and more and more </p>
<p>This is some content</p>
<p>This is some content</p>
</div>
<div class="image-container-split">
<p>This is some content and some more and more and more and more </p>
<p>This is some content</p>
<p>This is some content</p>
</div>
</div>
</body>
</html>
SOLUTION 2: content on multiple columns as well as on main container
Content is placed on main container and on separate two columns (notice the smileys).
p {
font-size: 1.1em;
font-family: Arial;
color: #fff;
}
.image-container-split p {
font-size: 3em;
}
.image-container {
position: relative;
width: 500px;
height: 331px;
padding: 40px 20px;
box-sizing: border-box;
text-align: center;
/* Flexbox - use this to align content */
display: flex;
flex-flow: wrap column;
align-items: center;
justify-content: center;
}
.image-container.image-container-col-2 .image-container-split:nth-child(odd) {
left: 0;
right: 50%;
}
.image-container.image-container-col-2 .image-container-split:nth-child(even) {
left: 50%;
right: 0;
}
.image-container:before {
content: '';
position: absolute;
z-index: -4;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url(http://az616578.vo.msecnd.net/files/2016/04/09/6359580807140768861266757027_Never-Study-Hard-The-Art-of-Studying-Smart.jpg);
background-repeat: none;
background-size: cover;
}
.image-container-split {
position: absolute;
z-index: -3;
top: 0;
bottom: 0;
box-sizing: border-box;
border: 20px solid transparent;
border-bottom-color: #fff;
padding-bottom: 20px;
/* Flexbox - use this to align content */
display: flex;
flex-direction: wrap column;
align-items: center;
justify-content: center;
}
.image-container-split:first-child {
border-left: none;
padding-left: 20px;
}
.image-container-split:last-child {
border-right: none;
padding-right: 20px;
}
.image-container-split:before {
content: '';
position: absolute;
z-index: -1;
top: -20px;
border: 10px solid #fff;
border-bottom-color: transparent;
}
.image-container-split:nth-child(odd):before {
right: -20px;
border-left-color: transparent;
}
.image-container-split:nth-child(even):before {
left: -20px;
border-right-color: transparent;
}
.image-container-split:after {
content: '';
position: absolute;
z-index: -3;
top: -20px;
left: 0;
right: 0;
bottom: -20px;
opacity: 0.5;
border: 20px solid transparent;
border-bottom-color: #fff;
}
.image-container-split:first-child:after {
border-left: none;
}
.image-container-split:last-child:after {
border-right: none;
}
.image-container-split:nth-child(odd):after {
background-color: red;
right: -20px;
}
.image-container-split:nth-child(even):after {
background-color: blue;
left: -20px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div class="image-container image-container-col-2">
<p>This is some content and some more and more and more and more </p>
<p>This is some content</p>
<p>This is some content</p>
<div class="image-container-split-container">
<div class="image-container-split">
<p>☺</p>
</div>
<div class="image-container-split">
<p>☺</p>
</div>
</div>
</div>
</body>
</html>
Container with triangles only
If there needs to be container with some triangles then the following can be achieved:
The size of the image is 500 x 331.
:before - is creating the top triangle
:after + background image - is creating the bottom triangle
.image-container has a smaller height than the image in order to use that remaining part to be added to the bottom triangle
p {
font-size: 1.1em;
font-family: Arial;
color: #fff;
}
.image-container-split p {
font-size: 3em;
}
.image-container {
position: relative;
width: 500px;
height: 311px;
padding: 20px;
box-sizing: border-box;
text-align: center;
background-image: url(http://az616578.vo.msecnd.net/files/2016/04/09/6359580807140768861266757027_Never-Study-Hard-The-Art-of-Studying-Smart.jpg);
background-repeat: no-repeat;
background-size: 500px 331px;
/* Flexbox - use this to align content */
display: flex;
flex-flow: wrap column;
align-items: center;
justify-content: center;
}
.image-container:before {
content: '';
position: absolute;
top: 0;
border: 20px solid transparent;
border-top-color: #fff;
}
.image-container:after {
content: '';
left: 50%;
transform: translateX(-20px);
bottom: -40px;
position: absolute;
border: 20px solid #fff;
border-top: 20px solid transparent;
background-image: url(http://az616578.vo.msecnd.net/files/2016/04/09/6359580807140768861266757027_Never-Study-Hard-The-Art-of-Studying-Smart.jpg);
background-size: 500px 331px;
background-repeat: no-repeat;
background-position: center bottom;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div class="image-container">
<p>This is some content and some more and more and more and more </p>
<p>This is some content</p>
<p>This is some content</p>
</div>
</body>
</html>
Just few changes, complete your goal:
.anchor_top {
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 10px solid white;
position: absolute;
left: 48.9%; //change here
top: 0px;
z-index: 1;
}
For bottom part :
.anchor_bottom_left {
width: 0;
height: 0;
border-left: 15px solid transparent;
border-top: 10px solid grey;
position: absolute;
left: 48.9%; //change here
z-index: 1;
}
.anchor_bottom_right {
width: 0;
height: 0;
border-right: 15px solid transparent;
border-top: 10px solid #d98d8e;
position: absolute;
left: 50%; //change here and remove border-left
z-index: 1;
}
One option would be to work with pseudo-classes + transform:skewX.
/* Using pseudo-classes + transform skewX */
.products_box:before,
.products_box:after {
content: '';
display: block;
width: 50%;
position: absolute;
bottom: 0;
height: 15px;
background: white;
transform: skewX(50deg);
z-index: 2;
}
.products_box:before {
left: -10px;
}
.products_box:after {
right: -10px;
transform: skewX(-50deg);
}
See full snippet below.
section#products {
background-image: url("https://www.oceana-residence.com/wp-content/uploads/2016/09/3-min-2.jpg");
background-size: cover;
background-position: top center;
background-repeat: no-repeat;
color: white;
position: relative;
}
section#products h3 {
font-family: 'Titillium Web';
line-height: 1.2;
font-weight: bold;
font-size: 28px;
text-transform: uppercase;
}
section#products div.products_box {
overflow: auto;
width: 100%;
}
section#products div.products_box > div {
opacity: 0.8;
max-width: 50%;
width: 100%;
height: 450px;
display: flex;
}
section#products div.products_box .box {
width: 100%;
display: flex;
align-items: center;
}
section#products div.products_box .box .flex {
max-width: 420px;
}
section#products div.products_box .products_left {
background: #2b2b2b;
float: left;
text-align: right;
}
section#products div.products_box .products_left .fa {
font-size: 100px;
}
section#products div.products_box .products_left .box {
justify-content: flex-end;
padding-right: 50px;
}
section#products div.products_box .products_left .left_box {
padding-left: 40px;
}
section#products div.products_box .products_right {
float: right;
background: #d27473;
}
section#products div.products_box .products_right .box {
justify-content: inital;
padding-left: 50px;
}
section#products div.products_box .products_right .flex {
padding-right: 40px;
}
section#products div.products_box .products_right .fa {
font-size: 170px;
}
.anchor_top {
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 10px solid white;
position: absolute;
left: 49.2%;
top: 0px;
z-index: 1;
}
/*
.anchor_bottom_left{
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 10px solid grey;
position: absolute;
left: 49.2%;
bootom: 0px;
z-index: 1;
}
.anchor_bottom_right{
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 10px solid green;
position: absolute;
left: 49.2%;
bootom: 0px;
z-index: 1;
}
*/
/* Using pseudo-classes + transform skewX */
.products_box:before,
.products_box:after {
content: '';
display: block;
width: 50%;
position: absolute;
bottom: 0;
height: 15px;
background: white;
transform: skewX(50deg);
z-index: 2;
}
.products_box:before {
left: -10px;
}
.products_box:after {
right: -10px;
transform: skewX(-50deg);
}
<section id="products">
<div class="anchor_top"></div>
<div class="products_box">
<div class="products_left">
<div class="box">
<div class="content flex">
<section id="black-studio-tinymce-10" class="widget-1 widget-first widget-last widget-odd widget widget_black_studio_tinymce"><div class="textwidget"><h3>Importance of Business</h3>
<h3>Intelligence Technology</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris congue nisi eget justo rutrum, ut pellentesque nulla posuere. Etiam vitae fringilla massa. Aenean sit amet tellus ex.</p>
</div></section> </div>
<div class="left_box">
<div class="flex">
<i class="fa fa-cogs" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
<div class="products_right">
<!-- about_widget here -->
<div class="box">
<div class="flex">
<i class="fa fa-mobile" aria-hidden="true"></i>
</div>
<div class="content flex">
<section id="black-studio-tinymce-9" class="widget-1 widget-first widget-last widget-odd widget widget_black_studio_tinymce"><div class="textwidget"><h3>Improving Mobile</h3>
<h3>Banking Experience</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris congue nisi eget justo rutrum, ut pellentesque nulla posuere. Etiam vitae fringilla massa. Aenean sit amet tellus ex.</p>
</div></section> </div>
</div>
</div>
</div>
<div class="anchor_bottom_left"></div>
<div class="anchor_bottom_right"></div>
</section>
I need help creating responsive divs with background images that have a slant or angle in them with no border to achvive a look like this:
http://jsfiddle.net/b4zjs60k/
<div class="rr-left">
</div>
<div class="rr-right">
</div>
I have tried using background images with this solution, the only problem is the angled borders are color and if I add a background image to that it looks all messed up.
I've seen this one: http://codepen.io/jefflupinski/pen/azvsA but the only problem with the skew is that I need to have the left and right sides to be straight
So i was wondering if anyone has found a solution to make both divs touch and have responsive backgrounds or combine both in a way to incorporate images
thanks hopefully this makes sense
Try the method below and adjust as needed.
#holder {
height: auto;
width: auto;
float: left;
overflow: hidden;
font-family: calibri;
background-color: white;
position: relative;
}
#holder .content {
display: inline-block;
width: 45%;
text-align: center;
position: relative;
color: white;
cursor: pointer;
background: #2c3e50;
margin-left: 0;
z-index: 2;
}
#holder .content:hover {
background-color: #425160;
}
.content:hover .line {
background: #425160!important;
}
#holder .line {
-ms-transform: rotate(10deg);
/* IE 9 */
-webkit-transform: rotate(10deg);
/* Chrome, Safari, Opera */
transform: rotate(10deg);
border-left: solid 1px white;
position: absolute;
right: 89%;
display: block;
width: 40px;
background: inherit;
height: 250px;
bottom: -10px;
z-index: -1;
}
p,
h3 {
padding: 0 30px 0 30px;
text-align: left;
width: 70%;
}
h3 {
font-size: 24px;
line-height: 24px;
margin-bottom: 0;
}
<div id="holder">
<div class="content">
<h3>This is a header</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
</div>
<div class="content">
<div class="line"></div>
<h3>This is a header</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
</div>
</div>
<!-- End Holder -->
Here is my answer, using skew, but in a container that has overflow hidden
.header {
width: 100%;
height: 0%;
padding-bottom: 25%;
position: relative;
overflow: hidden;
}
.left {
width: 60%;
height: 100%;
position: absolute;
right: 50%;
top: 0px;
transform: skew(-20deg);
overflow: hidden;}
.right {
width: 60%;
height: 100%;
position: absolute;
left: 50%;
top: 0px;
transform: skew(-20deg);
overflow: hidden;
}
.innerleft {
content: "";
position: absolute;
width: 100%;
height: 100%;
background-image: url(http://placekitten.com/800/400);
transform: skew(20deg);
left: 10%;
background-size: cover;
}
.leftcontent {
position: absolute;
left: 100px;
top: 60px;
color: white;
font-size: 40px;
}
.right:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
background-image: url(http://placekitten.com/600/500);
transform: skew(20deg);
right: 10%;
background-size: cover;
}
<div class="header">
<div class="left">
<div class="innerleft">
<div class="leftcontent">LEFT</div>
</div>
</div>
<div class="right"></div>
</div>
The first image is how it looks (correctly) in google chrome, the second image is how it looks (incorrectly) in firefox.
Any tips that might help me resolve this in firefox? Thank you.
<div class="container">
<div id="top">
<div class="top-bar">
<div id="logo"></div>
<div class="top-bar-red-stripe">
<ul class="top-bar-social-btns">
<li>facebook</li>
<li>facebook</li>
</ul>
</div>
</div><!-- /.top-bar -->
<div id="top-left-content">
<h3>This is a title</h3>
<div class="race-drivers"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
</div>
<div id="video-content">
<h3>LATEST WEBISODE</h3>
<div class="video-file"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing</p>
View all webisodes
</div>
<div id="vote-content">
<h3>VOTE FOR WHAT HAPPENS NEXT</h3>
<div class="vote-bar">
Enhancements
Compass
Activities
Vote
</div>
</div><!-- #vote-content -->
</div><!-- /#top -->
</div><!-- /.container -->
.container {
width: 960px;
margin: 0 auto;
border: #outside-border;
#top {
background: #000 url('../images/top_background.jpg') no-repeat;
height: 505px;
#video-content {
position: absolute;
margin: 0;
padding: 0;
top: 85px;
right: 239px;
border: 1px solid red;
width: 500px;
h3 {
margin: 0;
}
p {
margin: 0;
}
.video-file {
position: absolute;
background: #ccc;
border: 2px solid #3592cd;
width: 400px;
height: 240px;
}// .video-file
a.all-webisodes-btn:link, a.all-webisodes-btn:visited {
display: inline-block;
overflow: hidden;
text-indent: -9999px;
background: transparent url('../images/all-webisodes-btn.png') no-repeat;
width: 88px;
height: 65px;
position: absolute;
top: 107px;
right: -2px;
}// .all-webisodes-btn
}// #video-content
#vote-content {
width: 442px;
position: absolute;
top: 328px;
right: -523px;
position: relative;
h3 {
margin: 0 0 0 15px;
}
.vote-bar {
position: relative;
//border:1px solid red;
background: transparent url('../images/vote-bar-bg.png') no-repeat;
width: 438px;
height: 73px;
position: relative;
a:link, a:visited {
display: inline-block;
overflow: hidden;
text-indent: -9999px;
}
a.vote-enhancements:link, a.vote-enhancements:visited {
background: transparent url('../images/enhancements_btn.png') no-repeat;
width: 86px;
height: 42px;
position: relative;
top: 10px;
left: 170px;
}
a.vote-compass:link, a.vote-compass:visited {
background: transparent url('../images/compass_btn.png') no-repeat;
width: 52px;
height: 42px;
position: relative;
top: 10px;
left: 190px;
}
a.vote-activities:link, a.vote-activities:visited {
background: transparent url('../images/activities_btn.png') no-repeat;
width: 56px;
height: 42px;
position: relative;
top: 10px;
left: 210px;
}
a.vote-btn:link, a.vote-btn:visited {
background: transparent url('../images/vote-now-btn.png') no-repeat;
width: 141px;
height: 34px;
position: relative;
top: 47px;
left: 73px;
}
}// .vote-bar
}// .vote-content
}// #top
}// .container
UPDATE: fixed, set position to relative for #video-content and set position to absolute for children elements
#video-content {
width: 500px;
position: relative;
top: 10px;
left: 459px;
h3 {
margin: 0;
}
.video-file {
position: absolute;
background: #ccc;
border: 2px solid #3592cd;
width: 400px;
height: 240px;
}// .video-file
a.all-webisodes-btn:link, a.all-webisodes-btn:visited {
display: inline-block;
overflow: hidden;
text-indent: -9999px;
background: transparent url('../images/all-webisodes-btn.png') no-repeat;
width: 88px;
height: 65px;
position: absolute;
top: 100px;
right: -3px;
}// .all-webisodes-btn
}// #video-content
It looks like the #video-content element might have margin in Firefox. That should be removed before absolute positioning elements.
Try this at the beginning of your CSS:
* { margin: 0; padding: 0px; }