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>

how to resize items inside collapsible custom bar

I am learning HTML,CSS & Java script. during my learning path. i created custom menu. which expand and close using a button. my problem is when the menu closes, the inside items are not totally disappear like below :
while menu is open.
while menu is closed.
my code as below :
function ExpandMenu() {
var ButtonExpandMenuWidth = document.getElementById("TopBarExpandMenu"),
style = window.getComputedStyle(ButtonExpandMenuWidth),
top = style.getPropertyValue('width');
if (top === "0px") {
document.querySelector('#TopBarExpandMenu').style.width = "120px"
} else if (top === "120px") {
document.querySelector('#TopBarExpandMenu').style.width = "0px"
}
}
#mainBody {
height: 600px;
min-height: 600px;
width: 1200px%;
margin: 0;
padding: 0;
box-sizing: border-box;
position: relative;
}
/* ------------------------------------------ */
#sideBar {
transition: 500ms ease-in-out;
height: 100%;
width: 150px;
position: fixed;
left: 0;
background: #212529;
z-index: 100;
border-right: 1px solid;
border-color: cyan;
}
/* ------------------------------------------ */
#StatusBar {
background: #30FF83;
width: 100%;
height: 1px;
position: fixed;
max-height: 3px;
z-index: 101;
}
/* ------------------------------------------ */
#sideBarRows {
position: fixed;
top: 60px;
width: inherit;
z-index: 50;
}
/* ------------------------------------------ */
#download_button {
background: transparent;
width: inherit;
text-align: left;
border: none;
height: 33px;
top: -8px;
position: relative;
color: white;
font-size: 12px;
}
#download_button_frame {
height: 50px;
position: relative;
border-left: 2px solid var(--red);
padding-top: 15px;
margin-right: 1%;
}
/* ------------------------------------------ */
#ManualDeploy_Frame {
height: 50px;
position: relative;
border-left: 2px solid var(--red);
top: 20px;
z-index: 50;
}
#ManualDeploy_Button {
border: 0px;
width: auto;
height: 42px;
position: relative;
text-align: left;
top: 4px;
font-size: 12px;
background-color: transparent;
margin-left: 1px;
}
/* ------------------------------------------ */
.menuButton {
background: transparent;
background: url("menu.png") center / contain, rgba(181, 20, 20, 0);
width: 40px;
height: 40px;
position: fixed;
left: 1%;
border: none;
top: 2%;
transition: 500ms ease-in-out;
-webkit-app-region: no-drag;
transform: rotate(0deg);
z-index: 1000;
-webkit-app-region: no-drag;
}
#menuButton:focus {
background: url("menu.png") left / contain no-repeat transparent;
outline: 0px;
}
#menuButton:hover {
background: url("menu.png") left / contain no-repeat transparent;
}
/* ------------------------------------------ */
/* ------------------------------------------ */
.DownloadPage_Frame {
display: flex;
background: #212529;
position: fixed;
z-index: 99;
height: 100%;
width: 100%;
right: 0%;
top: 0%;
}
/* ------------------------------------------ */
.topBarHeader {
display: flex;
height: 50px;
width: 100%;
position: relative;
z-index: 99;
flex: 1;
}
.topBar {
position: fixed;
background: #212529;
height: 50px;
width: 100%;
flex: 1;
-webkit-user-select: none;
-webkit-app-region: drag;
}
/* ------------------------------------------ */
.closeButton,
.closeButtonDiv {
display: flex;
position: fixed;
height: 20px;
width: 60px;
right: 10px;
margin: auto;
text-align: center;
align-items: center;
justify-content: center;
border-radius: 40px;
font-size: 10px;
top: 15px;
transition: 200ms ease-in-out;
border: 0px;
-webkit-app-region: no-drag;
}
.closeButton {
background: var(--danger);
-webkit-app-region: no-drag;
}
.closeButton:hover {
background: #dad9d4;
transition: 200ms ease-in-out;
}
/* ------------------------------------------ */
.expandButton {
display: flex;
position: fixed;
height: 20px;
width: 40px;
right: 80px;
margin: auto;
text-align: center;
align-items: center;
justify-content: center;
border-radius: 40px;
font-size: 10px;
top: 15px;
transition: 200ms ease-in-out;
border: 0px;
background: url("expand.png") center / contain no-repeat transparent;
transform: rotate(90deg);
-webkit-app-region: no-drag;
}
.expandButton:focus {
transform: rotate(-90deg);
-webkit-app-region: no-drag;
}
/* ------------------------------------------ */
#TopBarExpandMenu {
display: flex;
position: fixed;
top: 15px;
right: 110px;
margin: auto;
height: 20px;
width: 0px;
background: white;
border-radius: 15px;
transition: 200ms ease-in-out;
transform: scale(1);
align-items: center;
}
/* ------------------------------------------ */
#MaximizeButton,
#MinimizeButton {
display: flex;
position: static;
background: rgb(101, 217, 101);
border-radius: 15px;
color: black;
padding: 1px;
height: 90%;
width: 50%;
font-size: 10px;
text-align: center;
justify-content: center;
margin-left: 2px;
margin-right: 2px;
text-decoration: none;
-webkit-app-region: no-drag;
}
#MaximizeButton {
background: rgb(234, 174, 57);
}
#MaximizeButton:hover,
#MinimizeButton:hover {
transform: scale(1.5);
transition: 100ms ease-in-out;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/css/bootstrap.min.css" integrity="sha384-DhY6onE6f3zzKbjUPRc2hOzGAdEf4/Dz+WJwBvEYL/lkkIsI3ihufq9hk9K4lVoK" crossorigin="anonymous">
<body id="mainBody" class="mainBody">
<div id="StatusBar" class="StatusBar"></div>
<div class="container sideBar" id="sideBar"><button class="btn btn-primary menuButton" id="menuButton" type="button" onclick="sideBar()"></button>
<div class="row sideBarRows" id="sideBarRows">
<div class="col" id="download_button_frame"><button class="btn btn-primary download_button" id="download_button" type="button">Download Loads</button></div>
<div class="col" id="ManualDeploy_Frame"><button class="btn btn-primary ManualDeploy_Button" id="ManualDeploy_Button" type="button">Manual Deploy</button></div>
</div>
</div>
<header id="topBarHeader" class="topBarHeader">
<div id="topBar" class="topBar"></div>
<div id="TopBarExpandMenu" class="TopBarExpandMenuClass"><a id="MaximizeButton" class="MaximizeButton" href="#">Minimize</a><a id="MinimizeButton" class="MinimizeButton" href="#">Maximize</a></div>
<div id="closeButtonDiv" class="closeButtonDiv" style="color: var(--danger);"><button class="btn btn-primary closeButton" id="closeButton" type="button">Close</button></div><button class="btn btn-primary expandButton" id="expandButton" type="button" onclick="ExpandMenu()"></button>
</header>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/mainJavaScript.js"></script>
<script src="assets/js/operationJavaScript.js"></script>
</body>

I advise you to apply rule opacity together with width: 0. And also, to shorten the code, I advise you to add and remove styles using the classlist:
Add class:
document.querySelector("#TopBarExpandMenu").classList.add('active');
Remove class:
document.querySelector("#TopBarExpandMenu").classList.remove('active');
Also, add this selector to your css:
#TopBarExpandMenu.active {
width: 120px;
opacity: 1;
}
And add opacity: 0 to #TopBarExpandMenu.
function ExpandMenu() {
var ButtonExpandMenuWidth = document.getElementById("TopBarExpandMenu"),
style = window.getComputedStyle(ButtonExpandMenuWidth),
top = style.getPropertyValue("width");
if (top === "0px") {
document.querySelector("#TopBarExpandMenu").classList.add('active');
} else if (top === "120px") {
document.querySelector("#TopBarExpandMenu").classList.remove('active');
}
}
#mainBody {
height: 600px;
min-height: 600px;
width: 1200px%;
margin: 0;
padding: 0;
box-sizing: border-box;
position: relative;
}
/* ------------------------------------------ */
#sideBar {
transition: 500ms ease-in-out;
height: 100%;
width: 150px;
position: fixed;
left: 0;
background: #212529;
z-index: 100;
border-right: 1px solid;
border-color: cyan;
}
/* ------------------------------------------ */
#StatusBar {
background: #30FF83;
width: 100%;
height: 1px;
position: fixed;
max-height: 3px;
z-index: 101;
}
/* ------------------------------------------ */
#sideBarRows {
position: fixed;
top: 60px;
width: inherit;
z-index: 50;
}
/* ------------------------------------------ */
#download_button {
background: transparent;
width: inherit;
text-align: left;
border: none;
height: 33px;
top: -8px;
position: relative;
color: white;
font-size: 12px;
}
#download_button_frame {
height: 50px;
position: relative;
border-left: 2px solid var(--red);
padding-top: 15px;
margin-right: 1%;
}
/* ------------------------------------------ */
#ManualDeploy_Frame {
height: 50px;
position: relative;
border-left: 2px solid var(--red);
top: 20px;
z-index: 50;
}
#ManualDeploy_Button {
border: 0px;
width: auto;
height: 42px;
position: relative;
text-align: left;
top: 4px;
font-size: 12px;
background-color: transparent;
margin-left: 1px;
}
/* ------------------------------------------ */
.menuButton {
background: transparent;
background: url("menu.png") center / contain, rgba(181,20,20,0);
width: 40px;
height: 40px;
position: fixed;
left: 1%;
border: none;
top: 2%;
transition: 500ms ease-in-out;
-webkit-app-region: no-drag;
transform: rotate(0deg);
z-index: 1000;
-webkit-app-region: no-drag;
}
#menuButton:focus {
background: url("menu.png") left / contain no-repeat transparent;
outline: 0px;
}
#menuButton:hover {
background: url("menu.png") left / contain no-repeat transparent;
}
/* ------------------------------------------ */
/* ------------------------------------------ */
.DownloadPage_Frame {
display: flex;
background: #212529;
position: fixed;
z-index: 99;
height: 100%;
width: 100%;
right: 0%;
top: 0%;
}
/* ------------------------------------------ */
.topBarHeader {
display: flex;
height: 50px;
width: 100%;
position: relative;
z-index: 99;
flex: 1;
}
.topBar {
position: fixed;
background: #212529;
height: 50px;
width: 100%;
flex: 1;
-webkit-user-select: none;
-webkit-app-region: drag;
}
/* ------------------------------------------ */
.closeButton, .closeButtonDiv {
display: flex;
position: fixed;
height: 20px;
width: 60px;
right: 10px;
margin: auto;
text-align: center;
align-items: center;
justify-content: center;
border-radius: 40px;
font-size: 10px;
top: 15px;
transition: 200ms ease-in-out;
border: 0px;
-webkit-app-region: no-drag;
}
.closeButton {
background: var(--danger);
-webkit-app-region: no-drag;
}
.closeButton:hover {
background: #dad9d4;
transition: 200ms ease-in-out;
}
/* ------------------------------------------ */
.expandButton {
display: flex;
position: fixed;
height: 20px;
width: 40px;
right: 80px;
margin: auto;
text-align: center;
align-items: center;
justify-content: center;
border-radius: 40px;
font-size: 10px;
top: 15px;
transition: 200ms ease-in-out;
border: 0px;
background: url("expand.png") center / contain no-repeat transparent;
transform: rotate(90deg);
-webkit-app-region: no-drag;
}
.expandButton:focus {
transform: rotate(-90deg);
-webkit-app-region: no-drag;
}
/* ------------------------------------------ */
#TopBarExpandMenu {
display: flex;
position: fixed;
top: 15px;
right: 110px;
margin: auto;
height: 20px;
width: 0;
background: white;
border-radius: 15px;
transition: 200ms ease-in-out;
transform: scale(1);
align-items: center;
opacity: 0;
}
#TopBarExpandMenu.active {
width: 120px;
opacity: 1;
}
/* ------------------------------------------ */
#MaximizeButton, #MinimizeButton {
display: flex;
position: static;
background: rgb(101,217,101);
border-radius: 15px;
color: black;
padding: 1px;
height: 90%;
width: 50%;
font-size: 10px;
text-align: center;
justify-content: center;
margin-left: 2px;
margin-right: 2px;
text-decoration: none;
-webkit-app-region: no-drag;
}
#MaximizeButton {
background: rgb(234,174,57);
}
#MaximizeButton:hover, #MinimizeButton:hover {
transform: scale(1.5);
transition: 100ms ease-in-out;
}
<div id="StatusBar" class="StatusBar"></div>
<div class="container sideBar" id="sideBar"><button class="btn btn-primary menuButton" id="menuButton" type="button" onclick="sideBar()"></button>
<div class="row sideBarRows" id="sideBarRows">
<div class="col" id="download_button_frame"><button class="btn btn-primary download_button" id="download_button" type="button">Download Loads</button></div>
<div class="col" id="ManualDeploy_Frame"><button class="btn btn-primary ManualDeploy_Button" id="ManualDeploy_Button" type="button">Manual Deploy</button></div>
</div>
</div>
<header id="topBarHeader" class="topBarHeader">
<div id="topBar" class="topBar"></div>
<div id="TopBarExpandMenu" class="TopBarExpandMenuClass"><a id="MaximizeButton" class="MaximizeButton" href="#">Minimize</a><a id="MinimizeButton" class="MinimizeButton" href="#">Maximize</a></div>
<div id="closeButtonDiv" class="closeButtonDiv" style="color: var(--danger);"><button class="btn btn-primary closeButton" id="closeButton" type="button">Close</button></div><button class="btn btn-primary expandButton" id="expandButton" type="button" onclick="ExpandMenu()"></button>
</header>

Background image zoom on hover without change text size

I want to zoom background image on a hover but without change text size. How can I make this?
* { margin: 0; padding: 0; }
body {
}
.article-container {
width: 300px;
height: 200px;
border: 1px solid #000000;
overflow: hidden;
position: relative;
}
.article-img-holder {
width: 100%;
height: 100%;
background: url(https://awik.io/demo/background-image-zoom/traffic2.jpg);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
transition: all 1s;
}
.article-img-holder:hover {
transform: scale(1.2);
}
.split-image-links {
width: 100%;
height: 100vh;
display: flex;
}
.split-image-links .split-image-link {
width: 25%;
height: 100%;
overflow: hidden;
position: relative;
}
.split-image-links .split-image-link .zoom-image {
width: 100%;
height: 100%;
cursor: pointer;
position: relative;
}
.split-image-links .split-image-link .zoom-image .split-image-header {
z-index: 1;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
color: #fff;
}
.split-image-links .split-image-link .zoom-image .zoom-image-headline {
color: #fff;
text-align: center;
line-height: 100vh;
font-family: 'Poppins';
text-transform: uppercase;
font-size: 45px;
font-weight: 600;
}
.split-image-links .split-image-link .zoom-image.zoom-image-first {
background: linear-gradient(
rgba(0, 0, 0, 0.4),
rgba(0, 0, 0, 0.4)
), url(https://api.time.com/wp-content/uploads/2020/07/jeff-bezos.jpg?quality=85&w=1024&h=628&crop=1);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
transition: all 0.5s;
}
.split-image-links .split-image-link .zoom-image:hover {
transform: scale(1.1);
}
<body>
<div class="split-image-links">
<div class="split-image-link">
<div class="zoom-image zoom-image-first">
<h1 class="zoom-image-headline">who</h1>
</div>
</div>
</div>
</body>

Instead of using scale() for the entire element, work with the background-size property, that way font-size will remain untouched, lemme know if it works for you or not.
.bg {
width: 400px;
height: 240px;
margin: 30px auto;
background: url(https://api.time.com/wp-content/uploads/2020/07/jeff-bezos.jpg?quality=85&w=1024&h=628&crop=1) no-repeat center center;
background-size: 100%; /* work with the background-size */
transition: background-size 1s ease-in-out;
position: relative;
z-index: 1;
}
.bg:hover {
background-size: 120% /* work with the background-size */
}
.bg::before {
position: absolute;
content: '';
width: 100%;
height: 100%;
background: rgba(0,0,0,.5);
top: 0;
left: 0;
z-index: -1;
}
.bg h2 {
text-align: center;
font-size: 60px;
line-height: 230px;
font-family: sans-serif;
color: #fff;
}
<div class="bg">
<h2>WHO</h2>
</div>

Thats the expected behavior of scale, it scale every children too, to change just the bg maybe you should use other approaches.
I provide one, I hope it fit in your need.
On this approach the BG is an absolute element, isnt the container of the h1 and the hover now is on split-image-link instead of zoom-image.
* { margin: 0; padding: 0; }
body {
}
.article-container {
width: 300px;
height: 200px;
border: 1px solid #000000;
overflow: hidden;
position: relative;
}
.article-img-holder {
width: 100%;
height: 100%;
background: url(https://awik.io/demo/background-image-zoom/traffic2.jpg);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
transition: all 1s;
}
.article-img-holder:hover {
transform: scale(1.2);
}
.split-image-links {
width: 100%;
height: 100vh;
display: flex;
}
.split-image-links .split-image-link {
width: 25%;
height: 100%;
overflow: hidden;
position: relative;
}
.split-image-links .split-image-link .zoom-image {
width: 100%;
height: 100%;
cursor: pointer;
position: relative;
}
.split-image-links .split-image-link .zoom-image .split-image-header {
z-index: 1;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
color: #fff;
}
.split-image-links .split-image-link .zoom-image-headline {
position: relative;
color: #fff;
text-align: center;
line-height: 100vh;
font-family: 'Poppins';
text-transform: uppercase;
font-size: 45px;
font-weight: 600;
}
.split-image-links .split-image-link .zoom-image.zoom-image-first {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
background: linear-gradient(
rgba(0, 0, 0, 0.4),
rgba(0, 0, 0, 0.4)
), url(https://api.time.com/wp-content/uploads/2020/07/jeff-bezos.jpg?quality=85&w=1024&h=628&crop=1);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
transition: all 0.5s;
}
.split-image-links .split-image-link:hover .zoom-image {
transform: scale(1.1);
}
<body>
<div class="split-image-links">
<div class="split-image-link">
<div class="zoom-image zoom-image-first"></div>
<h1 class="zoom-image-headline">who</h1>
</div>
</div>
</body>

Here is the basic version of your need.
.content {
position: relative;
/* border: 1px solid red; */
display: inline-block;
}
h1 {
color: #FFF;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 999;
}
.bg:hover, h1:hover + .bg {
transform: scale(1.1);
transition: all 1s;
}
<div class="content">
<h1>WHO</h1>
<img class="bg" src="https://awik.io/demo/background-image-zoom/traffic2.jpg" alt="background image">
</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

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>