so the title sort of explains it but i mocked up some images in ms paint for reference. when it launches the web page looks sort of like this:
when you hover over the top left the top left square expands and the other three shrink:
or when you hover over the bottom right:
I have tried it with jquery and CSS, jquery works to an extent but while the divs are transitioning they all stack up underneath eachother.
this is my HTML:
<body>
<div id="screenfiller">
<div id="1">
</div>
<div id="2">
</div>
<div id="3">
</div>
<div id="4">
</div>
</div>
CSS:
body{
max-height: 100%;
max-width: 100%;
}
#screenfiller {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
max-height: 100%;
max-width: 100%;
}
#1{
width: 50%;
float: left;
position: static;
background-size: cover; /* <------ */
background-repeat: no-repeat;
background-position: center center;
display: flex;
}
#2{
width: 50%;
background-color: yellow;
float: left;
position: static;
background-size: cover; /* <------ */
background-repeat: no-repeat;
background-position: center center;
display: flex;
}
#3{
width: 50%;
background-color: red;
float: left;
position: static;
background-size: cover; /* <------ */
background-repeat: no-repeat;
background-position: center center;
display: flex;
}
#4{
width: 50%;
background-color: green;
float: left;
position: static;
background-size: cover; /* <------ */
background-repeat: no-repeat;
background-position: center center;
display: flex;
}
my JQuery:
$('#1').mouseenter(function(){
$('#tech').animate({ height: "55%", width: "55%"}, 500 );
$('#qual').animate({ height: "45%", width: "55%"}, 500 );
$('#work').animate({ height: "55%", width: "45%"}, 500 );
$('#pers').animate({ height: "45%", width: "45%"}, 500 );
});
$('#2').mouseenter(function(){
$('#work').animate({ height: "55%", width: "55%"}, 500 );
$('#pers').animate({ height: "45%", width: "55%"}, 500 );
$('#tech').animate({ height: "55%", width: "45%"}, 500 );
$('#qual').animate({ height: "45%", width: "45%"}, 500 );
});
$('#3').mouseenter(function(){
$('#qual').animate({ height: "55%", width: "55%"}, 500 );
$('#tech').animate({ height: "45%", width: "55%"}, 500 );
$('#pers').animate({ height: "55%", width: "45%"}, 500 );
$('#work').animate({ height: "45%", width: "45%"}, 500 );
});
$('#4').mouseenter(function(){
$('#pers').animate({ height: "55%", width: "55%"}, 500 );
$('#work').animate({ height: "45%", width: "55%"}, 500 );
$('#qual').animate({ height: "55%", width: "45%"}, 500 );
$('#tech').animate({ height: "45%", width: "45%"}, 500 );
});
Aucun commentaire:
Enregistrer un commentaire