We Keep Coding

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>

how do I center the anchor tag inside a div whose parent is working as an overlay [duplicate]

This question already has answers here:
How can I vertically align elements in a div?
(28 answers)
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Flexbox: center horizontally and vertically
(14 answers)
Closed 2 years ago.
what I want is to center the anchor tag texts vertically also I want the "contents" div to fit the screen so that if the screen gets smaller or bigger the anchor tag doesn't run off the margin creating overflow which I don't want, I tried a bunch of different ways to fix this but none seem to work, any help is appreciated! here's the code...
$(function() {
$(".menu-link").click(function(e) {
e.preventDefault();
$(".menu-overlay").toggleClass("open");
$(".menu").toggleClass("open");
});
});
$('.menu-link').click(function() {
$('body').toggleClass('no-scroll');
});
.nav {
display: flex;
justify-content: space-between;
padding: 0 5%;
}
#brandname {
color: black;
font-weight: bold;
font-family: Circular Std Black;
line-height: 60px;
font-size:20px;
margin-top: 45px;
}
.menu {
position: absolute;
margin-top: 50px;
right: 5%;
height: 46px;
width: 46px;
}
.menu-link {
width: 100%;
height: 100%;
position: absolute;
z-index: 1002;
cursor: pointer;
}
.menu-icon {
position: absolute;
width: 20px;
height: 15px;
margin: auto;
left: 0;
top: 0;
right: 0;
bottom: 1px;
}
/* ------------- */
.menu-line {
background-color: white;
height: 3px;
width: 100%;
border-radius: 2px;
position: absolute;
left: 0;
transition: all 0.25s ease-in-out;
}
.menu-line-2 {
top: 0;
bottom: 0;
margin: auto;
}
.menu-line-3 {
bottom: 0;
}
.menu.open .menu-line-1 {
transform: translateY(7.5px) translateY(-50%) rotate(-45deg);
}
.menu.open .menu-line-2 {
opacity: 0;
}
.menu.open .menu-line-3 {
transform: translateY(-7.5px) translateY(50%) rotate(45deg);
}
/* ------------- */
.menu-circle {
background-color: #E095F0;
width: 100%;
height: 100%;
position: absolute;
border-radius: 50%;
transform: scale(1);
z-index: 1000;
transition: transform 0.3s ease-in-out;
}
.menu:hover .menu-circle {
transform: scale(1.2);
}
.menu.open .menu-circle {
transform: scale(60);
}
/* ------------- */
.menu-overlay {
transition: opacity 0.2s ease-in-out;
opacity:0;
display:hidden;
}
.menu-overlay.open {
position: fixed;
top:0;
left:0;
height: 100vh;
width: 100vw;
opacity:1;
display:block;
z-index: 1001;
background-color: black;
overflow: hidden;
}
.no-scroll{
overflow: hidden;
}
/***********anchor tag************/
.contents {
display: table;
margin-left: 5%;
margin-right: 5%;
}
.contents a{
display: table-cell;
text-decoration: none;
font-family: Circular Std Book;
font-size: 30px;
padding-left: 60px;
padding-right: 60px;
color: white;
vertical-align: middle;
}
<nav class="nav">
<div id="brandname">Test</div>
<div class="menu">
<span class="menu-circle"></span>
<a class="menu-link">
<span class="menu-icon">
<span class="menu-line menu-line-1"></span>
<span class="menu-line menu-line-2"></span>
<span class="menu-line menu-line-3"></span>
</span>
</a>
</div>
<div class="menu-overlay">
<div class="contents">
Home
About
Home
About
</div>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

You can just add display: flex; and align-items: center; to the .menu-overlay.open identifier:
$(function() {
$(".menu-link").click(function(e) {
e.preventDefault();
$(".menu-overlay").toggleClass("open");
$(".menu").toggleClass("open");
});
});
$('.menu-link').click(function() {
$('body').toggleClass('no-scroll');
});
.nav {
display: flex;
justify-content: space-between;
padding: 0 5%;
}
#brandname {
color: black;
font-weight: bold;
font-family: Circular Std Black;
line-height: 60px;
font-size:20px;
margin-top: 45px;
}
.menu {
position: absolute;
margin-top: 50px;
right: 5%;
height: 46px;
width: 46px;
}
.menu-link {
width: 100%;
height: 100%;
position: absolute;
z-index: 1002;
cursor: pointer;
}
.menu-icon {
position: absolute;
width: 20px;
height: 15px;
margin: auto;
left: 0;
top: 0;
right: 0;
bottom: 1px;
}
/* ------------- */
.menu-line {
background-color: white;
height: 3px;
width: 100%;
border-radius: 2px;
position: absolute;
left: 0;
transition: all 0.25s ease-in-out;
}
.menu-line-2 {
top: 0;
bottom: 0;
margin: auto;
}
.menu-line-3 {
bottom: 0;
}
.menu.open .menu-line-1 {
transform: translateY(7.5px) translateY(-50%) rotate(-45deg);
}
.menu.open .menu-line-2 {
opacity: 0;
}
.menu.open .menu-line-3 {
transform: translateY(-7.5px) translateY(50%) rotate(45deg);
}
/* ------------- */
.menu-circle {
background-color: #E095F0;
width: 100%;
height: 100%;
position: absolute;
border-radius: 50%;
transform: scale(1);
z-index: 1000;
transition: transform 0.3s ease-in-out;
}
.menu:hover .menu-circle {
transform: scale(1.2);
}
.menu.open .menu-circle {
transform: scale(60);
}
/* ------------- */
.menu-overlay {
transition: opacity 0.2s ease-in-out;
opacity:0;
display:hidden;
}
.menu-overlay.open {
position: fixed;
top:0;
left:0;
height: 100vh;
width: 100vw;
opacity:1;
z-index: 1001;
background-color: black;
overflow: hidden;
display: flex;
align-items: center;
}
.no-scroll{
overflow: hidden;
}
/***********anchor tag************/
.contents {
display: table;
margin-left: 5%;
margin-right: 5%;
}
.contents a{
display: table-cell;
text-decoration: none;
font-family: Circular Std Book;
font-size: 30px;
padding-left: 60px;
padding-right: 60px;
color: white;
vertical-align: middle;
}
<nav class="nav">
<div id="brandname">Test</div>
<div class="menu">
<span class="menu-circle"></span>
<a class="menu-link">
<span class="menu-icon">
<span class="menu-line menu-line-1"></span>
<span class="menu-line menu-line-2"></span>
<span class="menu-line menu-line-3"></span>
</span>
</a>
</div>
<div class="menu-overlay">
<div class="contents">
Home
About
Home
About
</div>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

You can easily achieve this using flexbox:
Here's the CSS to achieve what you want:
.menu-overlay.open {
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
opacity: 1;
display: block;
z-index: 1001;
background-color: black;
overflow: hidden;
display: flex;
align-items: center;
}
.contents {
margin-left: 5%;
margin-right: 5%;
display: flex;
flex: 1;
max-width: 100%;
justify-content: space-around;
}
.contents a {
text-decoration: none;
font-family: Circular Std Book;
font-size: 30px;
color: white;
}

How do I stop the overlap of elements in an on hover transition?

In my website I want to be able to allow the user to hover over an image and have the image zoomed in by a transition. I've been able to succeed with the implementation of the transition, however, when the image is being zoomed in, it constantly overlaps the other elements. My current layout is ordered in a grid and the container has been given the attribute overflow:hidden.
I tried to assign each element a z-index value of -1 when its being hovered, but the there is a continuous change between the layers which looks horrible. How do I allow each image to be zoomed in without overlapping into any of the other elements?
Here's my jsfiddle: https://jsfiddle.net/Syed213shah/4u0vh5Lb/
body {
background-color: #800020;
}
body, html {
height: 100%;
margin: 0;
}
#box-container {
display: flex;
height: 600px;
width: 75%;
}
.container {
min-height: 500px;
width: 100%;
display: grid;
grid-template-columns: 50% 2fr;
grid-template-rows: 50% 2fr;
overflow: hidden;
position: static;
}
.item1 {
background-image: url('https://pbs.twimg.com/media/D5gQCxCW0AE0skl.jpg');
width: 100%;
height: 200%;
transition: all 0.5s ease-in-out;
position: relative;
}
.item1:hover {
transform: scale(1.1);
z-index: -1;
}
.item2 {
background-image: url('https://media-public.fcbarcelona.com/20157/0/document_thumbnail/20197/172/175/246/32944044/1.0-10/32944044.jpg?t=1475841685000');
grid-column: 2;
grid-row: 2;
width: 100%;
height: 400px;
transition: all 0.5s ease-in-out;
position: relative;
}
.item2:hover {
transform: scale(1.1);
z-index: -1;
}
.item3 {
background-image: url('https://e00-marca.uecdn.es/assets/multimedia/imagenes/2019/10/26/15721062687641.jpg');
grid-column: 2;
grid-row: 1;
width: 100%;
height: 400px;
transition: all 0.5s ease-in-out;
position: relative;
}
.item3:hover {
transform: scale(1.1);
z-index: -1;
}

I think it is more simple to use a pseudo-element or a inner tag (as you want) and scale this element setting its parent (our <a>) with overflow:hidden; to prevent your bug.
In my example I used a pseudoelement. I added these line of code to your CSS (I also commented some lines):
.container a {
overflow: hidden;
}
.container a::after {
height:100%;
width:100%;
content: "";
position: absolute;
transition: all 0.5s ease-in-out;
z-index:-1;
}
.item1::after{
background-image: url('https://pbs.twimg.com/media/D5gQCxCW0AE0skl.jpg');
}
.item2::after{
background-image: url('https://media-public.fcbarcelona.com/20157/0/document_thumbnail/20197/172/175/246/32944044/1.0-10/32944044.jpg?t=1475841685000');
}
.item3::after{
background-image: url('https://e00-marca.uecdn.es/assets/multimedia/imagenes/2019/10/26/15721062687641.jpg');
}
.container a:hover::after{
transform: scale(1.1);
}
I didn't touch your HTML.
body {
background-color: #800020;
}
body, html {
height: 100%;
margin: 0;
}
#box-container {
display: flex;
height: 600px;
width: 75%;
}
/* https://pbs.twimg.com/media/D5gQCxCW0AE0skl.jpg */
/* https://media-public.fcbarcelona.com/20157/0/document_thumbnail/20197/172/175/246/32944044/1.0-10/32944044.jpg?t=1475841685000 */
/* https://e00-marca.uecdn.es/assets/multimedia/imagenes/2019/10/26/15721062687641.jpg */
.container {
min-height: 500px;
width: 100%;
display: grid;
grid-template-columns: 50% 2fr;
grid-template-rows: 50% 2fr;
overflow: hidden;
position: static;
}
.item1 {
/*background-image: url('https://pbs.twimg.com/media/D5gQCxCW0AE0skl.jpg');*/
width: 100%;
height: 200%;
/*transition: all 0.5s ease-in-out;*/
position: relative;
}
/*.item1:hover {
transform: scale(1.1);
z-index: -1;
}*/
.item2 {
/*background-image: url('https://media-public.fcbarcelona.com/20157/0/document_thumbnail/20197/172/175/246/32944044/1.0-10/32944044.jpg?t=1475841685000');*/
grid-column: 2;
grid-row: 2;
width: 100%;
height: 400px;
/*transition: all 0.5s ease-in-out; */
position: relative;
}
/*.item2:hover {
transform: scale(1.1);
z-index: -1;
}*/
.item3 {
/*background-image: url('https://e00-marca.uecdn.es/assets/multimedia/imagenes/2019/10/26/15721062687641.jpg');*/
grid-column: 2;
grid-row: 1;
width: 100%;
height: 400px;
/*transition: all 0.5s ease-in-out; */
position: relative;
}
/* -------------------------- */
/* I added these lines of code */
/* -------------------------- */
.container a {
overflow: hidden;
}
.container a::after {
height:100%;
width:100%;
content: "";
position: absolute;
transition: all 0.5s ease-in-out;
z-index:-1;
}
.item1::after{
background-image: url('https://pbs.twimg.com/media/D5gQCxCW0AE0skl.jpg');
/*to set a background without repetition and always horizontally center you could use also this syntaxt:
background: url('https://pbs.twimg.com/media/D5gQCxCW0AE0skl.jpg') 50% top no-repeat transparent;
*/
}
.item2::after{
background-image: url('https://media-public.fcbarcelona.com/20157/0/document_thumbnail/20197/172/175/246/32944044/1.0-10/32944044.jpg?t=1475841685000');
}
.item3::after{
background-image: url('https://e00-marca.uecdn.es/assets/multimedia/imagenes/2019/10/26/15721062687641.jpg');
}
.container a:hover::after{
transform: scale(1.1);
}
/* -------------------------- */
/* I added these line of code */
/* -------------------------- */
.item1 h2 {
font-size: 50px;
position: absolute;
font-family: Staatliches;
text-align: center;
color: white;
text-decoration: none;
padding: 500px 70px;
}
.item2 h2 {
font-size: 50px;
position: absolute;
font-family: Staatliches;
text-align: center;
color: white;
text-decoration: none;
padding: 200px 200px;
}
.item3 h2 {
font-size: 50px;
position: absolute;
font-family: Staatliches;
text-align: center;
color: white;
text-decoration: none;
padding: 185px 200px;
}
.full-height {
height: 100%;
}
.bottom-height {
height: 100%;
}
h1 {
font-size: 50px;
font-family: Staatliches;
text-align: center;
color: #002a58;
}
#navbar {
background-color: #800020;
position: fixed;
top: -30px;
width: 100%;
transition: top 0.3s;
}
#navbar ul {
height: -30px;
padding: 10px 0 10px 40px;
width: 100%;
}
#navbar li{
float: left;
line-height: 20px;
margin-right: 30px;
padding: 10px 3px;
position: relative;
list-style-type: none;
}
#navbar li a {
font-family: Staatliches;
text-decoration: none;
color: rgb(13, 11, 134);
}
#navbar li a:hover {
background-color: #ddd;
color: black;
}
<body>
<div class="full-height">
<script src="script.js"></script>
<div class="container">
<a class="item1" href="https://www.bbc.co.uk/sport/football" style="text-decoration: none;" >
<h2> Europe's biggest stadium </h2>
</a>
<a class="item2" href="https://www.fcbarcelona.com/en/" style="text-decoration: none;" >
<h2>European Success</h2>
</a>
<a class="item3" href="https://www.fcbarcelona.com/en/football/first-team/news" style="text-decoration: none;" >
<h2>Current Squad</h2>
</a>
</div>
<div id="navbar">
<ul>
<li>Home</li>
<li>Squad</li>
<li>Contact</li>
<li>About</li>
<a2><a>Created by Awais</a></a2>
</ul>
</div>
<h1>FC Barcelona</h1>
</div>
<div class="bottom-height">
</div>
</body>

instead of transform: scale on your images, perhaps using the background-size and background position might give the result you seek with a bit more control of the actual cropping you are already using.
the jsfiddle attached modifies your code with such an example. I did leave the transform scale in place for the text overlay. also note the image containers need a overflow:hidden in order to prevent hover interaction between cells.
here is your css modified accordingly;
body {
background-color: #800020;
}
body, html {
height: 100%;
margin: 0;
}
#box-container {
display: flex;
height: 600px;
width: 75%;
}
.container {
min-height: 500px;
width: 100%;
display: grid;
grid-template-columns: 50% 2fr;
grid-template-rows: 50% 2fr;
overflow: hidden;
position: static;
}
.item1 {
background-image: url('https://pbs.twimg.com/media/D5gQCxCW0AE0skl.jpg');
background-position: 0% 50%;
background-size:200%;
width: 100%;
height: 200%;
transition: all 0.5s ease-in-out;
position: relative;
overflow: hidden;
}
.item1:hover {
background-size:220%;
background-position: 5% 50%;
}
.item2 {
background-image: url('https://media-public.fcbarcelona.com/20157/0/document_thumbnail/20197/172/175/246/32944044/1.0-10/32944044.jpg?t=1475841685000');
background-position: 0% 50%;
background-size:165%;
grid-column: 2;
grid-row: 2;
width: 100%;
height: 400px;
transition: all 0.5s ease-in-out;
position: relative;
overflow: hidden;
}
.item2:hover {
background-position: 5% 50%;
background-size:180%;
}
.item3 {
background-image: url('https://e00-marca.uecdn.es/assets/multimedia/imagenes/2019/10/26/15721062687641.jpg');
background-position: 0% 15%;
background-size:175%;
grid-column: 2;
grid-row: 1;
width: 100%;
height: 400px;
transition: all 0.5s ease-in-out;
position: relative;
overflow: hidden;
}
.item3:hover {
background-position: 5% 15%;
background-size:195%;
}
.item1 h2 {
font-size: 50px;
position: absolute;
font-family: Staatliches;
text-align: center;
color: white;
text-decoration: none;
padding: 500px 70px;
transform: scale(1);
transition: all 0.5s ease-in-out;
}
.item2 h2 {
font-size: 50px;
position: absolute;
font-family: Staatliches;
text-align: center;
color: white;
text-decoration: none;
padding: 200px 200px;
transform: scale(1);
transition: all 0.5s ease-in-out;
}
.item3 h2 {
font-size: 50px;
position: absolute;
font-family: Staatliches;
text-align: center;
color: white;
text-decoration: none;
padding: 185px 200px;
transform: scale(1);
transition: all 0.5s ease-in-out;
}
.item1:hover h2,
.item2:hover h2,
.item3:hover h2 {
transform: scale(1.1);
}
.full-height {
height: 100%;
}
.bottom-height {
height: 100%;
}
h1 {
font-size: 50px;
font-family: Staatliches;
text-align: center;
color: #002a58;
}
#navbar {
background-color: #800020;
position: fixed;
top: -30px;
width: 100%;
transition: top 0.3s;
}
#navbar ul {
height: -30px;
padding: 10px 0 10px 40px;
width: 100%;
}
#navbar li{
float: left;
line-height: 20px;
margin-right: 30px;
padding: 10px 3px;
position: relative;
list-style-type: none;
}
#navbar li a {
font-family: Staatliches;
text-decoration: none;
color: rgb(13, 11, 134);
}
#navbar li a:hover {
background-color: #ddd;
color: black;
}
#navbar .a2{
float: right;
line-height: 20px;
margin-right: 50px;
padding: 10px 3px;
position: relative;
list-style-type: none;
}
#navbar .a2 a {
font-family: Staatliches;
text-decoration: none;
color: rgb(13, 11, 134);
}
https://jsfiddle.net/w9n6ajq1/

target item(s) before hovered item (netflix-like hovering effect)

I am building a netflix-like slider in which a hovered slider-item pushes the other slider-items aside (depending on their location).
(see example code)
I can't find a solution to the following situation:
when I hover item 3, all other items are pushed aside to the left and right precisely as I want.
when item 2 is hovered, I want item 1 (or any item left of .item-left) to not move(stay in position). all others go as planned.
when item 4 is hovered, I want item 3/2/1 to keep the same distance from 4 as when not hovered. item 5 behaves correctly.
Hovered Items need to stay within the lightblue area (show-peek).
how can I make this work? Any help is welcome.
Thank you!
var slider = document.getElementById('sli');
var prev = document.getElementById('prev');
prev.addEventListener('click', prevC, false);
var next = document.getElementById('next');
next.addEventListener('click', nextC, false);
function prevC() {
alert('-1')
}
function nextC() {
alert('+1');
}
#import url(https://fonts.googleapis.com/css?family=Lato:300,400,700,900);
* {
box-sizing: border-box;
}
body {
font-family: 'Lato', sans-serif;
background-color: white/* rgba(20, 23, 26, .1) */
;
}
.page-head {
display: block;
top: 0;
left: 0;
width: 100%;
height: auto;
}
.page-head h1 {
font-size: 2em;
color: red;
text-align: center;
text-transform: uppercase;
padding: 20px;
}
/* general stuff */
.row {
display: block;
width: 400px;
margin: 0 auto;
/* overflow-x:hidden; */
}
.row-header {}
.row-header h2 {
font-size: 1.4em;
font-weight: 500;
padding: 8px 0;
margin-left: 45px;
}
.row-container {
position: relative;
}
.slider {
width: 100%;
padding: 0 41px 0 42px;
margin-top: 45px;
}
.slider .handle {
position: absolute;
top: 0;
bottom: 0;
z-index: 20;
width: 44px;
height: 69px;
text-align: center;
justify-content: center;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
color: #fff;
background: rgba(20, 20, 20, .3);
z-index: .9;
cursor: pointer;
line-height: 69px;
}
.handle-prev {
left: 0;
}
.handle-next {
right: 0;
}
.show-peek {
display: inline-block;
width: 316px;
height: 69px;
background: lightblue;
overflow-x: visible;
vertical-align: middle;
border: 1px dotted grey;
}
.slider-content {
display: block;
margin-top: 34px;
list-style: none;
white-space: nowrap;
transform: translateY(-50%) translateX(-100px);
text-align: center;
}
.slider-content:hover .slider-item {
opacity: 1;
transform: translateX(-49px);
transition-delay: .85s;
}
.slider-content:hover .slider-item:hover {
opacity: 1;
}
.slider-item {
position: relative;
vertical-align: middle;
display: inline-block;
list-style: none;
width: 100px;
height: 69px;
/* background-color: black; */
transition-duration: .3s;
overflow: hidden;
cursor: pointer;
border: 1px solid rgba(205, 20, 20, .3);
}
.slider-content li .bg-img {
position: absolute;
width: 100%;
height: 100%;
background-size: cover;
background-position: center top;
}
.slider-content li:hover {
transition-delay: 0.1s;
width: 200px;
height: 130px;
}
.slider-content .left-item:hover {
transform: translateX(0);
z-index: 999;
}
.slider-content .left-item:hover~.slider-item {
transform: translate3d(0px, 0, 0);
}
.slider-content .right-item:hover {
margin-left: -50px;
z-index: 999;
}
.slider-content li:hover a .content {
transform: translateY(0) translateX(-50%);
transition-delay: 0.75s;
opacity: 1;
}
.slider-content li a {
color: white;
text-decoration: none;
cursor: pointer;
width: 100%;
height: 100%;
display: block;
position: relative;
z-index: 2;
}
.slider-content li a .content {
background: linear-gradient(transparent, rgba(0, 0, 0, .75));
width: 100%;
height: 100px;
position: absolute;
bottom: 0;
left: 50%;
transform: translateY(100%) translateX(-50%);
transition-duration: .75s;
transition-delay: .4s;
opacity: 0;
padding: 40px 10px 10px 10px;
width: 400px;
}
.slider-content li a .content h2 {
font-weight: 300;
color: white;
font-size: 24px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css" rel="stylesheet"/>
<div class="row">
<div class="row-header">
<h2></h2>
</div>
<div class="row-container">
<div class="slider">
<span id="prev" class="handle handle-prev"><</span>
<div class="show-peek">
<ul class="slider-content">
<li class="slider-item">1</li>
<li class="slider-item left-item">2</li>
<li class="slider-item">3
</li>
<li class="slider-item right-item">4</li>
<li class="slider-item">5</li>
</ul>
</div>
<!-- ends show-peek -->
<span id="next" class="handle handle-next">></span>
</div>
<!-- ends slider -->
</div>
<!-- ends row-container -->
</div>
<!-- ends row -->

I did say that there was not really a CSS only solution but it seems you can be a bit creative..
You can take advantage of the -webkit-transform: scale CSS attribute.
Take your ul's and li's like so :
<ul class="slider-content">
<li id="1" class="slider-item">1</li>
<li id="2" class="slider-item">2</li>
<li id="3" class="slider-item">3</li>
<li id="4" class="slider-item">4</li>
</ul>
We can add some CSS to itterate over their order and modify their hover
ul{
list-style:none;
}
ul:hover li {
-webkit-transform: translateX(-25%);
transform: translateX(-25%);
}
ul:hover li:hover {
-webkit-transform: scale(1.5);
transform: scale(1.5);
transition-duration: 0.1818181818s;
}
ul:hover li:hover ~ li {
-webkit-transform: translateX(25%);
transform: translateX(25%);
}
.slider-item {
position: relative;
vertical-align: middle;
display: inline-block;
list-style: none;
width: 100px;
height: 69px;
/* background-color: black; */
transition-duration: .3s;
overflow: hidden;
cursor: pointer;
border: 1px solid rgba(205, 20, 20, .3);
}
.slider-content {
display: block;
margin-top: 34px;
list-style: none;
white-space: nowrap;
transform: translateY(-50%) translateX(-100px);
text-align: center;
}
<ul class="slider-content">
<li id="1" class="slider-item">1</li>
<li id="2" class="slider-item">2</li>
<li id="3" class="slider-item">3</li>
<li id="4" class="slider-item">4</li>
</ul>
This works by using the animations in CSS and some clever use of the translate css also.

To modify a searchbox with extra css/jQuery options

I am creating a search box query, with the following css animations, which is displayed in the snippet. It works like I need it to, but I just want to add two more things to it, to make it work for me.
How do I make the hit area of the search icon, expand the entire width of the header to make it more intuitive? At the moment, the hit area is fixed to the size ratio of the search icon.
I would also like to know, how do I display the search icon to the left of the placeholder text after it has been clicked?
Hope this makes sense
$('.header').on('click', '.search-toggle', function(e) {
var selector = $(this).data('selector');
$(selector).toggleClass('show').find('.search-input').focus();
$(this).toggleClass('active');
e.preventDefault();
});
#import url(https://fonts.googleapis.com/css?family=Roboto:400);
body {
font-family: 'Roboto', sans-serif;
}
.header {
max-width: 250px;
margin: 2em auto 10em;
}
.header-nav {
position: relative;
padding-right: 3em;
}
.header-nav:before,
.header-nav:after {
content: '';
display: table;
}
.header-nav:after {
clear: both;
}
.menu {
display: inline-block;
float: left;
list-style-type: none;
margin: 0;
padding: 0;
}
.menu span {
display: inline-block;
}
.menu .text {
color: #0097bf;
display: block;
padding: 10px;
position: relative;
transition: color 0.3s;
text-decoration: none;
}
.search-button {
position: absolute;
right: 20px;
top: 50%;
transform: translate(0, -50%);
}
/* search icon */
.search-toggle {
position: relative;
display: block;
height: 10px;
width: 10px;
}
.search-toggle::before,
.search-toggle::after {
content: '';
position: absolute;
display: block;
transition: all 0.1s;
}
.search-toggle::before {
border: 2px solid #0097bf;
border-radius: 50%;
width: 100%;
height: 100%;
left: -2px;
top: -2px;
}
.search-toggle::after {
height: 2px;
width: 7px;
background: #0097bf;
top: 10px;
left: 8px;
transform: rotate(45deg);
}
/* x icon */
.search-toggle.active::before {
width: 0;
border-width: 1px;
border-radius: 0;
transform: rotate(45deg);
top: -1px;
left: 4px;
}
.search-toggle.active::after {
width: 12px;
left: -1px;
top: 4px;
}
.search-input:focus {
outline: none;
}
#header-2 {
overflow: hidden;
}
#header-2 .menu span {
opacity: 1;
transition: transform 0.3s, opacity 0.2s 0.1s;
}
#header-2 .menu span .text:nth-child(1) {
transition-delay: 0.4s;
}
#header-2 .search-box {
position: absolute;
left: 0;
height: 100%;
padding-left: 2em;
transform: translateX(20%);
opacity: 0;
transition: all 0.4s 0.3s;
}
#header-2 .search-box .search-input {
border: 0;
width: 100%;
height: 100%;
background-color: transparent;
}
#header-2 .search-box .search-toggle {
width: 14px;
height: 14px;
padding: 0;
position: absolute;
left: 5px;
top: 50%;
transform: translateY(-50%);
}
#header-2.show .menu span {
transform: scale(0.8);
opacity: 0;
}
#header-2.show .search-box {
width: calc(100% - 5em);
transform: translateX(0);
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header id="header-2" class="header">
<nav class="header-nav">
<div class="search-button">
</div>
<p class="menu">
<span><span class="text">Search</span></span>
</p>
<form action="" class="search-box">
<input type="text" class="text search-input" placeholder="Type here to search..." />
</form>
</nav>
</header>

this is how you can make full header 'clickable' to start search.
I placed the icon to the left where your left padding was, see if demo is what you need
$('.header:not(.show)').on('click', '.header-nav', function(e) {
var selector = $(this).find('.search-toggle').data('selector');
$(selector).toggleClass('show').find('.search-input').focus();
$(this).toggleClass('active');
e.preventDefault();
});
#import url(https://fonts.googleapis.com/css?family=Roboto:400);
body {
font-family: 'Roboto', sans-serif;
}
.header {
max-width: 250px;
margin: 2em auto 10em;
}
.header-nav {
position: relative;
padding-right: 3em;
}
.header-nav:before,
.header-nav:after {
content: '';
display: table;
}
.header-nav:after {
clear: both;
}
.menu {
display: inline-block;
float: left;
list-style-type: none;
margin: 0;
padding: 0;
}
.menu span {
display: inline-block;
}
.menu .text {
color: #0097bf;
display: block;
padding: 10px;
position: relative;
transition: color 0.3s;
text-decoration: none;
}
.search-button {
position: absolute;
right: 20px;
top: 50%;
transform: translate(0, -50%);
}
.header.show .search-button{
left: .3em; transition: all 500ms;
}
/* search icon */
.search-toggle {
position: relative;
display: block;
height: 10px;
width: 10px;
}
.search-toggle::before,
.search-toggle::after {
content: '';
position: absolute;
display: block;
transition: all 0.1s;
}
.search-toggle::before {
border: 2px solid #0097bf;
border-radius: 50%;
width: 100%;
height: 100%;
left: -2px;
top: -2px;
}
.search-toggle::after {
height: 2px;
width: 7px;
background: #0097bf;
top: 10px;
left: 8px;
transform: rotate(45deg);
}
/* x icon */
.search-toggle.active::before {
width: 0;
border-width: 1px;
border-radius: 0;
transform: rotate(45deg);
top: -1px;
left: 4px;
}
.search-toggle.active::after {
width: 12px;
left: -1px;
top: 4px;
}
.search-input:focus {
outline: none;
}
#header-2 {
overflow: hidden;
}
#header-2 .menu span {
opacity: 1;
transition: transform 0.3s, opacity 0.2s 0.1s;
}
#header-2 .menu span .text:nth-child(1) {
transition-delay: 0.4s;
}
#header-2 .search-box {
position: absolute;
left: 0;
height: 100%;
padding-left: 2em;
transform: translateX(20%);
opacity: 0;
transition: all 0.4s 0.3s;
}
#header-2 .search-box .search-input {
border: 0;
width: 100%;
height: 100%;
background-color: transparent;
}
#header-2 .search-box .search-toggle {
width: 14px;
height: 14px;
padding: 0;
position: absolute;
left: 5px;
top: 50%;
transform: translateY(-50%);
}
#header-2.show .menu span {
transform: scale(0.8);
opacity: 0;
}
#header-2.show .search-box {
width: calc(100% - 5em);
transform: translateX(0);
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header id="header-2" class="header">
<nav class="header-nav">
<div class="search-button">
</div>
<p class="menu">
<span><span class="text">Search</span></span>
</p>
<form action="" class="search-box">
<input type="text" class="text search-input" placeholder="Type here to search..." />
</form>
</nav>
</header>