html {
transition: all 0.5s ease-out;
}
*, *::before, *::after {
box-sizing: border-box;
}
.split-view {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
background-color: #111;
}
.box {
position: relative;
flex-basis: 50%;
height: 100%;
transition: 0.6s all cubic-bezier(0.2, 0.6, 0.7, 1);
background-position: center;
}
.box:hover {
flex-basis: calc(100% / 13 * 9);
}
.box__overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: 0.8s all ease-out;
transition: 0.8s all cubic-bezier(1, 0, 0, 1);
}
.box-1 {
background-size: cover;
font-family: 'Kanit', sans-serif;
}
.box-1 .box__overlay {
background-color: rgba(96, 155, 116, 0.2);
}
.box-1:hover .box__overlay {
background-color: rgba(96, 155, 116, 0.1);
}
.box-1 .box__title {
position: absolute;
bottom: 0;
text-align: left;
margin: 0.5em 0.8em;
color: white;
font-size: calc(30px + 20 * ((100vw - 320px) / 680));
word-spacing: 100vw;
}
.box-2 {
background-size: cover;
font-family: 'Kanit', sans-serif;
}
.box-2 .box__overlay {
background-color: rgba(96, 155, 116, 0.8);
}
.box-2:hover .box__overlay {
background-color: rgba(0, 157, 157, 0.5);
}
.box-2 .box__title {
position: absolute;
bottom: 0;
text-align: right;
margin: 0.5em 0.8em;
color: #fff;
font-size: calc(30px + 15 * ((100vw - 320px) / 680));
word-spacing: 100vw;
}<!DOCTYPE html>
<html>
<head>
<title>Oco, online coworking</title>
<meta charset="UTF-8">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Kanit:wght@200&display=swap" rel="stylesheet">
<link rel="stylesheet" href="{{ url_for('static', filename='css/home.css') }}" type="text/css">
</head>
<body>
<section class="split-view">
<div class="box box-1">
<a href="{{ url_for('study_hub')}}" class="box__overlay">
<h1 class="box__title">Study Hub</h1>
</a>
</div>
<div class="box box-2">
<div class="box__overlay">
<h1 class="box__title">About</h1>
</div>
</div>
</section>
</body>
</html>complete beginner, stuck at this, 'elp
I'm trying to access the individual boxes' css so I can change the ratio to a 70/30 screen layout, rather than the current 50/50, but no matter what I change it either completely scuffs my transitions, or the whole thing breaks.
Any of my trial and error details will likely not be of any help either, sooo sorry to just hand this to you. <3