How to make images wider when hovering over it, and the others narrower?
1
Hey i'm trying to make a 4x1 landing page. I want the pictures to expand like this when hovering over it.:
https://codepen.io/bradtraversy/pen/dJzzdB
I have got one to expand but the other pictures will not follow after. I'm new to programming so it could easily be some rookie mistake i'm doing but i would really appreciate it if you took a look. Here is my code:
Html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Meg</title>
<link rel="stylesheet" href="masterp2.css">
</head>
<body>
<div class="container">
<div class="split left">
<div class="overlay"></div>
<button type="button" name="btnl">Mer info</button>
<h1>Grunnleggende info</h1>
</div>
<div class="split leftmiddle">
<div class="overlay"></div>
<h1>Interesser</h1>
<button type="button" name="btnlm">Mer info</button>
</div>
</div>
<div class="split rightmiddle">
<div class="overlay"></div>
<h1>Familie</h1>
<button type="button" name="btnm">Mer info</button>
</div>
</div>
<div class="split leftmiddle">
<div class="overlay"></div>
<h1>Interesser</h1>
<button type="button" name="btnlm">Mer info</button>
</div>
</div>
<div class="split right">
<div class="overlay"></div>
<h1>Oppsumering</h1>
<button type="button" name="btnr">Mer info</button>
</div>
<script type="text/javascript" src="main.js">
</script>
</body>
</html>
Css:
html, body{
margin: 0;
padding: 0;
}
button{
background: none;
color: #ffffff;
width: 150px;
height: 80px;
border: 3px solid #000000;
font-size: 18px;
border-radius: 4px;
transition: .6s;
overflow: hidden;
}
button:hover{
background: #000000;
cursor: pointer;
outline: none;
}
h1{
font-size: 4rem;
color: #fff;
position: absolute;
left: 50%;
top: 20%;
transform: translateX(-50%);
text-align: center;
z-index: 1;
}
.split.left button{
top: 50%;
position: absolute;
left: 35%;
transform: translate(12.5%, -50%);
}
.split.right button{
top: 50%;
position: absolute;
right: 35%;
transform: translate(12.5%, -50%);
}
.split.rightmiddle button{
top: 50%;
position: absolute;
right: 25%;
transform: translate(-25%, -50%);
}
.split.leftmiddle button{
top: 50%;
position: absolute;
left: 37%;
transform: translate(-25%, -50%);
}
.split{
width: 25%;
height: 100%;
position: fixed;
top: 0%;
}
.split.left{
left: 0px;
background: url('basic.png') center center no-repeat;
background-size: cover;
}
.split.left:before{
background: rgba(98, 98, 98, 0.8);
position: absolute;
width: 100%;
height: 100%;
content: ""
}
.split.right{
right: 0px;
background: url('https://image.ibb.co/m3ZbRb/programmer.png') center no-repeat;
background-size: cover;
}
.split.right:before{
background: rgba(43, 43, 43, 0.8);
position: absolute;
width: 100%;
height: 100%;
content: ""
}
.split.rightmiddle{
right: 25%;
background: url('familiebg.png') center center no-repeat;
background-size: cover;
}
.split.rightmiddle:before{
background: rgb(116, 141, 164, 0.8);
position: absolute;
width: 100%;
height: 100%;
content: "";
}
.split.leftmiddle{
left: 25%;
background: url('messi.png') center no-repeat;
background-size: cover;
}
.split.leftmiddle:before{
background: rgb(95, 87, 88, 0.8);
position: absolute;
width: 100%;
height: 100%;
content: "";
}
.split.left, .split.right, .split.leftmiddle, .split.rightmiddle, .split.left:before, .split.right:before, .split.leftmiddle:before, .split.rightmiddle:before{
transition: 1000ms all ease-in-out;
}
.hover-left .left {
width: 70%;
}
.hover-left .right {
width: 10%;
right: 0%;
}
.hover-left .rightmiddle {
width: 10%;
right: 10%;
}
.hover-left .leftmiddle {
width: 10%;
right: 20%;
}
.hover-left .right:before {
z-index: 2;
}
.hover-left .rightmiddle:before {
z-index: 2;
}
.hover-left .leftmiddle:before {
z-index: 2;
}
.hover-right .right {
width: 70%;
}
.hover-right .left {
width: 10;
}
.hover-right .leftmiddle {
width: 10;
}
.hover-right .rightmiddle {
width: 10;
}
.hover-right .left:before {
z-index: 2;}
.hover-right .leftmiddle:before {
z-index: 2;
}
.hover-right .rightmiddle:before {
z-index: 2;
}
.hover-rightmiddle .rightmiddle {
width: 70%;
}
.hover-rightmiddle .left {
width: 10%;
}
.hover-rightmiddle .right {
width: 10%;
}
.hover-rightmiddle .leftmiddle {
width: 10%;
}
.hover-rightmiddle .right:before {
z-index: 2;
}
.hover-rightmiddle .left:before {
z-index: 2;
}
.hover-rightmiddle .leftmiddle:before {
z-index: 2;
}
.hover-leftmiddle .leftmiddle {
width: 70%;
}
.hover-leftmiddle .right {
width: 10%;
}
.hover-leftmiddle .rightmiddle {
width: 10%;
}
.hover-leftmiddle .rightmiddle:before {
z-index: 2;
}
.hover-right .right:before {
z-index: 2;
}
.hover-right .left:before {
z-index: 2;
}
js:
const left = document.querySelector('.left');
const right = document.querySelector('.right');
const leftmiddle = document.querySelector('.leftmiddle');
const rightmiddle = document.querySelector('.rightmiddle');
const container = document.querySelector('.container');
left.addEventListener('mouseenter', () => {
container.classList.add('hover-left');
});
left.addEventListener('mouseleave', () => {
container.classList.remove('hover-left');
});
right.addEventListener('mouseenter', () => {
container.classList.add('hover-right');
});
right.addEventListener('mouseleave', () => {
container.classList.remove('hover-right');
});
leftmiddle.addEventListener('mouseenter', () => {
container.classList.add('hover-leftmiddle');
});
leftmiddle.addEventListener('mouseleave', () => {
container.classList.remove('hover-leftmiddle');
});
rightmiddle.addEventListener('mouseenter', () => {
container.classList.add('hover-rightmiddle');
});
rightmiddle.addEventListener('mouseleave', () => {
container.classList.remove('hover-rightmiddle');
});
Thank you :)
javascript html css
edited Nov 18 '18 at 14:24
Itay Gal
7,56552559
asked Nov 18 '18 at 14:16
SkaalsvikSkaalsvik
211
add a comment |
1
Hey i'm trying to make a 4x1 landing page. I want the pictures to expand like this when hovering over it.:
https://codepen.io/bradtraversy/pen/dJzzdB
I have got one to expand but the other pictures will not follow after. I'm new to programming so it could easily be some rookie mistake i'm doing but i would really appreciate it if you took a look. Here is my code:
Html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Meg</title>
<link rel="stylesheet" href="masterp2.css">
</head>
<body>
<div class="container">
<div class="split left">
<div class="overlay"></div>
<button type="button" name="btnl">Mer info</button>
<h1>Grunnleggende info</h1>
</div>
<div class="split leftmiddle">
<div class="overlay"></div>
<h1>Interesser</h1>
<button type="button" name="btnlm">Mer info</button>
</div>
</div>
<div class="split rightmiddle">
<div class="overlay"></div>
<h1>Familie</h1>
<button type="button" name="btnm">Mer info</button>
</div>
</div>
<div class="split leftmiddle">
<div class="overlay"></div>
<h1>Interesser</h1>
<button type="button" name="btnlm">Mer info</button>
</div>
</div>
<div class="split right">
<div class="overlay"></div>
<h1>Oppsumering</h1>
<button type="button" name="btnr">Mer info</button>
</div>
<script type="text/javascript" src="main.js">
</script>
</body>
</html>
Css:
html, body{
margin: 0;
padding: 0;
}
button{
background: none;
color: #ffffff;
width: 150px;
height: 80px;
border: 3px solid #000000;
font-size: 18px;
border-radius: 4px;
transition: .6s;
overflow: hidden;
}
button:hover{
background: #000000;
cursor: pointer;
outline: none;
}
h1{
font-size: 4rem;
color: #fff;
position: absolute;
left: 50%;
top: 20%;
transform: translateX(-50%);
text-align: center;
z-index: 1;
}
.split.left button{
top: 50%;
position: absolute;
left: 35%;
transform: translate(12.5%, -50%);
}
.split.right button{
top: 50%;
position: absolute;
right: 35%;
transform: translate(12.5%, -50%);
}
.split.rightmiddle button{
top: 50%;
position: absolute;
right: 25%;
transform: translate(-25%, -50%);
}
.split.leftmiddle button{
top: 50%;
position: absolute;
left: 37%;
transform: translate(-25%, -50%);
}
.split{
width: 25%;
height: 100%;
position: fixed;
top: 0%;
}
.split.left{
left: 0px;
background: url('basic.png') center center no-repeat;
background-size: cover;
}
.split.left:before{
background: rgba(98, 98, 98, 0.8);
position: absolute;
width: 100%;
height: 100%;
content: ""
}
.split.right{
right: 0px;
background: url('https://image.ibb.co/m3ZbRb/programmer.png') center no-repeat;
background-size: cover;
}
.split.right:before{
background: rgba(43, 43, 43, 0.8);
position: absolute;
width: 100%;
height: 100%;
content: ""
}
.split.rightmiddle{
right: 25%;
background: url('familiebg.png') center center no-repeat;
background-size: cover;
}
.split.rightmiddle:before{
background: rgb(116, 141, 164, 0.8);
position: absolute;
width: 100%;
height: 100%;
content: "";
}
.split.leftmiddle{
left: 25%;
background: url('messi.png') center no-repeat;
background-size: cover;
}
.split.leftmiddle:before{
background: rgb(95, 87, 88, 0.8);
position: absolute;
width: 100%;
height: 100%;
content: "";
}
.split.left, .split.right, .split.leftmiddle, .split.rightmiddle, .split.left:before, .split.right:before, .split.leftmiddle:before, .split.rightmiddle:before{
transition: 1000ms all ease-in-out;
}
.hover-left .left {
width: 70%;
}
.hover-left .right {
width: 10%;
right: 0%;
}
.hover-left .rightmiddle {
width: 10%;
right: 10%;
}
.hover-left .leftmiddle {
width: 10%;
right: 20%;
}
.hover-left .right:before {
z-index: 2;
}
.hover-left .rightmiddle:before {
z-index: 2;
}
.hover-left .leftmiddle:before {
z-index: 2;
}
.hover-right .right {
width: 70%;
}
.hover-right .left {
width: 10;
}
.hover-right .leftmiddle {
width: 10;
}
.hover-right .rightmiddle {
width: 10;
}
.hover-right .left:before {
z-index: 2;}
.hover-right .leftmiddle:before {
z-index: 2;
}
.hover-right .rightmiddle:before {
z-index: 2;
}
.hover-rightmiddle .rightmiddle {
width: 70%;
}
.hover-rightmiddle .left {
width: 10%;
}
.hover-rightmiddle .right {
width: 10%;
}
.hover-rightmiddle .leftmiddle {
width: 10%;
}
.hover-rightmiddle .right:before {
z-index: 2;
}
.hover-rightmiddle .left:before {
z-index: 2;
}
.hover-rightmiddle .leftmiddle:before {
z-index: 2;
}
.hover-leftmiddle .leftmiddle {
width: 70%;
}
.hover-leftmiddle .right {
width: 10%;
}
.hover-leftmiddle .rightmiddle {
width: 10%;
}
.hover-leftmiddle .rightmiddle:before {
z-index: 2;
}
.hover-right .right:before {
z-index: 2;
}
.hover-right .left:before {
z-index: 2;
}
js:
const left = document.querySelector('.left');
const right = document.querySelector('.right');
const leftmiddle = document.querySelector('.leftmiddle');
const rightmiddle = document.querySelector('.rightmiddle');
const container = document.querySelector('.container');
left.addEventListener('mouseenter', () => {
container.classList.add('hover-left');
});
left.addEventListener('mouseleave', () => {
container.classList.remove('hover-left');
});
right.addEventListener('mouseenter', () => {
container.classList.add('hover-right');
});
right.addEventListener('mouseleave', () => {
container.classList.remove('hover-right');
});
leftmiddle.addEventListener('mouseenter', () => {
container.classList.add('hover-leftmiddle');
});
leftmiddle.addEventListener('mouseleave', () => {
container.classList.remove('hover-leftmiddle');
});
rightmiddle.addEventListener('mouseenter', () => {
container.classList.add('hover-rightmiddle');
});
rightmiddle.addEventListener('mouseleave', () => {
container.classList.remove('hover-rightmiddle');
});
Thank you :)
javascript html css
edited Nov 18 '18 at 14:24
Itay Gal
7,56552559
asked Nov 18 '18 at 14:16
SkaalsvikSkaalsvik
211
@ItayGal It's not OP's code, I assume. It's the code he's copied his code from.
– connexo
Nov 18 '18 at 14:26
There's a lot going on here, my biggest tip would be to setz-indexon some stuff so it's stacked correctly.
– AnonymousSB
Nov 18 '18 at 14:34
That codepen was a tutorial from youtube so my code is affectet from it. But i tried to do as much as possible myself. But it´s very similar.
– Skaalsvik
Nov 18 '18 at 14:34
@AnonymousSB Ok, thank you!
– Skaalsvik
Nov 18 '18 at 14:36
add a comment |
1
1
1
Hey i'm trying to make a 4x1 landing page. I want the pictures to expand like this when hovering over it.:
https://codepen.io/bradtraversy/pen/dJzzdB
I have got one to expand but the other pictures will not follow after. I'm new to programming so it could easily be some rookie mistake i'm doing but i would really appreciate it if you took a look. Here is my code:
Html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Meg</title>
<link rel="stylesheet" href="masterp2.css">
</head>
<body>
<div class="container">
<div class="split left">
<div class="overlay"></div>
<button type="button" name="btnl">Mer info</button>
<h1>Grunnleggende info</h1>
</div>
<div class="split leftmiddle">
<div class="overlay"></div>
<h1>Interesser</h1>
<button type="button" name="btnlm">Mer info</button>
</div>
</div>
<div class="split rightmiddle">
<div class="overlay"></div>
<h1>Familie</h1>
<button type="button" name="btnm">Mer info</button>
</div>
</div>
<div class="split leftmiddle">
<div class="overlay"></div>
<h1>Interesser</h1>
<button type="button" name="btnlm">Mer info</button>
</div>
</div>
<div class="split right">
<div class="overlay"></div>
<h1>Oppsumering</h1>
<button type="button" name="btnr">Mer info</button>
</div>
<script type="text/javascript" src="main.js">
</script>
</body>
</html>
Css:
html, body{
margin: 0;
padding: 0;
}
button{
background: none;
color: #ffffff;
width: 150px;
height: 80px;
border: 3px solid #000000;
font-size: 18px;
border-radius: 4px;
transition: .6s;
overflow: hidden;
}
button:hover{
background: #000000;
cursor: pointer;
outline: none;
}
h1{
font-size: 4rem;
color: #fff;
position: absolute;
left: 50%;
top: 20%;
transform: translateX(-50%);
text-align: center;
z-index: 1;
}
.split.left button{
top: 50%;
position: absolute;
left: 35%;
transform: translate(12.5%, -50%);
}
.split.right button{
top: 50%;
position: absolute;
right: 35%;
transform: translate(12.5%, -50%);
}
.split.rightmiddle button{
top: 50%;
position: absolute;
right: 25%;
transform: translate(-25%, -50%);
}
.split.leftmiddle button{
top: 50%;
position: absolute;
left: 37%;
transform: translate(-25%, -50%);
}
.split{
width: 25%;
height: 100%;
position: fixed;
top: 0%;
}
.split.left{
left: 0px;
background: url('basic.png') center center no-repeat;
background-size: cover;
}
.split.left:before{
background: rgba(98, 98, 98, 0.8);
position: absolute;
width: 100%;
height: 100%;
content: ""
}
.split.right{
right: 0px;
background: url('https://image.ibb.co/m3ZbRb/programmer.png') center no-repeat;
background-size: cover;
}
.split.right:before{
background: rgba(43, 43, 43, 0.8);
position: absolute;
width: 100%;
height: 100%;
content: ""
}
.split.rightmiddle{
right: 25%;
background: url('familiebg.png') center center no-repeat;
background-size: cover;
}
.split.rightmiddle:before{
background: rgb(116, 141, 164, 0.8);
position: absolute;
width: 100%;
height: 100%;
content: "";
}
.split.leftmiddle{
left: 25%;
background: url('messi.png') center no-repeat;
background-size: cover;
}
.split.leftmiddle:before{
background: rgb(95, 87, 88, 0.8);
position: absolute;
width: 100%;
height: 100%;
content: "";
}
.split.left, .split.right, .split.leftmiddle, .split.rightmiddle, .split.left:before, .split.right:before, .split.leftmiddle:before, .split.rightmiddle:before{
transition: 1000ms all ease-in-out;
}
.hover-left .left {
width: 70%;
}
.hover-left .right {
width: 10%;
right: 0%;
}
.hover-left .rightmiddle {
width: 10%;
right: 10%;
}
.hover-left .leftmiddle {
width: 10%;
right: 20%;
}
.hover-left .right:before {
z-index: 2;
}
.hover-left .rightmiddle:before {
z-index: 2;
}
.hover-left .leftmiddle:before {
z-index: 2;
}
.hover-right .right {
width: 70%;
}
.hover-right .left {
width: 10;
}
.hover-right .leftmiddle {
width: 10;
}
.hover-right .rightmiddle {
width: 10;
}
.hover-right .left:before {
z-index: 2;}
.hover-right .leftmiddle:before {
z-index: 2;
}
.hover-right .rightmiddle:before {
z-index: 2;
}
.hover-rightmiddle .rightmiddle {
width: 70%;
}
.hover-rightmiddle .left {
width: 10%;
}
.hover-rightmiddle .right {
width: 10%;
}
.hover-rightmiddle .leftmiddle {
width: 10%;
}
.hover-rightmiddle .right:before {
z-index: 2;
}
.hover-rightmiddle .left:before {
z-index: 2;
}
.hover-rightmiddle .leftmiddle:before {
z-index: 2;
}
.hover-leftmiddle .leftmiddle {
width: 70%;
}
.hover-leftmiddle .right {
width: 10%;
}
.hover-leftmiddle .rightmiddle {
width: 10%;
}
.hover-leftmiddle .rightmiddle:before {
z-index: 2;
}
.hover-right .right:before {
z-index: 2;
}
.hover-right .left:before {
z-index: 2;
}
js:
const left = document.querySelector('.left');
const right = document.querySelector('.right');
const leftmiddle = document.querySelector('.leftmiddle');
const rightmiddle = document.querySelector('.rightmiddle');
const container = document.querySelector('.container');
left.addEventListener('mouseenter', () => {
container.classList.add('hover-left');
});
left.addEventListener('mouseleave', () => {
container.classList.remove('hover-left');
});
right.addEventListener('mouseenter', () => {
container.classList.add('hover-right');
});
right.addEventListener('mouseleave', () => {
container.classList.remove('hover-right');
});
leftmiddle.addEventListener('mouseenter', () => {
container.classList.add('hover-leftmiddle');
});
leftmiddle.addEventListener('mouseleave', () => {
container.classList.remove('hover-leftmiddle');
});
rightmiddle.addEventListener('mouseenter', () => {
container.classList.add('hover-rightmiddle');
});
rightmiddle.addEventListener('mouseleave', () => {
container.classList.remove('hover-rightmiddle');
});
Thank you :)
javascript html css
edited Nov 18 '18 at 14:24
Itay Gal
7,56552559
asked Nov 18 '18 at 14:16
SkaalsvikSkaalsvik
211
Hey i'm trying to make a 4x1 landing page. I want the pictures to expand like this when hovering over it.:
https://codepen.io/bradtraversy/pen/dJzzdB
I have got one to expand but the other pictures will not follow after. I'm new to programming so it could easily be some rookie mistake i'm doing but i would really appreciate it if you took a look. Here is my code:
Html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Meg</title>
<link rel="stylesheet" href="masterp2.css">
</head>
<body>
<div class="container">
<div class="split left">
<div class="overlay"></div>
<button type="button" name="btnl">Mer info</button>
<h1>Grunnleggende info</h1>
</div>
<div class="split leftmiddle">
<div class="overlay"></div>
<h1>Interesser</h1>
<button type="button" name="btnlm">Mer info</button>
</div>
</div>
<div class="split rightmiddle">
<div class="overlay"></div>
<h1>Familie</h1>
<button type="button" name="btnm">Mer info</button>
</div>
</div>
<div class="split leftmiddle">
<div class="overlay"></div>
<h1>Interesser</h1>
<button type="button" name="btnlm">Mer info</button>
</div>
</div>
<div class="split right">
<div class="overlay"></div>
<h1>Oppsumering</h1>
<button type="button" name="btnr">Mer info</button>
</div>
<script type="text/javascript" src="main.js">
</script>
</body>
</html>
Css:
html, body{
margin: 0;
padding: 0;
}
button{
background: none;
color: #ffffff;
width: 150px;
height: 80px;
border: 3px solid #000000;
font-size: 18px;
border-radius: 4px;
transition: .6s;
overflow: hidden;
}
button:hover{
background: #000000;
cursor: pointer;
outline: none;
}
h1{
font-size: 4rem;
color: #fff;
position: absolute;
left: 50%;
top: 20%;
transform: translateX(-50%);
text-align: center;
z-index: 1;
}
.split.left button{
top: 50%;
position: absolute;
left: 35%;
transform: translate(12.5%, -50%);
}
.split.right button{
top: 50%;
position: absolute;
right: 35%;
transform: translate(12.5%, -50%);
}
.split.rightmiddle button{
top: 50%;
position: absolute;
right: 25%;
transform: translate(-25%, -50%);
}
.split.leftmiddle button{
top: 50%;
position: absolute;
left: 37%;
transform: translate(-25%, -50%);
}
.split{
width: 25%;
height: 100%;
position: fixed;
top: 0%;
}
.split.left{
left: 0px;
background: url('basic.png') center center no-repeat;
background-size: cover;
}
.split.left:before{
background: rgba(98, 98, 98, 0.8);
position: absolute;
width: 100%;
height: 100%;
content: ""
}
.split.right{
right: 0px;
background: url('https://image.ibb.co/m3ZbRb/programmer.png') center no-repeat;
background-size: cover;
}
.split.right:before{
background: rgba(43, 43, 43, 0.8);
position: absolute;
width: 100%;
height: 100%;
content: ""
}
.split.rightmiddle{
right: 25%;
background: url('familiebg.png') center center no-repeat;
background-size: cover;
}
.split.rightmiddle:before{
background: rgb(116, 141, 164, 0.8);
position: absolute;
width: 100%;
height: 100%;
content: "";
}
.split.leftmiddle{
left: 25%;
background: url('messi.png') center no-repeat;
background-size: cover;
}
.split.leftmiddle:before{
background: rgb(95, 87, 88, 0.8);
position: absolute;
width: 100%;
height: 100%;
content: "";
}
.split.left, .split.right, .split.leftmiddle, .split.rightmiddle, .split.left:before, .split.right:before, .split.leftmiddle:before, .split.rightmiddle:before{
transition: 1000ms all ease-in-out;
}
.hover-left .left {
width: 70%;
}
.hover-left .right {
width: 10%;
right: 0%;
}
.hover-left .rightmiddle {
width: 10%;
right: 10%;
}
.hover-left .leftmiddle {
width: 10%;
right: 20%;
}
.hover-left .right:before {
z-index: 2;
}
.hover-left .rightmiddle:before {
z-index: 2;
}
.hover-left .leftmiddle:before {
z-index: 2;
}
.hover-right .right {
width: 70%;
}
.hover-right .left {
width: 10;
}
.hover-right .leftmiddle {
width: 10;
}
.hover-right .rightmiddle {
width: 10;
}
.hover-right .left:before {
z-index: 2;}
.hover-right .leftmiddle:before {
z-index: 2;
}
.hover-right .rightmiddle:before {
z-index: 2;
}
.hover-rightmiddle .rightmiddle {
width: 70%;
}
.hover-rightmiddle .left {
width: 10%;
}
.hover-rightmiddle .right {
width: 10%;
}
.hover-rightmiddle .leftmiddle {
width: 10%;
}
.hover-rightmiddle .right:before {
z-index: 2;
}
.hover-rightmiddle .left:before {
z-index: 2;
}
.hover-rightmiddle .leftmiddle:before {
z-index: 2;
}
.hover-leftmiddle .leftmiddle {
width: 70%;
}
.hover-leftmiddle .right {
width: 10%;
}
.hover-leftmiddle .rightmiddle {
width: 10%;
}
.hover-leftmiddle .rightmiddle:before {
z-index: 2;
}
.hover-right .right:before {
z-index: 2;
}
.hover-right .left:before {
z-index: 2;
}
js:
const left = document.querySelector('.left');
const right = document.querySelector('.right');
const leftmiddle = document.querySelector('.leftmiddle');
const rightmiddle = document.querySelector('.rightmiddle');
const container = document.querySelector('.container');
left.addEventListener('mouseenter', () => {
container.classList.add('hover-left');
});
left.addEventListener('mouseleave', () => {
container.classList.remove('hover-left');
});
right.addEventListener('mouseenter', () => {
container.classList.add('hover-right');
});
right.addEventListener('mouseleave', () => {
container.classList.remove('hover-right');
});
leftmiddle.addEventListener('mouseenter', () => {
container.classList.add('hover-leftmiddle');
});
leftmiddle.addEventListener('mouseleave', () => {
container.classList.remove('hover-leftmiddle');
});
rightmiddle.addEventListener('mouseenter', () => {
container.classList.add('hover-rightmiddle');
});
rightmiddle.addEventListener('mouseleave', () => {
container.classList.remove('hover-rightmiddle');
});
Thank you :)
javascript html css
javascript html css
edited Nov 18 '18 at 14:24
Itay Gal
7,56552559
asked Nov 18 '18 at 14:16
SkaalsvikSkaalsvik
211
edited Nov 18 '18 at 14:24
Itay Gal
7,56552559
asked Nov 18 '18 at 14:16
SkaalsvikSkaalsvik
211
edited Nov 18 '18 at 14:24
Itay Gal
7,56552559
edited Nov 18 '18 at 14:24
Itay Gal
7,56552559
edited Nov 18 '18 at 14:24
Itay Gal
7,56552559
7,56552559
asked Nov 18 '18 at 14:16
SkaalsvikSkaalsvik
211
asked Nov 18 '18 at 14:16
SkaalsvikSkaalsvik
211
asked Nov 18 '18 at 14:16
SkaalsvikSkaalsvik
211
211
@ItayGal It's not OP's code, I assume. It's the code he's copied his code from.
– connexo
Nov 18 '18 at 14:26
There's a lot going on here, my biggest tip would be to setz-indexon some stuff so it's stacked correctly.
– AnonymousSB
Nov 18 '18 at 14:34
That codepen was a tutorial from youtube so my code is affectet from it. But i tried to do as much as possible myself. But it´s very similar.
– Skaalsvik
Nov 18 '18 at 14:34
@AnonymousSB Ok, thank you!
– Skaalsvik
Nov 18 '18 at 14:36
add a comment |
@ItayGal It's not OP's code, I assume. It's the code he's copied his code from.
– connexo
Nov 18 '18 at 14:26
There's a lot going on here, my biggest tip would be to setz-indexon some stuff so it's stacked correctly.
– AnonymousSB
Nov 18 '18 at 14:34
That codepen was a tutorial from youtube so my code is affectet from it. But i tried to do as much as possible myself. But it´s very similar.
– Skaalsvik
Nov 18 '18 at 14:34
@AnonymousSB Ok, thank you!
– Skaalsvik
Nov 18 '18 at 14:36
@ItayGal It's not OP's code, I assume. It's the code he's copied his code from.
– connexo
Nov 18 '18 at 14:26
@ItayGal It's not OP's code, I assume. It's the code he's copied his code from.
– connexo
Nov 18 '18 at 14:26
There's a lot going on here, my biggest tip would be to set
z-index on some stuff so it's stacked correctly.– AnonymousSB
Nov 18 '18 at 14:34
There's a lot going on here, my biggest tip would be to set
z-index on some stuff so it's stacked correctly.– AnonymousSB
Nov 18 '18 at 14:34
That codepen was a tutorial from youtube so my code is affectet from it. But i tried to do as much as possible myself. But it´s very similar.
– Skaalsvik
Nov 18 '18 at 14:34
That codepen was a tutorial from youtube so my code is affectet from it. But i tried to do as much as possible myself. But it´s very similar.
– Skaalsvik
Nov 18 '18 at 14:34
@AnonymousSB Ok, thank you!
– Skaalsvik
Nov 18 '18 at 14:36
@AnonymousSB Ok, thank you!
– Skaalsvik
Nov 18 '18 at 14:36
add a comment |
1 Answer
1
active
oldest
votes
1
There's a lot going on in the copy/paste sample that you've edited. Perhaps taking a simpler approach will help you achieve what you're looking for. I've written up a simple starter solution that perhaps can get you started a bit easier than that tutorial hosted on codepen.
html, body {
padding:0;
margin:0;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
width: 100%;
height: 100%;
overflow-x: hidden;
}
.wrapper {
display: flex;
}
.slide {
display: flex;
flex: 1;
height: 100vh;
align-items: center;
justify-content: center;
transition: flex 1s;
}
.slide:hover {
flex: 4
}
.slide:nth-child(1) { background-color: lightcoral }
.slide:nth-child(2) { background-color: lemonchiffon }
.slide:nth-child(3) { background-color: lavender}
.slide:nth-child(4) { background-color: pink}<div class="wrapper">
<section class="slide">
<p>The Doggy</p>
</section>
<section class="slide">
<p>The Kitten</p>
</section>
<section class="slide">
<p>The Mouse</p>
</section>
<section class="slide">
<p>The Doe</p>
</section>
</div>answered Nov 18 '18 at 15:06
AnonymousSBAnonymousSB
2,184221
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53361842%2fhow-to-make-images-wider-when-hovering-over-it-and-the-others-narrower%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
There's a lot going on in the copy/paste sample that you've edited. Perhaps taking a simpler approach will help you achieve what you're looking for. I've written up a simple starter solution that perhaps can get you started a bit easier than that tutorial hosted on codepen.
html, body {
padding:0;
margin:0;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
width: 100%;
height: 100%;
overflow-x: hidden;
}
.wrapper {
display: flex;
}
.slide {
display: flex;
flex: 1;
height: 100vh;
align-items: center;
justify-content: center;
transition: flex 1s;
}
.slide:hover {
flex: 4
}
.slide:nth-child(1) { background-color: lightcoral }
.slide:nth-child(2) { background-color: lemonchiffon }
.slide:nth-child(3) { background-color: lavender}
.slide:nth-child(4) { background-color: pink}<div class="wrapper">
<section class="slide">
<p>The Doggy</p>
</section>
<section class="slide">
<p>The Kitten</p>
</section>
<section class="slide">
<p>The Mouse</p>
</section>
<section class="slide">
<p>The Doe</p>
</section>
</div>answered Nov 18 '18 at 15:06
AnonymousSBAnonymousSB
2,184221
add a comment |
1
There's a lot going on in the copy/paste sample that you've edited. Perhaps taking a simpler approach will help you achieve what you're looking for. I've written up a simple starter solution that perhaps can get you started a bit easier than that tutorial hosted on codepen.
html, body {
padding:0;
margin:0;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
width: 100%;
height: 100%;
overflow-x: hidden;
}
.wrapper {
display: flex;
}
.slide {
display: flex;
flex: 1;
height: 100vh;
align-items: center;
justify-content: center;
transition: flex 1s;
}
.slide:hover {
flex: 4
}
.slide:nth-child(1) { background-color: lightcoral }
.slide:nth-child(2) { background-color: lemonchiffon }
.slide:nth-child(3) { background-color: lavender}
.slide:nth-child(4) { background-color: pink}<div class="wrapper">
<section class="slide">
<p>The Doggy</p>
</section>
<section class="slide">
<p>The Kitten</p>
</section>
<section class="slide">
<p>The Mouse</p>
</section>
<section class="slide">
<p>The Doe</p>
</section>
</div>answered Nov 18 '18 at 15:06
AnonymousSBAnonymousSB
2,184221
add a comment |
1
1
1
There's a lot going on in the copy/paste sample that you've edited. Perhaps taking a simpler approach will help you achieve what you're looking for. I've written up a simple starter solution that perhaps can get you started a bit easier than that tutorial hosted on codepen.
html, body {
padding:0;
margin:0;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
width: 100%;
height: 100%;
overflow-x: hidden;
}
.wrapper {
display: flex;
}
.slide {
display: flex;
flex: 1;
height: 100vh;
align-items: center;
justify-content: center;
transition: flex 1s;
}
.slide:hover {
flex: 4
}
.slide:nth-child(1) { background-color: lightcoral }
.slide:nth-child(2) { background-color: lemonchiffon }
.slide:nth-child(3) { background-color: lavender}
.slide:nth-child(4) { background-color: pink}<div class="wrapper">
<section class="slide">
<p>The Doggy</p>
</section>
<section class="slide">
<p>The Kitten</p>
</section>
<section class="slide">
<p>The Mouse</p>
</section>
<section class="slide">
<p>The Doe</p>
</section>
</div>answered Nov 18 '18 at 15:06
AnonymousSBAnonymousSB
2,184221
There's a lot going on in the copy/paste sample that you've edited. Perhaps taking a simpler approach will help you achieve what you're looking for. I've written up a simple starter solution that perhaps can get you started a bit easier than that tutorial hosted on codepen.
html, body {
padding:0;
margin:0;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
width: 100%;
height: 100%;
overflow-x: hidden;
}
.wrapper {
display: flex;
}
.slide {
display: flex;
flex: 1;
height: 100vh;
align-items: center;
justify-content: center;
transition: flex 1s;
}
.slide:hover {
flex: 4
}
.slide:nth-child(1) { background-color: lightcoral }
.slide:nth-child(2) { background-color: lemonchiffon }
.slide:nth-child(3) { background-color: lavender}
.slide:nth-child(4) { background-color: pink}<div class="wrapper">
<section class="slide">
<p>The Doggy</p>
</section>
<section class="slide">
<p>The Kitten</p>
</section>
<section class="slide">
<p>The Mouse</p>
</section>
<section class="slide">
<p>The Doe</p>
</section>
</div>html, body {
padding:0;
margin:0;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
width: 100%;
height: 100%;
overflow-x: hidden;
}
.wrapper {
display: flex;
}
.slide {
display: flex;
flex: 1;
height: 100vh;
align-items: center;
justify-content: center;
transition: flex 1s;
}
.slide:hover {
flex: 4
}
.slide:nth-child(1) { background-color: lightcoral }
.slide:nth-child(2) { background-color: lemonchiffon }
.slide:nth-child(3) { background-color: lavender}
.slide:nth-child(4) { background-color: pink}<div class="wrapper">
<section class="slide">
<p>The Doggy</p>
</section>
<section class="slide">
<p>The Kitten</p>
</section>
<section class="slide">
<p>The Mouse</p>
</section>
<section class="slide">
<p>The Doe</p>
</section>
</div>html, body {
padding:0;
margin:0;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
width: 100%;
height: 100%;
overflow-x: hidden;
}
.wrapper {
display: flex;
}
.slide {
display: flex;
flex: 1;
height: 100vh;
align-items: center;
justify-content: center;
transition: flex 1s;
}
.slide:hover {
flex: 4
}
.slide:nth-child(1) { background-color: lightcoral }
.slide:nth-child(2) { background-color: lemonchiffon }
.slide:nth-child(3) { background-color: lavender}
.slide:nth-child(4) { background-color: pink}<div class="wrapper">
<section class="slide">
<p>The Doggy</p>
</section>
<section class="slide">
<p>The Kitten</p>
</section>
<section class="slide">
<p>The Mouse</p>
</section>
<section class="slide">
<p>The Doe</p>
</section>
</div>answered Nov 18 '18 at 15:06
AnonymousSBAnonymousSB
2,184221
answered Nov 18 '18 at 15:06
AnonymousSBAnonymousSB
2,184221
answered Nov 18 '18 at 15:06
AnonymousSBAnonymousSB
2,184221
answered Nov 18 '18 at 15:06
AnonymousSBAnonymousSB
2,184221
2,184221
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53361842%2fhow-to-make-images-wider-when-hovering-over-it-and-the-others-narrower%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
@ItayGal It's not OP's code, I assume. It's the code he's copied his code from.
– connexo
Nov 18 '18 at 14:26
There's a lot going on here, my biggest tip would be to set
z-indexon some stuff so it's stacked correctly.– AnonymousSB
Nov 18 '18 at 14:34
That codepen was a tutorial from youtube so my code is affectet from it. But i tried to do as much as possible myself. But it´s very similar.
– Skaalsvik
Nov 18 '18 at 14:34
@AnonymousSB Ok, thank you!
– Skaalsvik
Nov 18 '18 at 14:36