himynameis himynameis - 2 months ago 27
CSS Question

Hover over DIV to expand width

This is what I have so far - https://jsfiddle.net/8216Lntb/

<html>
<head>
<title>HOMEPAGE</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css" media="screen,projection" />
</head>
<body>
<div class="grow" style="background-color:#2A75A9;"></div>
<div class="grow" style="background-color:#274257;"></div>
<div class="grow" style="background-color:#644436;"></div>
<div class="grow" style="background-color:#8F6048;"></div>
<!--<div class="grow" style="background-color:red;"></div>-->
</body>




CSS

body {
background-color: black;
margin: 0 auto;
height: 100%;
width: 100%;
}

.grow {
height: 100vw; /* Origional height */
width: 25%; /* Origional width */
margin: 0px 0 0px 0; /* Just for presentation (Not required) */
float: left; /* Just for presentation (Not required) */
position: relative; /* Just for presentation (Not required) */
transition:height 0.5s; /* Animation time */
-webkit-transition:height 0.5s; /* For Safari */
}

.grow:hover {
width: 25%; /* This is the height on hover */
}


What I am trying to achieve is this https://artsandculture.withgoogle.com/en-us/national-parks-service/parks

Every time I hover over a div it will remove one off the page because it's gone over 100%.

My question is how do I do it so that when one div expands the others just become smaller so they all stay on one page

Answer

Try this, You can solve it easily using toggleClass()

$(function(){
    $('div').hover(function(){
    $(this).toggleClass('expand');
    $('div').not(this).toggleClass('shrink');
  });
});
body {
    background-color: black;
    margin: 0 auto;
    height: 100%;
    width: 100%;
}
.grow {
    height: 100vw; /* Origional height */
    width: 25%; /* Origional width */
    margin: 0px 0 0px 0; /* Just for presentation (Not required) */
    float: left; /* Just for presentation (Not required) */
    position: relative; /* Just for presentation (Not required) */
    -transition-duration:0.5s;
    -webkit-transition-duration:0.5s;
    -moz-transition-duration:0.5s;
}

.expand{
    width: 40%;
}
.shrink{
    width: 20%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="grow" style="background-color:#2A75A9;"></div>
<div class="grow" style="background-color:#274257;"></div>
<div class="grow" style="background-color:#644436;"></div>
<div class="grow" style="background-color:#8F6048;"></div>

Comments