I'm new to HTML and CSS (student) and I'm running into an issue here.
I want to change the body background color when clicking on an element having a CSS Animation. Is it possible? Thanks!
I tried to set the Rocket as a Button, But it only changed the Rockets Color. I want to make it Change the background color for the Body.
body {
background: radial-gradient(circle at bottom, navy 0, black 100%);
height: 100vh;
overflow: hidden;
}
.orbit {
height: 450px;
width: 650px;
border-radius: 50%;
position: absolute;
margin: auto;
left: 500px;
bottom: 300px;
animation: spin 5s infinite linear;
}
#keyframes spin {
100% {
transform: rotate(360deg)
}
}
.rocket {
background-color: #fafcf7;
height: 50px;
width: 25px;
border-radius: 50% 50% 0 0;
position: relative;
left: 11px;
top: 115px;
}
.rocket:before {
position: absolute;
content: "";
background-color: #39beff;
height: 20px;
width: 55px;
z-index: -1;
border-radius: 50% 50% 0 0;
right: -15px;
bottom: 0;
}
.rocket:after {
position: absolute;
content: "";
background-color: #39beff;
height: 4px;
width: 15px;
border-radius: 0 0 2px 2px;
bottom: -4px;
left: 4.3px;
}
.window {
position: relative;
height: 10px;
width: 10px;
background-color: #151845;
border: 2px solid #b8d2ec;
border-radius: 50%;
top: 15px;
left: 5px;
}
<div class="orbit">
<button class="rocket"></button>
<div class="window"></div>
</div>
To do this, you need to know JavaScript. Take this sample code and try to do more yourself.
const rocket = document.getElementById("rocket")
rocket.addEventListener('click', (e) => {
const randomColor = Math.floor(Math.random()*16777215).toString(16);
document.body.style = `background: radial-gradient(circle at bottom, #${randomColor} 0, black 100%);`
})
body {
background: radial-gradient(circle at bottom, navy 0, black 100%);
height: 100vh;
overflow: hidden;
}
.orbit {
height: 450px;
width: 650px;
border-radius: 50%;
position: absolute;
margin: auto;
left: 500px;
bottom: 300px;
animation: spin 10s infinite linear;
}
#keyframes spin {
100% {
transform: rotate(360deg)
}
}
.rocket {
background-color: #fafcf7;
height: 50px;
width: 25px;
border-radius: 50% 50% 0 0;
position: relative;
left: 11px;
top: 115px;
cursor: pointer;
}
.rocket:before {
position: absolute;
content: "";
background-color: #39beff;
height: 20px;
width: 55px;
z-index: -1;
border-radius: 50% 50% 0 0;
right: -15px;
bottom: 0;
}
.rocket:after {
position: absolute;
content: "";
background-color: #39beff;
height: 4px;
width: 15px;
border-radius: 0 0 2px 2px;
bottom: -4px;
left: 4.3px;
}
.window {
position: relative;
height: 10px;
width: 10px;
background-color: #151845;
border: 2px solid #b8d2ec;
border-radius: 50%;
top: 15px;
left: 5px;
}
<div class="orbit">
<button id="rocket" class="rocket"></button>
<div class="window"></div>
</div>
This is a gif of issue : https://gifyu.com/image/DeGX
And my code: https://jsfiddle.net/Mrsheesh/dj1L3vhq/7
i am using xampp to host this page in locale
and even jsfiddle seems laggy.
I tried to remove the image, and it worked fine.
Is there a way to fix this, without remove the image?
My code:
console.log("msg.js Loaded");
function show_msg() {
document.querySelector(".box-msg").classList.add("active");
document.querySelector(".bg-msg").classList.add("active");
}
function hide_msg() {
document.querySelector(".box-msg").classList.remove("active");
document.querySelector(".bg-msg").classList.remove("active");
}
body {
margin: 0;
}
.bg-msg {
visibility: hidden;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: rgb(0, 0, 0, 0.5);
opacity: 0;
transition: all 0.5s ease;
}
.bg-msg.active {
visibility: visible;
opacity: 1;
}
.box-msg {
visibility: hidden;
position: fixed;
left: 50%;
top: 10%;
transform: translateX(-50%);
height: 0;
width: 0;
max-width: 550px;
border-radius: 20px;
background-color: white;
border: 1px solid rgb(0, 0, 0, 0.5);
overflow: hidden;
opacity: 0;
transition: all 0.5s ease;
}
.box-msg.active {
visibility: visible;
opacity: 1;
height: 400px;
width: 50%;
}
.box-msg .box-head {
height: 20%;
width: 100%;
/* background-color: blue; */
}
/* ==================================Close Button================================= */
.box-msg .box-head .close {
position: absolute;
top: 5px;
left: 5px;
height: 20px;
width: 20px;
border-radius: 5px;
cursor: pointer;
}
.box-msg .box-head .close::after {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
content: "\D7";
/* use the hex value here... */
font-size: 30px;
color: #FFF;
line-height: 20px;
text-align: center;
}
/* ==================================Head IMG================================= */
.box-msg .box-head .background {
position: absolute;
width: 100%;
height: 20%;
overflow: hidden;
}
.background img {
position: absolute;
top: 50%;
left: 0;
transform: translate(-50%, -50%);
width: 300%;
/* animation: 10s left_right forwards; */
}
#keyframes left_right {
from {
left: 0;
}
to {
left: 100%;
}
}
/* ==================================Head Title================================= */
.box-msg .box-head .title {
position: relative;
height: 100%;
margin-left: 25px;
margin-right: 25px;
color: white;
font-size: clamp(10px, 4vw, 35px);
/* line-height: 80px;
text-align: center; */
display: flex;
justify-content: center;
align-items: center;
font-family: BebasNeue-Regular;
letter-spacing: 0.1em;
}
/* ====================================MSG Body================================= */
.box-msg .box-body {
height: 80%;
width: 100%;
/* background-color: brown; */
}
/* ======================================BTN===================================== */
.btn {
cursor: pointer;
width: 100px;
height: 50px;
background: coral;
text-align: center;
line-height: 50px;
}
<div class="btn" onclick="show_msg()">Test</div>
<div class="bg-msg"></div>
<div class="box-msg">
<div class="box-head">
<div class="background">
<img src="./img/background/bg2.jpg" alt="">
</div>
<div class="close" onclick="hide_msg()">Close</div>
<div class="title">Title</div>
</div>
<div class="box-body">
<div class="body-text">Body Text</div>
</div>
</div>
I want to zoom background image on a hover but without change text size. How can I make this?
* { margin: 0; padding: 0; }
body {
}
.article-container {
width: 300px;
height: 200px;
border: 1px solid #000000;
overflow: hidden;
position: relative;
}
.article-img-holder {
width: 100%;
height: 100%;
background: url(https://awik.io/demo/background-image-zoom/traffic2.jpg);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
transition: all 1s;
}
.article-img-holder:hover {
transform: scale(1.2);
}
.split-image-links {
width: 100%;
height: 100vh;
display: flex;
}
.split-image-links .split-image-link {
width: 25%;
height: 100%;
overflow: hidden;
position: relative;
}
.split-image-links .split-image-link .zoom-image {
width: 100%;
height: 100%;
cursor: pointer;
position: relative;
}
.split-image-links .split-image-link .zoom-image .split-image-header {
z-index: 1;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
color: #fff;
}
.split-image-links .split-image-link .zoom-image .zoom-image-headline {
color: #fff;
text-align: center;
line-height: 100vh;
font-family: 'Poppins';
text-transform: uppercase;
font-size: 45px;
font-weight: 600;
}
.split-image-links .split-image-link .zoom-image.zoom-image-first {
background: linear-gradient(
rgba(0, 0, 0, 0.4),
rgba(0, 0, 0, 0.4)
), url(https://api.time.com/wp-content/uploads/2020/07/jeff-bezos.jpg?quality=85&w=1024&h=628&crop=1);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
transition: all 0.5s;
}
.split-image-links .split-image-link .zoom-image:hover {
transform: scale(1.1);
}
<body>
<div class="split-image-links">
<div class="split-image-link">
<div class="zoom-image zoom-image-first">
<h1 class="zoom-image-headline">who</h1>
</div>
</div>
</div>
</body>
Instead of using scale() for the entire element, work with the background-size property, that way font-size will remain untouched, lemme know if it works for you or not.
.bg {
width: 400px;
height: 240px;
margin: 30px auto;
background: url(https://api.time.com/wp-content/uploads/2020/07/jeff-bezos.jpg?quality=85&w=1024&h=628&crop=1) no-repeat center center;
background-size: 100%; /* work with the background-size */
transition: background-size 1s ease-in-out;
position: relative;
z-index: 1;
}
.bg:hover {
background-size: 120% /* work with the background-size */
}
.bg::before {
position: absolute;
content: '';
width: 100%;
height: 100%;
background: rgba(0,0,0,.5);
top: 0;
left: 0;
z-index: -1;
}
.bg h2 {
text-align: center;
font-size: 60px;
line-height: 230px;
font-family: sans-serif;
color: #fff;
}
<div class="bg">
<h2>WHO</h2>
</div>
Thats the expected behavior of scale, it scale every children too, to change just the bg maybe you should use other approaches.
I provide one, I hope it fit in your need.
On this approach the BG is an absolute element, isnt the container of the h1 and the hover now is on split-image-link instead of zoom-image.
* { margin: 0; padding: 0; }
body {
}
.article-container {
width: 300px;
height: 200px;
border: 1px solid #000000;
overflow: hidden;
position: relative;
}
.article-img-holder {
width: 100%;
height: 100%;
background: url(https://awik.io/demo/background-image-zoom/traffic2.jpg);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
transition: all 1s;
}
.article-img-holder:hover {
transform: scale(1.2);
}
.split-image-links {
width: 100%;
height: 100vh;
display: flex;
}
.split-image-links .split-image-link {
width: 25%;
height: 100%;
overflow: hidden;
position: relative;
}
.split-image-links .split-image-link .zoom-image {
width: 100%;
height: 100%;
cursor: pointer;
position: relative;
}
.split-image-links .split-image-link .zoom-image .split-image-header {
z-index: 1;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
color: #fff;
}
.split-image-links .split-image-link .zoom-image-headline {
position: relative;
color: #fff;
text-align: center;
line-height: 100vh;
font-family: 'Poppins';
text-transform: uppercase;
font-size: 45px;
font-weight: 600;
}
.split-image-links .split-image-link .zoom-image.zoom-image-first {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
background: linear-gradient(
rgba(0, 0, 0, 0.4),
rgba(0, 0, 0, 0.4)
), url(https://api.time.com/wp-content/uploads/2020/07/jeff-bezos.jpg?quality=85&w=1024&h=628&crop=1);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
transition: all 0.5s;
}
.split-image-links .split-image-link:hover .zoom-image {
transform: scale(1.1);
}
<body>
<div class="split-image-links">
<div class="split-image-link">
<div class="zoom-image zoom-image-first"></div>
<h1 class="zoom-image-headline">who</h1>
</div>
</div>
</body>
Here is the basic version of your need.
.content {
position: relative;
/* border: 1px solid red; */
display: inline-block;
}
h1 {
color: #FFF;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 999;
}
.bg:hover, h1:hover + .bg {
transform: scale(1.1);
transition: all 1s;
}
<div class="content">
<h1>WHO</h1>
<img class="bg" src="https://awik.io/demo/background-image-zoom/traffic2.jpg" alt="background image">
</div>
I tried to make a custom slider for my projects on my website.
It's important for me to use div tags to slide, because I want to include more information on it, like text and buttons.
It has a "next"- and "previous" button. The problem is that it doesn't slide back and it doesn't start at the beginning after it reached the last slide.
What's going wrong?
$(document).ready(function() {
projectSlider($('.projects').children('.project').first());
function projectSlider(projects) {
$(projects).show(function() {
$('.next').click(function() {
if (projects.next().hasClass('project')) {
projectSlider(projects.next());
} else {
projectSlider($('.projects').children('.project').first());
}
});
$('.previous').click(function() {
if (projects.prev().hasClass('project')) {
projectSlider(projects.prev());
} else {
projectSlider($('.projects').children('.project').first());
}
});
});
}
});
html,
body {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
font-family: "Roboto Condensed", sans-serif;
}
/* */
a {
text-decoration: none;
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
font-weight: normal;
}
.inline-list {
list-style-type: none;
padding: 0;
}
.inline-list>li {
display: inline-block;
}
/* */
header {
display: block;
position: relative;
top: 0;
left: 0;
width: 35%;
height: 100vh;
background: #fff;
}
.profile {
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.avatar {
display: inline-block;
position: relative;
width: 80px;
height: 80px;
background: url("../img/avatar.jpg") no-repeat center center;
background-size: cover;
border-radius: 100%;
}
.socialmedia>li {
padding: 0 5px 0 0;
}
.socialmedia>li>a {
color: #212121;
}
/* */
main {
display: block;
position: absolute;
top: 0;
right: 0;
width: 65%;
height: 100%;
background: #EEEEEE;
}
.controls {
display: block;
position: absolute;
z-index: 100000;
top: 50%;
transform: translateY(-50%);
width: 100%;
}
.control {
display: inline-block;
position: absolute;
width: 36px;
height: 36px;
margin: 0 20px 0 20px;
background: #f5f5f5;
color: #212121;
border-radius: 100%;
cursor: pointer;
}
.backward {
left: 0;
float: left;
text-align: center;
}
.backward-arrow {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 18px;
height: 18px;
background: url("../img/icon/left-chevron.svg") no-repeat center center;
background-size: cover;
color: #212121;
}
.forward-arrow {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 18px;
height: 18px;
background: url("../img/icon/right-chevron.svg") no-repeat center center;
background-size: cover;
color: #212121;
}
.forward {
right: 0;
float: right;
}
.projects {
display: block;
position: relative;
width: 100%;
height: 100vh;
}
.project {
display: none;
position: absolute;
width: 100%;
height: 100vh;
}
.dog {
background: red;
}
.cat {
background: green;
}
.rabbit {
background: blue;
}
/* */
footer {
display: block;
position: relative;
bottom: 0;
padding: 0;
width: 100%;
height: 36px;
background: #fff;
}
.made {
display: inline-block;
position: absolute;
float: left;
left: 0;
top: 50%;
height: 38px;
transform: translateY(-50%);
}
.made>p {
display: inline-block;
}
.legal {
display: inline-block;
position: absolute;
float: right;
right: 0;
top: 50%;
height: 38px;
transform: translateY(-50%);
}
/* */
.envelope {
display: inline-block;
position: relative;
width: 18px;
height: 18px;
background: url("../img/icon/envelope.svg") no-repeat center center;
background-size: cover;
}
.twitter {
display: inline-block;
position: relative;
width: 18px;
height: 18px;
background: url("../img/icon/brands/twitter.svg") no-repeat center center;
background-size: cover;
}
.dribbble {
display: inline-block;
position: relative;
width: 18px;
height: 18px;
background: url("../img/icon/brands/dribbble.svg") no-repeat center center;
background-size: cover;
}
.github {
display: inline-block;
position: relative;
width: 18px;
height: 18px;
background: url("../img/icon/brands/github.svg") no-repeat center center;
background-size: cover;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
<main>
<div class="project-slider">
<div class="controls">
<div class="control previous">
<div class="backward-arrow"><-</div>
</div>
<div class="control forward next">
<div class="forward-arrow">-></div>
</div>
</div>
<div class="projects">
<div class="project dog"></div>
<div class="project cat"></div>
<div class="project rabbit"></div>
</div>
</div>
</main>
JSFiddle
Your code seems to be unnecessarily recursive. Each time you click an arrow, the click handlers are bound again. Also, if you click "next", the object passed to projectSlider contains only a single project element, so there will be no "next" or "previous" in that object.
I suggest a different approach. In my example below, for each click, the appropriate project (based on a numeric index) is hidden, then appended to the project container (which stacks it on top of the others), and then re-shown (for animation purposes).
function refreshProjects(project_holder, projects, project_index) {
project_index = (project_index + projects.length) % projects.length;
var thisProject = projects.eq(project_index);
thisProject.hide().appendTo(project_holder).show(250);
}
$(function() {
var project_holder = $('.projects');
var projects = project_holder.children('.project');
var project_index = 0;
$('.control-next').click(function() {
refreshProjects(project_holder, projects, ++project_index);
});
$('.control-previous').click(function() {
refreshProjects(project_holder, projects, --project_index);
});
});
body {
padding: 0;
margin: 0;
font-size: 10px;
}
main {
position: absolute;
top: 0;
right: 0;
width: 65%;
height: 100%;
background: #EEEEEE;
}
.controls {
position: absolute;
z-index: 100000;
top: 50%;
transform: translateY(-50%);
width: 100%;
}
.control {
position: absolute;
background: #f5f5f5;
border: none;
color: #212121;
border-radius: 50%;
cursor: pointer;
width: 1.8em;
height: 1.8em;
padding: .5em;
box-sizing: content-box;
font-size: 1.4em;
outline: 0;
}
.control-previous {
left: 1em;
}
.control-next {
right: 1em;
}
.projects {
width: 100%;
height: 100vh;
}
.project {
position: absolute;
width: 100%;
height: 100%;
}
.project:not(:first-child) {
display: none;
}
.dog {
background: red;
}
.cat {
background: green;
}
.rabbit {
background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
<main>
<div class="project-slider">
<div class="controls">
<button type="button" class="control control-previous"><-</button>
<button type="button" class="control control-next">-></button>
</div>
<div class="projects">
<div class="project dog"></div>
<div class="project cat"></div>
<div class="project rabbit"></div>
</div>
</div>
</main>
I wanted to divide a landing page into three vertical parts. But I am failing to do so.
Here is my code:
const left = document.querySelector(".left");
const middle = document.querySelector(".middle");
const right = document.querySelector(".right");
const container = document.querySelector(".container");
left.addEventListener("mouseenter", () => {
container.classList.add("hover-left");
});
left.addEventListener("mouseleave", () => {
container.classList.remove("hover-left");
});
middle.addEventListener("mouseenter", () => {
container.classList.add("hover-middle");
});
middle.addEventListener("mouseleave", () => {
container.classList.remove("hover-middle");
});
right.addEventListener("mouseenter", () => {
container.classList.add("hover-right");
});
right.addEventListener("mouseleave", () => {
container.classList.remove("hover-right");
});
:root {
--container-bg-color: #333;
--left-bg-color: rgba(223, 39, 39, 0.7);
--left-button-hover-color: rgba(161, 11, 11, 0.3);
--middle-bg-color: rgba(39, 217, 223, 0.7);
--middle-button-hover-color: rgba(14, 32, 196, 0.151);
--right-bg-color: rgba(43, 43, 43, 0.8);
--right-button-hover-color: rgba(92, 92, 92, 0.3);
--hover-width: 70%;
--other-width: 15%;
--speed: 1000ms;
}
html,
body {
padding: 0;
margin: 0;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
width: 100%;
height: 100%;
overflow-x: hidden;
}
h1 {
font-size: 3rem;
color: #fff;
position: absolute;
left: 50%;
top: 20%;
transform: translateX(-50%);
white-space: nowrap;
}
.button {
display: block;
position: absolute;
left: 50%;
top: 40%;
height: 2.5rem;
padding-top: 1.3rem;
width: 15rem;
text-align: center;
color: #fff;
border: #fff solid 0.2rem;
font-size: 1rem;
font-weight: bold;
text-transform: uppercase;
text-decoration: none;
transform: translateX(-50%);
}
.split.left .button:hover {
background-color: var(--left-button-hover-color);
border-color: var(--left-button-hover-color);
}
.split.middle .button:hover {
background-color: var(--middle-button-hover-color);
border-color: var(--middle-button-hover-color);
}
.split.right .button:hover {
background-color: var(--right-button-hover-color);
border-color: var(--right-button-hover-color);
}
.container {
position: relative;
width: 100%;
height: 100%;
background: var(--container-bg-color);
}
.split {
position: absolute;
width: 33.33%;
height: 100%;
overflow: hidden;
}
.split.left {
left: 0;
background: url('https://image.ibb.co/m56Czw/designer.jpg') center center no-repeat;
background-size: cover;
}
.split.left:before {
position: absolute;
content: "";
width: 100%;
height: 100%;
background: var(--left-bg-color);
}
.split.middle {
display: inline-block;
background: url('https://image.ibb.co/m56Czw/designer.jpg') center center no-repeat;
background-size: cover;
}
.split.middle:before {
position: absolute;
content: "";
width: 100%;
height: 100%;
background: var(--middle-bg-color);
}
.split.right {
right: 0;
background: url('https://image.ibb.co/m3ZbRb/programmer.png') center center no-repeat;
background-size: cover;
}
.split.right:before {
position: absolute;
content: "";
width: 100%;
height: 100%;
background: var(--right-bg-color);
}
.split.left,
.split.middle,
.split.right,
.split.right:before,
.split.left:before,
.split.middle:before {
transition: var(--speed) all ease-in-out;
}
.hover-left .left {
width: var(--hover-width);
}
.hover-left .middle {
width: var(--other-width);
}
.hover-left .right {
width: var(--other-width);
}
.hover-left .middle:before {
z-index: 2;
}
.hover-middle .middle {
width: var(--hover-width);
}
.hover-middle .left {
width: var(--other-width);
}
.hover-middle .right {
width: var(--other-width);
}
.hover-middle .right:before {
z-index: 2;
}
.hover-right .right {
width: var(--hover-width);
}
.hover-right .middle {
width: var(--other-width);
}
.hover-right .left {
width: var(--other-width);
}
.hover-right .middle:before .left:before {
z-index: 2;
}
#media(max-width: 800px) {
h1 {
font-size: 2rem;
}
.button {
width: 12rem;
}
}
#media(max-height: 700px) {
.button {
top: 70%;
}
}
<body>
<div class="container">
<div class="split left">
<h1>The Designer</h1>
Read More
</div>
<div class="split middle">
<h1>The Middle</h1>
Read More
</div>
<div class="split right">
<h1>The Programmer</h1>
Read More
</div>
</div>
<script src="js/main.js"></script>
</body>
I am getting an output like this:
output of the current code
I wanted to insert .middle into the center part of the page? Where am I making a mistake? Transitions are also overlapping onto each other.
Did some changes in your CSS code. You have to set the position of the middle section on hover like below
.split.middle {
left: 33.333%;
}
.hover-left .middle {
left: 70%;
}
.hover-middle .middle {
left: 15%;
}
.hover-right .middle {
left: 13%;
}
const left = document.querySelector(".left");
const middle = document.querySelector(".middle");
const right = document.querySelector(".right");
const container = document.querySelector(".container");
left.addEventListener("mouseenter", () => {
container.classList.add("hover-left");
});
left.addEventListener("mouseleave", () => {
container.classList.remove("hover-left");
});
middle.addEventListener("mouseenter", () => {
container.classList.add("hover-middle");
});
middle.addEventListener("mouseleave", () => {
container.classList.remove("hover-middle");
});
right.addEventListener("mouseenter", () => {
container.classList.add("hover-right");
});
right.addEventListener("mouseleave", () => {
container.classList.remove("hover-right");
});
:root {
--container-bg-color: #333;
--left-bg-color: rgba(223, 39, 39, 0.7);
--left-button-hover-color: rgba(161, 11, 11, 0.3);
--middle-bg-color: rgba(39, 217, 223, 0.7);
--middle-button-hover-color: rgba(14, 32, 196, 0.151);
--right-bg-color: rgba(43, 43, 43, 0.8);
--right-button-hover-color: rgba(92, 92, 92, 0.3);
--hover-width: 70%;
--other-width: 15%;
--speed: 1000ms;
}
html,
body {
padding: 0;
margin: 0;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
width: 100%;
height: 100%;
overflow-x: hidden;
}
h1 {
font-size: 3rem;
color: #fff;
position: absolute;
left: 50%;
top: 20%;
transform: translateX(-50%);
white-space: nowrap;
}
.button {
display: block;
position: absolute;
left: 50%;
top: 40%;
height: 2.5rem;
padding-top: 1.3rem;
width: 15rem;
text-align: center;
color: #fff;
border: #fff solid 0.2rem;
font-size: 1rem;
font-weight: bold;
text-transform: uppercase;
text-decoration: none;
transform: translateX(-50%);
}
.split.left .button:hover {
background-color: var(--left-button-hover-color);
border-color: var(--left-button-hover-color);
}
.split.middle .button:hover {
background-color: var(--middle-button-hover-color);
border-color: var(--middle-button-hover-color);
}
.split.right .button:hover {
background-color: var(--right-button-hover-color);
border-color: var(--right-button-hover-color);
}
.container {
position: relative;
width: 100%;
height: 100%;
background: var(--container-bg-color);
}
.split {
position: absolute;
width: 33.33%;
height: 100%;
overflow: hidden;
}
.split.left {
left: 0;
background: url('https://image.ibb.co/m56Czw/designer.jpg') center center no-repeat;
background-size: cover;
}
.split.left:before {
position: absolute;
content: "";
width: 100%;
height: 100%;
background: var(--left-bg-color);
}
.split.middle {
left: 33.333%;
display: inline-block;
background: url('https://image.ibb.co/m56Czw/designer.jpg') center center no-repeat;
background-size: cover;
}
.split.middle:before {
position: absolute;
content: "";
width: 100%;
height: 100%;
background: var(--middle-bg-color);
}
.split.right {
right: 0;
background: url('https://image.ibb.co/m3ZbRb/programmer.png') center center no-repeat;
background-size: cover;
}
.split.right:before {
position: absolute;
content: "";
width: 100%;
height: 100%;
background: var(--right-bg-color);
}
.split.left,
.split.middle,
.split.right,
.split.right:before,
.split.left:before,
.split.middle:before {
transition: var(--speed) all ease-in-out;
}
.hover-left .left {
width: var(--hover-width);
}
.hover-left .middle {
width: var(--other-width);
left: 70%;
}
.hover-left .right {
width: var(--other-width);
}
.hover-left .middle:before {
z-index: 2;
}
.hover-middle .middle {
width: var(--hover-width);
left: 15%;
}
.hover-middle .left {
width: var(--other-width);
}
.hover-middle .right {
width: var(--other-width);
}
.hover-middle .right:before {
z-index: 2;
}
.hover-right .right {
width: var(--hover-width);
}
.hover-right .middle {
width: var(--other-width);
left: 15%;
}
.hover-right .left {
width: var(--other-width);
}
.hover-right .middle:before .left:before {
z-index: 2;
}
#media(max-width: 800px) {
h1 {
font-size: 2rem;
}
.button {
width: 12rem;
}
}
#media(max-height: 700px) {
.button {
top: 70%;
}
}
<body>
<div class="container">
<div class="split left">
<h1>The Designer</h1>
Read More
</div>
<div class="split middle">
<h1>The Middle</h1>
Read More
</div>
<div class="split right">
<h1>The Programmer</h1>
Read More
</div>
</div>
<script src="js/main.js"></script>
</body>
you could try adding in your css:
..essentialy moving the middle container 33.3% to the left (where the first container ends)
.split.middle {
left: 33.3%
}
although the best way would be to use display:flex
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
You can do this entirely in CSS with Flexbox. Make the container <div> a flex container:
.container {
display: flex;
}
And the split <div>s flex items:
.split {
flex: 15 1 0;
}
15 (flex-grow): each flex item will take 15 "shares" of extra horizontal space
1 (flex-shrink): flex items will shrink evenly, each giving up 1 "share" of horizontal space
0 (flex-basis): base width of each flex item is 0 instead of being based on its content
And for the widening effect, make the hovered <div> greedy:
.split:hover {
flex-grow: 70;
}
You can avoid the extra ::before pseudo-elements with gradient backgrounds:
.split.middle {
background:
linear-gradient(var(--middle-bg-color), var(--middle-bg-color)),
url('https://image.ibb.co/m56Czw/designer.jpg') center center no-repeat;
background-size: cover;
}
This creates a background image with a gradient that fades from one semitransparent color to the same semitransparent color, and puts it on top of your JPEG background image.
Remove all the positioning code on the <div>s, and you're set.
:root {
--container-bg-color: #333;
--left-bg-color: rgba(223, 39, 39, 0.7);
--left-button-hover-color: rgba(161, 11, 11, 0.3);
--middle-bg-color: rgba(39, 217, 223, 0.7);
--middle-button-hover-color: rgba(14, 32, 196, 0.151);
--right-bg-color: rgba(43, 43, 43, 0.8);
--right-button-hover-color: rgba(92, 92, 92, 0.3);
--hover-width: 70;
--other-width: 15;
--speed: 1000ms;
}
html,
body {
padding: 0;
margin: 0;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
width: 100%;
height: 100%;
overflow-x: hidden;
}
h1 {
font-size: 3rem;
color: #fff;
position: absolute;
left: 50%;
top: 20%;
transform: translateX(-50%);
white-space: nowrap;
}
.button {
display: block;
position: absolute;
left: 50%;
top: 40%;
height: 2.5rem;
padding-top: 1.3rem;
width: 15rem;
text-align: center;
color: #fff;
border: #fff solid 0.2rem;
font-size: 1rem;
font-weight: bold;
text-transform: uppercase;
text-decoration: none;
transform: translateX(-50%);
}
.split.left .button:hover {
background-color: var(--left-button-hover-color);
border-color: var(--left-button-hover-color);
}
.split.middle .button:hover {
background-color: var(--middle-button-hover-color);
border-color: var(--middle-button-hover-color);
}
.split.right .button:hover {
background-color: var(--right-button-hover-color);
border-color: var(--right-button-hover-color);
}
.container {
position: relative;
width: 100%;
height: 100%;
background: var(--container-bg-color);
display: flex;
}
.split {
position: relative;
height: 100%;
overflow: hidden;
flex: var(--other-width) 1 0;
transition: var(--speed) all ease-in-out;
}
.split.left {
background:
linear-gradient(var(--left-bg-color), var(--left-bg-color)),
url('https://image.ibb.co/m56Czw/designer.jpg') center center no-repeat;
background-size: cover;
}
.split.middle {
background:
linear-gradient(var(--middle-bg-color), var(--middle-bg-color)),
url('https://image.ibb.co/m56Czw/designer.jpg') center center no-repeat;
background-size: cover;
}
.split.right {
background:
linear-gradient(var(--right-bg-color), var(--right-bg-color)),
url('https://image.ibb.co/m3ZbRb/programmer.png') center center no-repeat;
background-size: cover;
}
.split:hover {
flex-grow: var(--hover-width);
}
#media(max-width: 800px) {
h1 {
font-size: 2rem;
}
.button {
width: 12rem;
}
}
#media(max-height: 700px) {
.button {
top: 70%;
}
}
<body>
<div class="container">
<div class="split left">
<h1>The Designer</h1>
Read More
</div>
<div class="split middle">
<h1>The Middle</h1>
Read More
</div>
<div class="split right">
<h1>The Programmer</h1>
Read More
</div>
</div>
</body>