Menu
This is what I have so far - https://jsfiddle.net/8216Lntb/
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 */
}<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>
</html>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
1000
The . grow class needs the following two lines to create a smooth transition for width as well: transition: width 0.5s; -webkit-transition: width 0.5s; I also changed . grow:hover's height to "auto" so it displays all the content it contains.
To display div element using CSS on hover a tag: First, set the div element invisible i.e display:none;. By using the adjacent sibling selector and hover on a tag to display the div element.
Answer: Use the CSS transform property You can use the CSS transform property to increase or decrease the image size on mouse hover without affecting the surrounding elements or content.
I think that you don't need javascript for this.
html,body{
margin: 0 auto;
height: 100%;
width: 100%;
}
body {
background-color: black;
}
#growContainer{
display: table;
width:100%;
height:100%;
}
.grow{
display: table-cell;
height:100%;
width: 25%;
-webkit-transition:width 500ms;
-moz-transition:width 500ms;
transition:width 500ms;
}
#growContainer:hover .grow{
width:20%;
}
#growContainer:hover .grow:hover {
width:40%;
}<div id="growContainer">
<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>You can solve it easily using toggleClass()
Try this:
$(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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
