We Keep Coding

Html Transistion lag only for the first time after reload

This is a gif of issue : https://gifyu.com/image/DeGX
And my code: https://jsfiddle.net/Mrsheesh/dj1L3vhq/7
i am using xampp to host this page in locale
and even jsfiddle seems laggy.
I tried to remove the image, and it worked fine.
Is there a way to fix this, without remove the image?
My code:
console.log("msg.js Loaded");
function show_msg() {
document.querySelector(".box-msg").classList.add("active");
document.querySelector(".bg-msg").classList.add("active");
}
function hide_msg() {
document.querySelector(".box-msg").classList.remove("active");
document.querySelector(".bg-msg").classList.remove("active");
}
body {
margin: 0;
}
.bg-msg {
visibility: hidden;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: rgb(0, 0, 0, 0.5);
opacity: 0;
transition: all 0.5s ease;
}
.bg-msg.active {
visibility: visible;
opacity: 1;
}
.box-msg {
visibility: hidden;
position: fixed;
left: 50%;
top: 10%;
transform: translateX(-50%);
height: 0;
width: 0;
max-width: 550px;
border-radius: 20px;
background-color: white;
border: 1px solid rgb(0, 0, 0, 0.5);
overflow: hidden;
opacity: 0;
transition: all 0.5s ease;
}
.box-msg.active {
visibility: visible;
opacity: 1;
height: 400px;
width: 50%;
}
.box-msg .box-head {
height: 20%;
width: 100%;
/* background-color: blue; */
}
/* ==================================Close Button================================= */
.box-msg .box-head .close {
position: absolute;
top: 5px;
left: 5px;
height: 20px;
width: 20px;
border-radius: 5px;
cursor: pointer;
}
.box-msg .box-head .close::after {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
content: "\D7";
/* use the hex value here... */
font-size: 30px;
color: #FFF;
line-height: 20px;
text-align: center;
}
/* ==================================Head IMG================================= */
.box-msg .box-head .background {
position: absolute;
width: 100%;
height: 20%;
overflow: hidden;
}
.background img {
position: absolute;
top: 50%;
left: 0;
transform: translate(-50%, -50%);
width: 300%;
/* animation: 10s left_right forwards; */
}
#keyframes left_right {
from {
left: 0;
}
to {
left: 100%;
}
}
/* ==================================Head Title================================= */
.box-msg .box-head .title {
position: relative;
height: 100%;
margin-left: 25px;
margin-right: 25px;
color: white;
font-size: clamp(10px, 4vw, 35px);
/* line-height: 80px;
text-align: center; */
display: flex;
justify-content: center;
align-items: center;
font-family: BebasNeue-Regular;
letter-spacing: 0.1em;
}
/* ====================================MSG Body================================= */
.box-msg .box-body {
height: 80%;
width: 100%;
/* background-color: brown; */
}
/* ======================================BTN===================================== */
.btn {
cursor: pointer;
width: 100px;
height: 50px;
background: coral;
text-align: center;
line-height: 50px;
}
<div class="btn" onclick="show_msg()">Test</div>
<div class="bg-msg"></div>
<div class="box-msg">
<div class="box-head">
<div class="background">
<img src="./img/background/bg2.jpg" alt="">
</div>
<div class="close" onclick="hide_msg()">Close</div>
<div class="title">Title</div>
</div>
<div class="box-body">
<div class="body-text">Body Text</div>
</div>
</div>

Z-Index: Divs not overlapping?

Creating a landing page made up of 4 equal sections (Divs). When you hover over a section it is supposed to increase in size, while the others decrease in size(either height or width depending on it's position to the hovered div.
Two Problems....
1. The decrease in height does not work(the decrease in width does)
2. The top two sections expand behind the bottom two sections when hovered over. The bottom two sections expand over the top two sections, which is what I'd rather have
<div class="container">
<section class="screen top-left">
<h1>Jeff</h1>
About
</section>
<section class="screen top-right">
<h1>Renee</h1>
About
</section>
<section class="screen bottom-left">
<h1>Mike</h1>
About
</section>
<section class="screen bottom-right">
<h1>Chris</h1>
About
</section>
</div>
#import "reset";
#import "variables";
#import "mixins";
h1 {
font-size: 5rem;
color: #fff;
position: absolute;
left: 50%;
top: 10%;
transform: translateX(-50%);
white-space: nowrap;
font-family: 'Playfair Display', serif;
}
.button {
display: block;
position: absolute;
left: 50%;
top: 55%;
height: 1.6rem;
padding-top: 0.6rem;
width: 10rem;
text-align: center;
color: white;
border: 3px solid #fff;
border-radius: 4px;
font-weight: 600;
text-transform: uppercase;
text-decoration: none;
transform: translateX(-50%);
transition: all .2s;
}
.screen.top-left .button:hover {
background-color: $top-left-button-hover;
border-color: $top-left-button-hover;
}
.screen.top-right .button:hover {
background-color: $top-right-button-hover;
border-color: $top-right-button-hover;
}
.screen.bottom-left .button:hover {
background-color: $bottom-left-button-hover;
border-color: $bottom-left-button-hover;
}
.screen.bottom-right .button:hover {
background-color: $bottom-right-button-hover;
border-color: $bottom-right-button-hover;
}
.container {
position: relative;
width: 100%;
height: 100%;
background: $container-bgColor;
.screen {
position: absolute;
width: 50%;
height: 50%;
overflow: hidden;
}
}
.screen.top-left {
left: 0;
background: url('../img/dog1.jpg') center center no-repeat;
background-size: cover;
&:before {
position: absolute;
content: "";
width: 100%;
height: 100%;
background: $top-left-bgColor;
}
}
.screen.top-right {
right: 0;
background: url('../img/dog2.jpg') center center no-repeat;
background-size: cover;
&:before {
position: absolute;
content: "";
width: 100%;
height: 100%;
background: $top-right-bgColor;
}
}
.screen.bottom-left {
left: 0;
bottom: 0;
background: url('../img/dog3.jpg') center center no-repeat;
background-size: cover;
&:before {
position: absolute;
content: "";
width: 100%;
height: 100%;
background: $bottom-left-bgColor;
}
}
.screen.bottom-right {
right: 0;
bottom: 0;
background: url('../img/dog4.jpg') center center no-repeat;
background-size: cover;
&:before {
position: absolute;
content: "";
width: 100%;
height: 100%;
background: $bottom-right-bgColor ;
}
}
.screen.top-left, .screen.top-right,
.screen.bottom-left, .screen.bottom-right,
.screen.top-left:before, .screen.top-right:before,
.screen.bottom-left:before, .screen.bottom-right:before {
transition: $animateSpeed all ease-in-out;
}
// Hover top left
.hover-top-left .top-left {
width: $hover-width;
height: $hover-height;
}
.hover-top-left .top-right {
width: $small-width;
}
.hover-top-left .bottom-left .bottom-right { // no work
height: $small-height;
}
.hover-top-left .top-right:before
.bottom-right:before .bottom-left:before {
z-index: 2;
}
// Hover top right
.hover-top-right .top-right {
width: $hover-width;
height: $hover-height;
}
.hover-top-right .top-left {
width: $small-width;
}
.hover-top-right .bottom-right .bottom-left { // no work
height: $small-height;
}
.hover-top-right .bottom-right:before
.bottom-left:before .top-left:before {
z-index: 2;
}
// Hover bottom left
.hover-bottom-left .bottom-left {
width: $hover-width;
height: $hover-height;
}
.hover-bottom-left .bottom-right {
width: $small-width;
}
.hover-bottom-left .top-left .top-right {
height: $small-height;
}
.hover-bottom-left .top-right:before
.bottom-right:before .bottom-left:before {
z-index: 2;
}
// Hover bottom right
.hover-bottom-right .bottom-right {
width: $hover-width;
height: $hover-height;
}
.hover-bottom-right .bottom-left {
width: $small-width;
}
.hover-bottom-right .top-left .top-right {
height: $small-height;
}
.hover-bottom-right .top-right:before
.top-left:before .bottom-left:before {
z-index: 2;
}
#media(max-width: 800px) {
h1 {
font-size: 2rem;
}
.button {
width: 12rem;
}
}
#media(max-height: 700px) {
.button {
top: 70%;
}
}
$container-bgColor: #444;
$top-left-bgColor: rgba(255, 122, 105, 0.7);
$top-left-button-hover: rgba(255, 122, 105, 0.6);
$top-right-bgColor: rgba(177, 118, 222, 0.7);
$top-right-button-hover: rgba(177, 118, 222, 0.6);
$bottom-left-bgColor: rgba(142, 204, 245, 0.7);
$bottom-left-button-hover: rgba(142, 204, 245, 0.6);
$bottom-right-bgColor: rgba(118, 222, 138, 0.7);
$bottom-right-button-hover: rgba(118, 222, 138, 0.6);
$hover-width: 75%;
$hover-height: 75%;
$small-width: 25%;
$small-height: 25%;
$animateSpeed: 1000ms;

From your explanation, I believe this the effect you're trying to achieve.
The thing is you can use + or ~ to directly manipulate elements that comes after the hovered element. But in cases where you need to manipulate the ones that come before, you can use a bit of JS.
So my solution does so, using only CSS where applicable and JS where needed.
Hope this helps.
Cheers
$(document).ready(function(){
// top-right hover
$('.top-right').mouseover(function(){
$('.top-left').addClass('shrink-left');
});
$('.top-right').mouseout(function(){
$('.top-left').removeClass('shrink-left');
});
// bottom elements hover
$('.bottom-right').mouseover(function(){
$('.top-left, .top-right').addClass('shrink-up');
$('.bottom-left').addClass('shrink-left');
});
$('.bottom-right').mouseout(function(){
$('.top-left, .top-right').removeClass('shrink-up');
$('.bottom-left').removeClass('shrink-left');
});
$('.bottom-left').mouseover(function(){
$('.top-left, .top-right').addClass('shrink-up');
});
$('.bottom-left').mouseout(function(){
$('.top-left, .top-right').removeClass('shrink-up');
});
});
h1 {
font-size: 5rem;
color: #fff;
position: absolute;
left: 50%;
top: 10%;
transform: translateX(-50%);
white-space: nowrap;
font-family: 'Playfair Display', serif;
}
.button {
display: block;
position: absolute;
left: 50%;
top: 55%;
height: 1.6rem;
padding-top: 0.6rem;
width: 10rem;
text-align: center;
color: white;
border: 3px solid #fff;
border-radius: 4px;
font-weight: 600;
text-transform: uppercase;
text-decoration: none;
transform: translateX(-50%);
transition: all .2s;
}
.screen.top-left .button:hover {
background-color: rgba(255, 122, 105, 0.6);
border-color: rgba(255, 122, 105, 0.6);
}
.screen.top-right .button:hover {
background-color: rgba(177, 118, 222, 0.6);
border-color: rgba(177, 118, 222, 0.6);
}
.screen.bottom-left .button:hover {
background-color: rgba(142, 204, 245, 0.6);
border-color: rgba(142, 204, 245, 0.6);
}
.screen.bottom-right .button:hover {
background-color: rgba(118, 222, 138, 0.6);
border-color: rgba(118, 222, 138, 0.6);
}
.container {
position: relative;
width: 100%;
height: 100%;
background: #444;
}
.screen {
position: absolute;
width: 50%;
height: 50%;
overflow: hidden;
}
.screen.top-left {
left: 0;
background: url('../img/dog1.jpg') center center no-repeat;
background-size: cover;
}
.screen.top-left:before {
position: absolute;
content: "";
width: 100%;
height: 100%;
background: rgba(255, 122, 105, 0.7);
}
.screen.top-right {
right: 0;
background: url('../img/dog2.jpg') center center no-repeat;
background-size: cover;
}
.screen.top-right:before {
position: absolute;
content: "";
width: 100%;
height: 100%;
background: rgba(177, 118, 222, 0.7);
}
.screen.bottom-left {
left: 0;
bottom: 0;
background: url('../img/dog3.jpg') center center no-repeat;
background-size: cover;
}
.screen.bottom-left:before {
position: absolute;
content: "";
width: 100%;
height: 100%;
background: rgba(142, 204, 245, 0.7);
}
.screen.bottom-right {
right: 0;
bottom: 0;
background: url('../img/dog4.jpg') center center no-repeat;
background-size: cover;
}
.screen.bottom-right:before {
position: absolute;
content: "";
width: 100%;
height: 100%;
background: rgba(118, 222, 138, 0.7) ;
}
.screen.top-left, .screen.top-right,
.screen.bottom-left, .screen.bottom-right,
.screen.top-left:before, .screen.top-right:before,
.screen.bottom-left:before, .screen.bottom-right:before {
transition: 1000ms all ease-in-out;
}
/* Pure CSS Effects */
.top-left:hover {
width: 75%;
height: 75%;
z-index: 100;
}
.top-left:hover + .top-right {
width: 25%;
height: 75%;
}
.top-left:hover ~ .bottom-left,
.top-left:hover ~ .bottom-right{
height: 25%;
}
.top-left:hover + .top-right:before,
.top-left:hover ~ .bottom-right:before,
.top-left:hover ~ .bottom-left:before {
z-index: 99;
}
.top-right:hover {
width: 75%;
height: 75%;
z-index: 100;
}
.top-right:hover + .top-left {
width: 25%;
}
.top-right:hover ~ .bottom-right,
.top-right:hover + .bottom-left {
height: 25%;
}
.top-right:hover ~ .bottom-right:before,
.top-right:hover + .bottom-left:before{
z-index: 99;
}
.bottom-left:hover {
width: 75%;
height: 75%;
z-index: 100;
}
.bottom-left:hover + .bottom-right {
width: 25%;
height: 75%;
}
.bottom-right:hover {
width: 75%;
height: 75%;
z-index: 100;
}
/* Added for JS styling */
.shrink-left{
height: 75%;
width: 25%;
z-index: 99;
}
.shrink-up{
height: 25%;
z-index: 99;
}
.shrink-left.top-left::before,
.shrink-up.top-left::before,
.shrink-up.top-right:before,
.shrink-left.bottom-left:before{
z-index: 99;
}
.container{
width: 100vw;
height: 100vh;
position: relative;
}
#media(max-width: 800px) {
h1 {
font-size: 2rem;
}
.button {
width: 12rem;
}
}
#media(max-height: 700px) {
.button {
top: 70%;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<section class="screen top-left">
<h1>Jeff</h1>
About
</section>
<section class="screen top-right">
<h1>Renee</h1>
About
</section>
<section class="screen bottom-left">
<h1>Mike</h1>
About
</section>
<section class="screen bottom-right">
<h1>Chris</h1>
About
</section>
</div>
PS View snippet in full page

How can I mask the visibility of the text with the overlapping element using CSS

If you see the GIF provided below the text only appears after it has crossed the Black Dot. Until then it is invisible. This was made using Flash but how can we achieve this using CSS?
Here is what I've got so far:
#import url("https://fonts.googleapis.com/css?family=Ubuntu+Mono");
body {
height: 100vh;
background: #222;
padding: 0;
margin: 0;
font-family: "Ubuntu Mono";
}
.ypn-logo {
background: green;
display: flex;
flex-direction: row;
position: relative;
align-items: center;
justify-content: center;
padding: 10px;
width: 220px;
height: 220px;
border-radius: 220px;
z-index: 1;
}
.ypn-text {
font-size: 3.5em;
color: white;
transition: all 1s cubic-bezier(0.86, 0, 0.07, 1);
margin-left: -80px;
z-index: 0;
}
.ypn-text:before {
background: red;
content: "";
position: absolute;
width: 180px;
height: 180px;
border-radius: 180px;
z-index: -1;
transition: all 1s cubic-bezier(0.86, 0, 0.07, 1);
top: 30px;
left: 10px;
}
.ypn-logo:hover>.ypn-text:before {
left: 50px;
}
.ypn-text:after {
background: #222;
content: "";
position: absolute;
width: 50px;
height: 50px;
border-radius: 180px;
transition: all 1s cubic-bezier(0.86, 0, 0.07, 1);
top: 95px;
left: 130px;
z-index: 1;
}
.ypn-logo:hover>.ypn-text:after {
left: 60px;
}
.ypn-logo:hover>.ypn-text {
margin-left: 80px;
}
<div class="ypn-logo">
<div class="ypn-text">RUN</div>
</div>
I thought of making a div and locking its right border with the central axis of the dot in the middle but this hides the Green and Red elements also. Is there a way to just block the text element but not other elements?
#import url("https://fonts.googleapis.com/css?family=Ubuntu+Mono");
body {
height: 100vh;
background: #222;
padding: 0;
margin: 0;
font-family: "Ubuntu Mono";
}
.ypn-logo {
background: green;
display: flex;
flex-direction: row;
position: relative;
align-items: center;
justify-content: center;
padding: 10px;
width: 220px;
height: 220px;
border-radius: 220px;
z-index: 1;
}
.ypn-text {
font-size: 3.5em;
color: white;
transition: all 1s cubic-bezier(0.86, 0, 0.07, 1);
margin-left: -80px;
z-index: 0;
}
.ypn-before {
background: red;
content: "";
position: absolute;
width: 180px;
height: 180px;
border-radius: 180px;
z-index: -1;
transition: all 1s cubic-bezier(0.86, 0, 0.07, 1);
top: 30px;
left: 10px;
}
.ypn-logo:hover>.ypn-before {
left: 50px;
}
.ypn-after {
background: #222;
content: "";
position: absolute;
width: 50px;
height: 50px;
border-radius: 180px;
transition: all 1s cubic-bezier(0.86, 0, 0.07, 1);
top: 95px;
left: 130px;
z-index: 1;
}
.ypn-logo:hover>.ypn-after {
left: 60px;
}
.ypn-logo:hover>.ypn-text {
margin-left: 80px;
}
.ypn-after:after {
width: 130px;
background: black;
height: 3em;
content: '';
position: absolute;
left: -100px;
}
<div class="ypn-logo">
<div class="ypn-before"></div>
<div class="ypn-text">YPN</div>
<div class="ypn-after"></div>
</div>

You can make the text the child of an element with a background color. Then make the mask by creating an element with a dot and a div set to the background color of the parent. Make the parent's overflow:hidden so the colored area isn't seen as it moves to uncover the text.
$('.overlay').on('click', function() {
$(this).toggleClass('hidden');
});
$(window).on('load', function() {
$('.overlay').removeClass('hidden');
});
body {
background: red;
}
.container {
width: 80%;
height: 60px;
border-radius: 60px;
background: white;
overflow: hidden;
margin: 20px auto;
position: relative;
}
.overlay {
width: 100%;
height: 100%;
background: white;
transition: left 2s ease-out;
position: absolute;
top: 0;
left: calc( -100% + 60px);
}
.overlay.hidden {
left: 0;
}
.overlay::after {
content: '';
background: black;
height: 60px;
width: 60px;
border-radius: 60px;
position: absolute;
right: 0;
top: 0;
}
.text {
font-size: 50px;
line-height: 60px;
width: 100%;
text-align: center;
}
p {
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="text">ezoom</div>
<div class="overlay hidden"></div>
</div>
<p> click the circle to toggle the animation</p>
EDIT :
After using the above principle, here's the final code for the effect you need:
#import url("https://fonts.googleapis.com/css?family=Ubuntu+Mono");
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
padding: 0;
margin: 0;
background: #222;
font-family: "Ubuntu Mono";
}
.ypn-logo {
background: green;
display: flex;
flex-direction: row;
position: relative;
align-items: center;
justify-content: center;
padding: 10px;
width: 220px;
height: 220px;
border-radius: 220px;
}
.ypn-before {
background: red;
content: '';
overflow: hidden;
width: 180px;
height: 180px;
border-radius: 180px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
position: relative;
left: -20px;
transition: all 1s cubic-bezier(0.86, 0, 0.07, 1);
}
.ypn-text {
background: none;
position: absolute;
left: 20px;
font-size: 3.2em;
color: #ddd;
transition: all 1s cubic-bezier(0.86, 0, 0.07, 1);
}
.ypn-dot {
width: 200px;
height: 200px;
position: relative;
background: red;
left: -35px;
transition: all 1s cubic-bezier(0.86, 0, 0.07, 1);
}
.ypn-dot:after {
content: '';
position: absolute;
background: #222;
width: 60px;
height: 60px;
border-radius: 60px;
top: 70px;
right: -25px;
transition: all 1s cubic-bezier(0.86, 0, 0.07, 1);
}
.ypn-logo:hover>.ypn-before {
left: 20px;
}
.ypn-logo:hover>.ypn-before .ypn-dot {
left: -135px;
}
.ypn-logo:hover>.ypn-before .ypn-text {
left: 80px;
}
<div class="ypn-logo">
<div class="ypn-before">
<div class="ypn-text">RUN</div>
<div class="ypn-dot"></div>
</div>
</div>

Here is an idea where you can rely on one element and consider a width/margin animation:
.box {
font-size: 50px;
font-weight: bold;
line-height: 1em;
display: inline-flex;
justify-content:flex-end;
overflow:hidden;
white-space:nowrap;
border-radius:1em 0 0 1em;
background: radial-gradient(#000 0.48em, transparent 0.5em) left/1em 1em no-repeat;
width:0;
margin-left:200px;
padding: 5px 1em 5px 0;
transition:1s;
}
body:hover .box {
width:200px;
margin-left:0px;
padding: 5px 0 5px 1em;
}
<div class="box">
some text
</div>
To avoid setting a specific width you can adjust alignment and consider max-width:
.container {
text-align:right;
width:500px;
}
.box {
font-size: 50px;
font-weight: bold;
line-height: 1em;
display: inline-flex;
justify-content:flex-end;
overflow:hidden;
white-space:nowrap;
border-radius:1em 0 0 1em;
background: radial-gradient(#000 0.48em, transparent 0.5em) left/1em 1em no-repeat;
max-width:0;
padding: 5px 1em 5px 0;
transition:max-width 1s,padding 0s 1s;
}
body:hover .box {
max-width:100%;
padding: 5px 0 5px 1em;
transition:max-width 1s;
}
<div class="container">
<div class="box">
some text
</div>
</div>

Custom JQuery Slider doesn't work as expected

I tried to make a custom slider for my projects on my website.
It's important for me to use div tags to slide, because I want to include more information on it, like text and buttons.
It has a "next"- and "previous" button. The problem is that it doesn't slide back and it doesn't start at the beginning after it reached the last slide.
What's going wrong?
$(document).ready(function() {
projectSlider($('.projects').children('.project').first());
function projectSlider(projects) {
$(projects).show(function() {
$('.next').click(function() {
if (projects.next().hasClass('project')) {
projectSlider(projects.next());
} else {
projectSlider($('.projects').children('.project').first());
}
});
$('.previous').click(function() {
if (projects.prev().hasClass('project')) {
projectSlider(projects.prev());
} else {
projectSlider($('.projects').children('.project').first());
}
});
});
}
});
html,
body {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
font-family: "Roboto Condensed", sans-serif;
}
/* */
a {
text-decoration: none;
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
font-weight: normal;
}
.inline-list {
list-style-type: none;
padding: 0;
}
.inline-list>li {
display: inline-block;
}
/* */
header {
display: block;
position: relative;
top: 0;
left: 0;
width: 35%;
height: 100vh;
background: #fff;
}
.profile {
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.avatar {
display: inline-block;
position: relative;
width: 80px;
height: 80px;
background: url("../img/avatar.jpg") no-repeat center center;
background-size: cover;
border-radius: 100%;
}
.socialmedia>li {
padding: 0 5px 0 0;
}
.socialmedia>li>a {
color: #212121;
}
/* */
main {
display: block;
position: absolute;
top: 0;
right: 0;
width: 65%;
height: 100%;
background: #EEEEEE;
}
.controls {
display: block;
position: absolute;
z-index: 100000;
top: 50%;
transform: translateY(-50%);
width: 100%;
}
.control {
display: inline-block;
position: absolute;
width: 36px;
height: 36px;
margin: 0 20px 0 20px;
background: #f5f5f5;
color: #212121;
border-radius: 100%;
cursor: pointer;
}
.backward {
left: 0;
float: left;
text-align: center;
}
.backward-arrow {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 18px;
height: 18px;
background: url("../img/icon/left-chevron.svg") no-repeat center center;
background-size: cover;
color: #212121;
}
.forward-arrow {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 18px;
height: 18px;
background: url("../img/icon/right-chevron.svg") no-repeat center center;
background-size: cover;
color: #212121;
}
.forward {
right: 0;
float: right;
}
.projects {
display: block;
position: relative;
width: 100%;
height: 100vh;
}
.project {
display: none;
position: absolute;
width: 100%;
height: 100vh;
}
.dog {
background: red;
}
.cat {
background: green;
}
.rabbit {
background: blue;
}
/* */
footer {
display: block;
position: relative;
bottom: 0;
padding: 0;
width: 100%;
height: 36px;
background: #fff;
}
.made {
display: inline-block;
position: absolute;
float: left;
left: 0;
top: 50%;
height: 38px;
transform: translateY(-50%);
}
.made>p {
display: inline-block;
}
.legal {
display: inline-block;
position: absolute;
float: right;
right: 0;
top: 50%;
height: 38px;
transform: translateY(-50%);
}
/* */
.envelope {
display: inline-block;
position: relative;
width: 18px;
height: 18px;
background: url("../img/icon/envelope.svg") no-repeat center center;
background-size: cover;
}
.twitter {
display: inline-block;
position: relative;
width: 18px;
height: 18px;
background: url("../img/icon/brands/twitter.svg") no-repeat center center;
background-size: cover;
}
.dribbble {
display: inline-block;
position: relative;
width: 18px;
height: 18px;
background: url("../img/icon/brands/dribbble.svg") no-repeat center center;
background-size: cover;
}
.github {
display: inline-block;
position: relative;
width: 18px;
height: 18px;
background: url("../img/icon/brands/github.svg") no-repeat center center;
background-size: cover;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
<main>
<div class="project-slider">
<div class="controls">
<div class="control previous">
<div class="backward-arrow"><-</div>
</div>
<div class="control forward next">
<div class="forward-arrow">-></div>
</div>
</div>
<div class="projects">
<div class="project dog"></div>
<div class="project cat"></div>
<div class="project rabbit"></div>
</div>
</div>
</main>
JSFiddle

Your code seems to be unnecessarily recursive. Each time you click an arrow, the click handlers are bound again. Also, if you click "next", the object passed to projectSlider contains only a single project element, so there will be no "next" or "previous" in that object.
I suggest a different approach. In my example below, for each click, the appropriate project (based on a numeric index) is hidden, then appended to the project container (which stacks it on top of the others), and then re-shown (for animation purposes).
function refreshProjects(project_holder, projects, project_index) {
project_index = (project_index + projects.length) % projects.length;
var thisProject = projects.eq(project_index);
thisProject.hide().appendTo(project_holder).show(250);
}
$(function() {
var project_holder = $('.projects');
var projects = project_holder.children('.project');
var project_index = 0;
$('.control-next').click(function() {
refreshProjects(project_holder, projects, ++project_index);
});
$('.control-previous').click(function() {
refreshProjects(project_holder, projects, --project_index);
});
});
body {
padding: 0;
margin: 0;
font-size: 10px;
}
main {
position: absolute;
top: 0;
right: 0;
width: 65%;
height: 100%;
background: #EEEEEE;
}
.controls {
position: absolute;
z-index: 100000;
top: 50%;
transform: translateY(-50%);
width: 100%;
}
.control {
position: absolute;
background: #f5f5f5;
border: none;
color: #212121;
border-radius: 50%;
cursor: pointer;
width: 1.8em;
height: 1.8em;
padding: .5em;
box-sizing: content-box;
font-size: 1.4em;
outline: 0;
}
.control-previous {
left: 1em;
}
.control-next {
right: 1em;
}
.projects {
width: 100%;
height: 100vh;
}
.project {
position: absolute;
width: 100%;
height: 100%;
}
.project:not(:first-child) {
display: none;
}
.dog {
background: red;
}
.cat {
background: green;
}
.rabbit {
background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
<main>
<div class="project-slider">
<div class="controls">
<button type="button" class="control control-previous"><-</button>
<button type="button" class="control control-next">-></button>
</div>
<div class="projects">
<div class="project dog"></div>
<div class="project cat"></div>
<div class="project rabbit"></div>
</div>
</div>
</main>

How to divide a webpage in three vertical parts?

I wanted to divide a landing page into three vertical parts. But I am failing to do so.
Here is my code:
const left = document.querySelector(".left");
const middle = document.querySelector(".middle");
const right = document.querySelector(".right");
const container = document.querySelector(".container");
left.addEventListener("mouseenter", () => {
container.classList.add("hover-left");
});
left.addEventListener("mouseleave", () => {
container.classList.remove("hover-left");
});
middle.addEventListener("mouseenter", () => {
container.classList.add("hover-middle");
});
middle.addEventListener("mouseleave", () => {
container.classList.remove("hover-middle");
});
right.addEventListener("mouseenter", () => {
container.classList.add("hover-right");
});
right.addEventListener("mouseleave", () => {
container.classList.remove("hover-right");
});
:root {
--container-bg-color: #333;
--left-bg-color: rgba(223, 39, 39, 0.7);
--left-button-hover-color: rgba(161, 11, 11, 0.3);
--middle-bg-color: rgba(39, 217, 223, 0.7);
--middle-button-hover-color: rgba(14, 32, 196, 0.151);
--right-bg-color: rgba(43, 43, 43, 0.8);
--right-button-hover-color: rgba(92, 92, 92, 0.3);
--hover-width: 70%;
--other-width: 15%;
--speed: 1000ms;
}
html,
body {
padding: 0;
margin: 0;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
width: 100%;
height: 100%;
overflow-x: hidden;
}
h1 {
font-size: 3rem;
color: #fff;
position: absolute;
left: 50%;
top: 20%;
transform: translateX(-50%);
white-space: nowrap;
}
.button {
display: block;
position: absolute;
left: 50%;
top: 40%;
height: 2.5rem;
padding-top: 1.3rem;
width: 15rem;
text-align: center;
color: #fff;
border: #fff solid 0.2rem;
font-size: 1rem;
font-weight: bold;
text-transform: uppercase;
text-decoration: none;
transform: translateX(-50%);
}
.split.left .button:hover {
background-color: var(--left-button-hover-color);
border-color: var(--left-button-hover-color);
}
.split.middle .button:hover {
background-color: var(--middle-button-hover-color);
border-color: var(--middle-button-hover-color);
}
.split.right .button:hover {
background-color: var(--right-button-hover-color);
border-color: var(--right-button-hover-color);
}
.container {
position: relative;
width: 100%;
height: 100%;
background: var(--container-bg-color);
}
.split {
position: absolute;
width: 33.33%;
height: 100%;
overflow: hidden;
}
.split.left {
left: 0;
background: url('https://image.ibb.co/m56Czw/designer.jpg') center center no-repeat;
background-size: cover;
}
.split.left:before {
position: absolute;
content: "";
width: 100%;
height: 100%;
background: var(--left-bg-color);
}
.split.middle {
display: inline-block;
background: url('https://image.ibb.co/m56Czw/designer.jpg') center center no-repeat;
background-size: cover;
}
.split.middle:before {
position: absolute;
content: "";
width: 100%;
height: 100%;
background: var(--middle-bg-color);
}
.split.right {
right: 0;
background: url('https://image.ibb.co/m3ZbRb/programmer.png') center center no-repeat;
background-size: cover;
}
.split.right:before {
position: absolute;
content: "";
width: 100%;
height: 100%;
background: var(--right-bg-color);
}
.split.left,
.split.middle,
.split.right,
.split.right:before,
.split.left:before,
.split.middle:before {
transition: var(--speed) all ease-in-out;
}
.hover-left .left {
width: var(--hover-width);
}
.hover-left .middle {
width: var(--other-width);
}
.hover-left .right {
width: var(--other-width);
}
.hover-left .middle:before {
z-index: 2;
}
.hover-middle .middle {
width: var(--hover-width);
}
.hover-middle .left {
width: var(--other-width);
}
.hover-middle .right {
width: var(--other-width);
}
.hover-middle .right:before {
z-index: 2;
}
.hover-right .right {
width: var(--hover-width);
}
.hover-right .middle {
width: var(--other-width);
}
.hover-right .left {
width: var(--other-width);
}
.hover-right .middle:before .left:before {
z-index: 2;
}
#media(max-width: 800px) {
h1 {
font-size: 2rem;
}
.button {
width: 12rem;
}
}
#media(max-height: 700px) {
.button {
top: 70%;
}
}
<body>
<div class="container">
<div class="split left">
<h1>The Designer</h1>
Read More
</div>
<div class="split middle">
<h1>The Middle</h1>
Read More
</div>
<div class="split right">
<h1>The Programmer</h1>
Read More
</div>
</div>
<script src="js/main.js"></script>
</body>
I am getting an output like this:
output of the current code
I wanted to insert .middle into the center part of the page? Where am I making a mistake? Transitions are also overlapping onto each other.

Did some changes in your CSS code. You have to set the position of the middle section on hover like below
.split.middle {
left: 33.333%;
}
.hover-left .middle {
left: 70%;
}
.hover-middle .middle {
left: 15%;
}
.hover-right .middle {
left: 13%;
}
const left = document.querySelector(".left");
const middle = document.querySelector(".middle");
const right = document.querySelector(".right");
const container = document.querySelector(".container");
left.addEventListener("mouseenter", () => {
container.classList.add("hover-left");
});
left.addEventListener("mouseleave", () => {
container.classList.remove("hover-left");
});
middle.addEventListener("mouseenter", () => {
container.classList.add("hover-middle");
});
middle.addEventListener("mouseleave", () => {
container.classList.remove("hover-middle");
});
right.addEventListener("mouseenter", () => {
container.classList.add("hover-right");
});
right.addEventListener("mouseleave", () => {
container.classList.remove("hover-right");
});
:root {
--container-bg-color: #333;
--left-bg-color: rgba(223, 39, 39, 0.7);
--left-button-hover-color: rgba(161, 11, 11, 0.3);
--middle-bg-color: rgba(39, 217, 223, 0.7);
--middle-button-hover-color: rgba(14, 32, 196, 0.151);
--right-bg-color: rgba(43, 43, 43, 0.8);
--right-button-hover-color: rgba(92, 92, 92, 0.3);
--hover-width: 70%;
--other-width: 15%;
--speed: 1000ms;
}
html,
body {
padding: 0;
margin: 0;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
width: 100%;
height: 100%;
overflow-x: hidden;
}
h1 {
font-size: 3rem;
color: #fff;
position: absolute;
left: 50%;
top: 20%;
transform: translateX(-50%);
white-space: nowrap;
}
.button {
display: block;
position: absolute;
left: 50%;
top: 40%;
height: 2.5rem;
padding-top: 1.3rem;
width: 15rem;
text-align: center;
color: #fff;
border: #fff solid 0.2rem;
font-size: 1rem;
font-weight: bold;
text-transform: uppercase;
text-decoration: none;
transform: translateX(-50%);
}
.split.left .button:hover {
background-color: var(--left-button-hover-color);
border-color: var(--left-button-hover-color);
}
.split.middle .button:hover {
background-color: var(--middle-button-hover-color);
border-color: var(--middle-button-hover-color);
}
.split.right .button:hover {
background-color: var(--right-button-hover-color);
border-color: var(--right-button-hover-color);
}
.container {
position: relative;
width: 100%;
height: 100%;
background: var(--container-bg-color);
}
.split {
position: absolute;
width: 33.33%;
height: 100%;
overflow: hidden;
}
.split.left {
left: 0;
background: url('https://image.ibb.co/m56Czw/designer.jpg') center center no-repeat;
background-size: cover;
}
.split.left:before {
position: absolute;
content: "";
width: 100%;
height: 100%;
background: var(--left-bg-color);
}
.split.middle {
left: 33.333%;
display: inline-block;
background: url('https://image.ibb.co/m56Czw/designer.jpg') center center no-repeat;
background-size: cover;
}
.split.middle:before {
position: absolute;
content: "";
width: 100%;
height: 100%;
background: var(--middle-bg-color);
}
.split.right {
right: 0;
background: url('https://image.ibb.co/m3ZbRb/programmer.png') center center no-repeat;
background-size: cover;
}
.split.right:before {
position: absolute;
content: "";
width: 100%;
height: 100%;
background: var(--right-bg-color);
}
.split.left,
.split.middle,
.split.right,
.split.right:before,
.split.left:before,
.split.middle:before {
transition: var(--speed) all ease-in-out;
}
.hover-left .left {
width: var(--hover-width);
}
.hover-left .middle {
width: var(--other-width);
left: 70%;
}
.hover-left .right {
width: var(--other-width);
}
.hover-left .middle:before {
z-index: 2;
}
.hover-middle .middle {
width: var(--hover-width);
left: 15%;
}
.hover-middle .left {
width: var(--other-width);
}
.hover-middle .right {
width: var(--other-width);
}
.hover-middle .right:before {
z-index: 2;
}
.hover-right .right {
width: var(--hover-width);
}
.hover-right .middle {
width: var(--other-width);
left: 15%;
}
.hover-right .left {
width: var(--other-width);
}
.hover-right .middle:before .left:before {
z-index: 2;
}
#media(max-width: 800px) {
h1 {
font-size: 2rem;
}
.button {
width: 12rem;
}
}
#media(max-height: 700px) {
.button {
top: 70%;
}
}
<body>
<div class="container">
<div class="split left">
<h1>The Designer</h1>
Read More
</div>
<div class="split middle">
<h1>The Middle</h1>
Read More
</div>
<div class="split right">
<h1>The Programmer</h1>
Read More
</div>
</div>
<script src="js/main.js"></script>
</body>

you could try adding in your css:
..essentialy moving the middle container 33.3% to the left (where the first container ends)
.split.middle {
left: 33.3%
}
although the best way would be to use display:flex
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

You can do this entirely in CSS with Flexbox. Make the container <div> a flex container:
.container {
display: flex;
}
And the split <div>s flex items:
.split {
flex: 15 1 0;
}
15 (flex-grow): each flex item will take 15 "shares" of extra horizontal space
1 (flex-shrink): flex items will shrink evenly, each giving up 1 "share" of horizontal space
0 (flex-basis): base width of each flex item is 0 instead of being based on its content
And for the widening effect, make the hovered <div> greedy:
.split:hover {
flex-grow: 70;
}
You can avoid the extra ::before pseudo-elements with gradient backgrounds:
.split.middle {
background:
linear-gradient(var(--middle-bg-color), var(--middle-bg-color)),
url('https://image.ibb.co/m56Czw/designer.jpg') center center no-repeat;
background-size: cover;
}
This creates a background image with a gradient that fades from one semitransparent color to the same semitransparent color, and puts it on top of your JPEG background image.
Remove all the positioning code on the <div>s, and you're set.
:root {
--container-bg-color: #333;
--left-bg-color: rgba(223, 39, 39, 0.7);
--left-button-hover-color: rgba(161, 11, 11, 0.3);
--middle-bg-color: rgba(39, 217, 223, 0.7);
--middle-button-hover-color: rgba(14, 32, 196, 0.151);
--right-bg-color: rgba(43, 43, 43, 0.8);
--right-button-hover-color: rgba(92, 92, 92, 0.3);
--hover-width: 70;
--other-width: 15;
--speed: 1000ms;
}
html,
body {
padding: 0;
margin: 0;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
width: 100%;
height: 100%;
overflow-x: hidden;
}
h1 {
font-size: 3rem;
color: #fff;
position: absolute;
left: 50%;
top: 20%;
transform: translateX(-50%);
white-space: nowrap;
}
.button {
display: block;
position: absolute;
left: 50%;
top: 40%;
height: 2.5rem;
padding-top: 1.3rem;
width: 15rem;
text-align: center;
color: #fff;
border: #fff solid 0.2rem;
font-size: 1rem;
font-weight: bold;
text-transform: uppercase;
text-decoration: none;
transform: translateX(-50%);
}
.split.left .button:hover {
background-color: var(--left-button-hover-color);
border-color: var(--left-button-hover-color);
}
.split.middle .button:hover {
background-color: var(--middle-button-hover-color);
border-color: var(--middle-button-hover-color);
}
.split.right .button:hover {
background-color: var(--right-button-hover-color);
border-color: var(--right-button-hover-color);
}
.container {
position: relative;
width: 100%;
height: 100%;
background: var(--container-bg-color);
display: flex;
}
.split {
position: relative;
height: 100%;
overflow: hidden;
flex: var(--other-width) 1 0;
transition: var(--speed) all ease-in-out;
}
.split.left {
background:
linear-gradient(var(--left-bg-color), var(--left-bg-color)),
url('https://image.ibb.co/m56Czw/designer.jpg') center center no-repeat;
background-size: cover;
}
.split.middle {
background:
linear-gradient(var(--middle-bg-color), var(--middle-bg-color)),
url('https://image.ibb.co/m56Czw/designer.jpg') center center no-repeat;
background-size: cover;
}
.split.right {
background:
linear-gradient(var(--right-bg-color), var(--right-bg-color)),
url('https://image.ibb.co/m3ZbRb/programmer.png') center center no-repeat;
background-size: cover;
}
.split:hover {
flex-grow: var(--hover-width);
}
#media(max-width: 800px) {
h1 {
font-size: 2rem;
}
.button {
width: 12rem;
}
}
#media(max-height: 700px) {
.button {
top: 70%;
}
}
<body>
<div class="container">
<div class="split left">
<h1>The Designer</h1>
Read More
</div>
<div class="split middle">
<h1>The Middle</h1>
Read More
</div>
<div class="split right">
<h1>The Programmer</h1>
Read More
</div>
</div>
</body>