Issue
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
Solution
Is this what you are looking for? Just give the boxes individual flex-basis values. Right now they both share the same value of 50%. Even if you change that to something like 70%, they both share the same value and they both can't take 70% so it effectively remains at 50%.
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;
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 {
flex-basis: 30%;
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 {
flex-basis: 70%;
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>Answered By - maraaaaaaaa
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.