Can I apply align-self on transition??
As you can see, When I hover to .wrap
div:nth-of-type(2) {
align-self: flex-start;
}
div:nth-of-type(4) {
align-self: flex-end;
}
will change to align-self: flex-center;
I have tried to do transition: All 2s on .wrap div:nth-of-type(2) & .wrap div:nth-of-type(4) but it's not working. I hope to make a slow animation but it seems not working. I have read a post that said Flexbox align-self property not transitioning?. So I can't apply align-self on transition?
.wrap {
height: 300px;
width: 600px;
margin: 0 auto;
}
.wrap div {
height: 100px;
width: 100px;
border: 3px solid black;
background-color: pink;
transition: align-self 9s;
}
.wrap div:nth-of-type(2) {
align-self: flex-start;
}
.wrap div:nth-of-type(4) {
align-self: flex-end;
}
.wrap:hover div {
align-self: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<title>A Great Demo on CodePen</title>
</head>
<body>
<div class="wrap d-flex align-items-center justify-content-md-center">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
</body>
</html>
consider margin intead since you are using fixed height:
.wrap {
height: 300px;
width: 600px;
margin: 0 auto;
}
.wrap div {
height: 100px;
width: 100px;
border: 3px solid black;
background-color: pink;
transition: margin 1s;
}
.wrap div:nth-of-type(2) {
margin-bottom:200px
}
.wrap div:nth-of-type(4) {
margin-top:200px
}
.wrap:hover div {
margin: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<title>A Great Demo on CodePen</title>
</head>
<body>
<div class="wrap d-flex align-items-center justify-content-md-center">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
</body>
</html>
Related
Im playing around with bootstrap and i've come up against something I am struggling to find an answer to.
I want to put a 'Login' on the bottom right of the screen, near the fold. Below is my code:
img{
position: absolute;
bottom: 40%;
left: 50%;
transform:translateX(-40%);
z-index: 2;
}
.leftside, .rightside {
height: 50vh;
width: 100%;
}
#media screen and (min-width:768px)
{
.leftside, .rightside {
height: 100vh;
}
}
.leftside {
background:#20639B;
}
.rightside {
}
.home-btn {
position: absolute;
bottom: 40%;
left: 50%;
transform:translateX(-50%);
z-index: 2;
font-size: 1.6em;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<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="homepage.css">
</head>
<body>
<img src="Bird.png" alt="hummingbird">
<div class="row no-gutters">
<div class="col-md-6 no-gutters">
<div class="leftside">
</div>
</div>
<div class="col-md-6 no-gutters">
<div class="rightside d-flex justify-content-center align-items-center">
<h2>Mini Blog Project</h2>
<button class="btn btn-lg btn-secondary float-right home-btn">Login</button>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</body>
</html>
Currently the button sits centred on the right box, which is my second option. My first would be to have it sit within the right panel, near the bottom right. If I move the button outiside of the right div, i can make the button go down to the right, but it adds a row that breaks the effect.
any help would be appreciated.
img{
position: absolute;
bottom: 40%;
left: 50%;
transform:translateX(-40%);
z-index: 2;
}
.leftside, .rightside {
height: 50vh;
width: 100%;
}
#media screen and (min-width:768px)
{
.leftside, .rightside {
height: 100vh;
}
}
.leftside {
background:#20639B;
}
.rightside {
position: relative;
}
.home-btn {
position: absolute;
bottom: 20px;
right: 20px;
z-index: 2;
font-size: 1.6em;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<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="homepage.css">
</head>
<body>
<img src="Bird.png" alt="hummingbird">
<div class="row no-gutters">
<div class="col-md-6 no-gutters">
<div class="leftside">
</div>
</div>
<div class="col-md-6 no-gutters">
<div class="rightside d-flex justify-content-center align-items-center">
<h2>Mini Blog Project</h2>
<button class="btn btn-lg btn-secondary float-right home-btn">Login</button>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</body>
</html>
I'm having a problem where the divs (in this case imgs) in my jumbotron are not being constricted to it. Ideally, the image would sit in the same horizontal position it is now, but the jumbotron would extend downward (or the image upward I suppose, but I want it to all be relative) in order to encompass the image. Is there a good way to do that? Any help is apprecitated!
/* main color: #272950 */
body {
color: #fffae3;
background-color: #FF0000;
}
.header {
padding: 30px 0;
background: #FF0000;
}
.header .profile-image{
width: 25%;
height: 25%;
margin-right: 80px;
}
.header .profile-content .name {
color: #49515a;
font-size: 38px;
margin-bottom: 5px;
margin-top: 30px;
}
.header .container{
background-color: #77dd77;
}
.jumbotron{
background-color: #77dd77;
padding: 5em inherit;
background-size: auto 100%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./css/bootstrap.min.css" />
<link rel="stylesheet" href="css/index.css" />
</head>
<body>
<header class="header">
<div class="container-fluid">
<div class="jumbotron">
<img
src="https://cdn3.iconfinder.com/data/icons/social-messaging-productivity-6/128/profile-male-circle2-512.png"
alt="me"
class="profile-image img-fluid float-left"
/>
<div class="profile-content float-left">
<h1 class="name">AAAAAAAAA</h1>
</div>
</div>
</div>
</header>
<script
src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"
></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"
></script>
</body>
</html>
Because of the float-left class.
I'd rather use flex in this instance.
.profile-card {
display: flex;
}
<div class="jumbotron profile-card">
<img src="https://cdn3.iconfinder.com/data/icons/social-messaging-productivity-6/128/profile-male-circle2-512.png" alt="me" class="profile-image img-fluid" />
<div class="profile-content">
<h1 class="name">AAAAAAAAA</h1>
</div>
</div>
I want to create a split screen Bootstrap 4 page and put an image in the center overlapping the two columns. I have created two equal columns but I have no idea how to place the image to overlap them.
I have tried position:absolute and float:left but it doesn't help. Thank you for your help!
Expected:
Photo
html,
body {
height: 100%;
margin: 0;
}
body {
overflow-x: hidden;
}
col {
height: 100vh;
}
img {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Website</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</head>
<body>
<img src="https://imgur.com/Qk5Qa9M.jpg" class="mx-auto d-block" style="width:auto">
<div class="row h-100">
<div class="col" style="background-color:blue">
Left
</div>
<div class="col" style="background-color:red">
Right
</div>
</div>
</body>
</html>
this is solving your problem:
html,
body {
height: 100%;
margin: 0;
}
body {
overflow-x: hidden;
}
col {
height: 100vh;
}
img {
position: absolute;
bottom: 0; /* i deleted top:0; */
left: 50%; /* this and below code for excellent centered */
transform:translateX(-50%);
z-index:2;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Website</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</head>
<body>
<img src="https://picsum.photos/400/500">
<div class="row h-100">
<div class="col" style="background-color:blue">
Left
</div>
<div class="col" style="background-color:red">
Right
</div>
</div>
</body>
</html>
also, i deleted class and style attribute from img tag. because they unnecessary.
Add z-index: 1; in your img css
img {
z-index: 1;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
add simply z-index to in your img class
The z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order.
Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed)
html,
body {
height: 100%;
margin: 0;
}
body {
overflow: hidden;
}
col {
height: 100vh;
}
img {
position: absolute;
top: 15%;
bottom: 0;
left: 0;
right: 0;
z-index: 1001;
height: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Website</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</head>
<body>
<img src="https://imgur.com/Qk5Qa9M.jpg" class="mx-auto d-block" style="width:auto">
<div class="row h-100">
<div class="col" style="background-color:blue">
Left
</div>
<div class="col" style="background-color:red">
Right
</div>
</div>
</body>
</html>
im using Bootstrap 4. I have container with div which is outside of container on right side. Is it possible to do the same with a picture div? I did it with pseudo-element :after and "another" background color. (If you don't understand what i want to achieve
body {
overflow-x: hidden;
}
.box {
background-color: #F0F6FB;
padding: 120px 20px;
margin-right: 0;
margin-left: auto;
margin-top: -125px;
position: relative;
border-radius: 50px 0px 0px 50px;
}
.box:after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 80%;
right: -3000px;
background: #F0F6FB;
z-index: -1;
}
.box-image {
background: url(https://images5.alphacoders.com/456/456536.jpg);
height: 230px;
border-radius: 0px 50px 50px 0px;
margin-top: 60px;
background-size: cover;
background-position: 50% 50%;
z-index: 1;
position: relative;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<br/><br/> <br/><br/> <br/><br/> <br/><br/>
<div class="container">
<div class="box-image"> </div>
<div class="box">
</div>
</div>
<br/><br/> <br/><br/> <br/><br/> <br/><br/>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
You can use container-fluid only for the image..
I have edited the code.
body {
overflow-x: hidden;
}
.box {
background-color: #F0F6FB;
padding: 120px 20px;
margin-right: 0;
margin-left: auto;
margin-top: -125px;
position: relative;
border-radius: 50px 0px 0px 50px;
}
.box:after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 80%;
right: -3000px;
background: #F0F6FB;
z-index: -1;
}
.box-image {
background: url(https://images5.alphacoders.com/456/456536.jpg);
height: 230px;
border-radius: 0px 50px 50px 0px;
margin-top: 60px;
background-size: cover;
background-position: 50% 50%;
z-index: 1;
position: relative;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<br/><br/> <br/><br/> <br/><br/> <br/><br/>
<div class="container-fluid">
<div class="box-image"> </div>
</div>
<div class="container">
<div class="box">
</div>
</div>
<br/><br/> <br/><br/> <br/><br/> <br/><br/>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
Hope this could help:
body {
overflow-x: hidden;
}
.box {
background-color: #F0F6FB;
padding: 120px 20px;
margin-right: 0;
margin-left: auto;
margin-top: -125px;
position: relative;
border-radius: 50px 0px 0px 50px;
}
.box:after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 80%;
right: -3000px;
background: #F0F6FB;
z-index: -1;
}
.box-image {
background: url(https://images5.alphacoders.com/456/456536.jpg);
height: 230px;
border-radius: 0px 50px 50px 0px;
margin-top: 60px;
background-size: cover;
background-position: 50% 50%;
z-index: 1;
position: relative;
width: 80%;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<br/><br/> <br/><br/> <br/><br/> <br/><br/>
<div class="box-image"> </div>
<div class="container">
<div class="box">
</div>
</div>
<br/><br/> <br/><br/> <br/><br/> <br/><br/>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
body {
overflow-x: hidden;
}
.box {
background-color: #F0F6FB;
padding: 120px 20px;
margin-right: 0;
margin-left: auto;
margin-top: -125px;
position: relative;
border-radius: 50px 0px 0px 50px;
}
.box:after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 80%;
right: -3000px;
background: #F0F6FB;
z-index: -1;
}
.box-image {
background: url(https://images5.alphacoders.com/456/456536.jpg);
height: 230px;
border-radius: 0px 50px 50px 0px;
margin-top: 60px;
background-size: cover;
background-position: 50% 50%;
z-index: 1;
position: relative;
}
.box-image:after {
content: '';
position: absolute;
top: 0;
bottom: 0;
right: 80%;
left: -3000px;
background: #FF0000;
z-index: 1;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<br/><br/> <br/><br/> <br/><br/> <br/><br/>
<div class="container">
<div class="box-image"> </div>
<div class="box">
</div>
</div>
<br/><br/> <br/><br/> <br/><br/> <br/><br/>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
I'm essentially creating a "sliding-door" animation with the words "HELLO" in the middle, that will split in half as the doors open. The text on the left has letters pushed right up to the edge of the left "door"/div, while the text on the right has a tiny little gap on the left (the "LO!"). I checked with the dev console, and don't see any padding, border, or margin that could be causing this. It's obviously not a big deal, but how can I push the letter "L" in "LO!" flush up against the edge of the div/door container that it's in?
html, body {
height: 100%;
width: 100%; }
.container {
border: 1px solid black; }
.doors {
height: 100vh;
width: 50vw;
border: 1px solid blue;
position: absolute;
display: inline-flex;
align-items: center; }
#left-door {
background-color: #1c1b1a;
left: 0;
transition: all 1s;
justify-content: flex-end; }
#right-door {
background-color: #f9d73e;
right: 0;
transition: all 1s;
justify-content: flex-start; }
.slide-right {
margin-right: -100%; }
.slide-left {
margin-left: -100%; }
.door-text {
font-family: 'Lato', san-serif;
height: 100px;
width: 50%;
font-size: 4em;
line-height: 100px;
font-weight: 900; }
#text-left {
text-align: right;
color: #f9d73e; }
#text-right {
text-align: left;
color: #1c1b1a; }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Portfolio</title>
<!-- Bootstrap CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<link rel="stylesheet" href="./home.css">
</head>
<body>
<div id="left-door" class='doors'>
<h1 id="text-left" class="door-text">HEL</h1>
</div>
<div id="right-door" class='doors'>
<h1 id="text-right" class="door-text">LO!</h1>
</div>
<div class="container">
<h1>this is the body</h1>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="./home.js"></script>
</html>
The letter "L" is taking up it's normal space I think. You could correct the small gap manually with a negative indent, like this: text-indent: -5px;
html, body {
height: 100%;
width: 100%; }
.container {
border: 1px solid black; }
.doors {
height: 100vh;
width: 50vw;
border: 1px solid blue;
position: absolute;
display: inline-flex;
align-items: center; }
#left-door {
background-color: #1c1b1a;
left: 0;
transition: all 1s;
justify-content: flex-end; }
#right-door {
background-color: #f9d73e;
right: 0;
transition: all 1s;
justify-content: flex-start; }
.slide-right {
margin-right: -100%; }
.slide-left {
margin-left: -100%; }
.door-text {
font-family: 'Lato', san-serif;
height: 100px;
width: 50%;
font-size: 4em;
line-height: 100px;
font-weight: 900; }
#text-left {
text-align: right;
color: #f9d73e; }
#text-right {
text-align: left;
color: #1c1b1a;
text-indent: -5px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Portfolio</title>
<!-- Bootstrap CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<link rel="stylesheet" href="./home.css">
</head>
<body>
<div id="left-door" class='doors'>
<h1 id="text-left" class="door-text">HEL</h1>
</div>
<div id="right-door" class='doors'>
<h1 id="text-right" class="door-text">LO!</h1>
</div>
<div class="container">
<h1>this is the body</h1>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="./home.js"></script>
</html>