I've got stuck in a CSS image transition and would love your help.
Here is my code so far...
.container2 {
display: flex;
min-height: 750px;
margin-bottom:-30px;
}
.container2>div {
flex: 1;
background-size:0 0;
position:relative;
z-index:-1;
}
.container2>div::before {
content:"";
position:absolute;
background-image:inherit;
background-size:cover;
background-position:center;
z-index:-1;
top:0;
bottom:0;
}
.container2>div:last-child::before {
top:0px;
bottom:0px;
right:0;
left:0;
mask:linear-gradient(to top,transparent ,#00004F 150px);
-webkit-mask:linear-gradient(to top,transparent ,#00004F 50px);
}
.container3 {
display: flex;
min-height: 400px;
margin-bottom:0px;
}
.container3>div {
flex: 1;
background-size:0 0;
position:relative;
z-index:-1;
}
.container3>div::before {
content:"";
position:absolute;
background-image:inherit;
background-size:cover;
background-position:center;
z-index:-1;
top:0;
bottom:0;
}
.container3>div:last-child::before {
top:0px;
bottom:0px;
right:0;
left:0;
-webkit-mask:linear-gradient(to top,transparent ,#00004F 50px);
-webkit-mask:linear-gradient(to bottom,transparent ,#00004F 150px);
}
.container4 {
display: flex;
min-height: 700px;
margin-bottom:0px;
}
.container4>div {
flex: 1;
background-size:0 0;
position:relative;
z-index:-1;
}
.container4>div::before {
content:"";
position:absolute;
background-image:inherit;
background-size:cover;
background-position:center;
z-index:-1;
top:0;
bottom:0;
}
.container4>div:last-child::before {
top:0px;
bottom:0px;
right:0;
left:0;
mask:linear-gradient(to bottom,transparent ,#00004F 50px);
- webkit-mask:linear-gradient(to bottom,transparent ,#00004F 150px);
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>WebSite Name </title>
<!-- Favicon-->
<link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
<!-- Core theme CSS (includes Bootstrap)-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div class="container2">
<div style="background-image:url(https://i.postimg.cc/4xRmr8r0/space3.jpg)"></div>
</div>
<div class="container3">
<div style="background-image:url(https://i.postimg.cc/Qtf7DppT/blue-sky.jpg)"></div>
</div>
<div class="container4">
<div style="background-image:url(https://i.postimg.cc/zvMRb82D/cloud-sky.jpg)"></div>
</div>The 1st set of images Space and Blue Sky are okay but I wanted to put curves in both sides like so:
and then the blue_sky and cloud_sky transitions are just nightmares... I have copied the code from here but the original request was image transition side to side left to right ... my one is horizontal and this is where I got confused.
Not a CSS programmer ! Thanks!