Is there a way to divide my screen into four equal sections that expand when I hover over them?

Explaining the concept through visuals, I created mock-up images in MS Paint for reference. When the web page launches, it resembles this: https://i.sstatic.net/wzjDR.png

Upon hovering over the top left corner, the square expands while the other three shrink: https://i.sstatic.net/9l7dD.png

Similarly, when hovering over the bottom right:

https://i.sstatic.net/AhGoJ.png

Experimenting with both jQuery and CSS, I found that jQuery works to some extent but causes all divs to stack underneath each other during transition.

This is the HTML code snippet:

<body>
<div id="screenfiller">
    <div id="1">

    </div>
    <div id="2">

    </div>
    <div id="3">

    </div>
    <div id="4">

    </div>    
</div>

CSS styling used:

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;
}

JQuery implementation:

$('#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 );
});

UPDATE:

Here's how I envision the live version to look like:

Initial appearance of the webpage:

https://i.sstatic.net/AtEv5.png

Hover effect on the top left square:

https://i.sstatic.net/c0J5n.png

Triggering hover action on the bottom right square:

https://i.sstatic.net/IweVC.jpg

jqueryhtmlcssweb

Answer №1

Check out this functional demo:

$('#a1').hover(function(){
    $('#a1').animate({ height: "55%", width: "55%"}, 500 );
    $('#a2').animate({ height: "55%", width: "45%"}, 500 );
    $('#a3').animate({ height: "45%", width: "55%"}, 500 );
    $('#a4').animate({ height: "45%", width: "45%"}, 500 );
});
$('#a2').hover(function(){
    $('#a1').animate({ height: "55%", width: "45%"}, 500 );
    $('#a2').animate({ height: "55%", width: "55%"}, 500 );
    $('#a3').animate({ height: "45%", width: "45%"}, 500 );
    $('#a4').animate({ height: "45%", width: "55%"}, 500 );
});
$('#a3').hover(function(){
    $('#a1').animate({ height: "45%", width: "55%"}, 500 );
    $('#a2').animate({ height: "45%", width: "45%"}, 500 );
    $('#a3').animate({ height: "55%", width: "55%"}, 500 );
    $('#a4').animate({ height: "55%", width: "45%"}, 500 );
});
$('#a4').hover(function(){
    $('#a1').animate({ height: "45%", width: "45%"}, 500 );
    $('#a2').animate({ height: "45%", width: "55%"}, 500 );
    $('#a3').animate({ height: "55%", width: "45%"}, 500 );
    $('#a4').animate({ height: "55%", width: "55%"}, 500 );
});
html, body {
padding: 0;
margin:0;
}
#screenfiller {
position: relative;
top: 0; right: 0; bottom: 0; left: 0;
height: 100vh;
width: 100vw;
}

#a1{
  width: 50%;
  height: 50%;
  background: red;
  position: absolute;
  left: 0;
  top: 0;
}

#a2{
  width: 50%;
  height: 50%;
  background: green;
  position: absolute;
  right: 0;
  top: 0;
}

#a3{
  width: 50%;
  height: 50%;
  background: yellow;
  position: absolute;
  left: 0;
  bottom: 0;
}

#a4{
  width: 50%;
  height: 50%;
  background: blue;
  position: absolute;
  right: 0;
  bottom: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="screenfiller">
    <div id="a1">

    </div>
    <div id="a2">

    </div>
    <div id="a3">

    </div>
    <div id="a4">

    </div>    
</div>

You have the freedom to customize it as needed.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way for me to access the response from the PHP file I'm calling with Ajax?

I am just starting to explore ajax and jquery, and I recently found a code online that I'm tweaking for my own use. However, I am struggling with how to handle responses from PHP in this context. The current setup involves ajax POSTing to a php page ...

phpjavascriptjqueryhtmlajax

Intersection of content in panel-body using bootstrap tab pills

Can someone help me solve a major issue? I need the content of each tab to overlap as if they are unaware of each other. Currently, my code is saved in this fiddle: https://jsfiddle.net/axq882de/1/. When I click on different tabs, the contents should remai ...

jqueryhtmlcsstwitter-bootstrap-3

Pressing a Bootstrap button leads to scrolling in the user interface

I implemented a Bootstrap Card to showcase the red lamp. Upon pressing the start button, the red lamp transitions to green and the start button vanishes. After a brief moment, the green light switches back to red and a "brakes" button emerges, prompting us ...

javascriptjquerytwitter-bootstrapbootstrap-4

Struggling to incorporate a radio button into my table design, despite attempting various CSS adjustments without success

After adding a radio button element to my table, I noticed it was not appearing on the page. To troubleshoot, I created a snippet with the same code and found that the radio button did show up there. Additionally, when I added a background color to see whe ...

htmlcssbootstrap-4radio-button

Using PHP and Ajax to transmit floating-point data and receive a response

Ajax Script <script> function calculateDip(str) { if (str == "") { document.getElementById("result").innerHTML = ""; return; } else { var number = parseFloat(str); var tank = document.getElementById("pumps"+count ...

javascriptphpjqueryajax

Tips for incorporating strikethrough into a drop-down select box in a jquery datatable and implementing filtering based on it

In this scenario, I am currently utilizing a jQuery Datatable with strikethrough text. My aim is to make the filterable dropdown display the same strikethrough text; however, it is not displaying properly at the moment. Below is my jQuery datatable setup: ...

javascriptjquery

Locate the class and execute the function on the existing page

Stepping outside of my comfort zone here and I'm pretty sure what I've come up with so far is totally off. Ajax is new to me and Google isn't making things any clearer, so I was hoping someone more knowledgeable could assist! Basically, I w ...

javascriptjqueryajax

Is there a way to automatically update the latest ID in one tab or window when inserting records in a separate tab or window?

I currently have a setup where one file, list-display.php, displays the latest ID. <div class="result"></div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> <script> function refresh ...

phpjquerymysqlajaxcsv

Navigating to the end of a list using Angular's scroll feature

I'm trying to figure out how to automatically scroll to the bottom of a list in TypeScript, can someone help me with this? Here's a similar example I found that uses jQuery (I specifically need it in TypeScript): Scroll to bottom of list wit ...

htmlangulartypescript

Arrange a stationary child in relation to the grandparent element

I created a small window within a browser window, containing an even smaller window with auto-scrolling text. However, I need some text in the smaller window to remain static and not scroll. Therefore, I used position_fixed which is absolutely related to ...

htmlcsspositioncss-position

React Fixed Footer Implementation against My Preferences

Here's an issue that I'm facing: https://i.stack.imgur.com/gtQqm.png The footer on my webpage is normally displayed at the bottom of the page. However, when the user performs certain actions that extend the size of the page: https://i.stack.im ...

htmlcssreactjsfooterfixed

Troubleshooting: JQuery .ajax() success function triggers consistently, disregarding server error codes

Currently, I am facing an issue with a form that is serialized by JQuery and then sent via .ajax() to a specific URL. The main issue is that the 'success:' function is triggered every time, regardless of error codes received from the server. Sur ...

jqueryajax

The canvas element on a simple HTML webpage is constantly set to a size of 300x150

In an attempt to simplify my problem, I have created a basic HTML document with a <canvas> element: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> body { border: 1px solid #ff5500; ...

javascripthtmlcsscanvas

Unable to utilize jQuery's .append(data) function due to the need to use .val(append(data)) instead

I have been attempting to utilize JQuery .append(data) on success in order to change the value of an input to the appended data like this: .val(append(data)), but it doesn't seem to be working. Surprisingly, I can successfully change the value to a st ...

javascriptjqueryajax

I am looking to eliminate any special characters from a designated section of a string using Javascript

I have a string that looks like this: var myString = '{"key1":"value1", "key2":"value2", "key3":"value3"}'; My objective is to remove double quotes and other special characters only from value3. Sometimes the string may look like: var myStrin ...

javascriptjqueryajaxjsonstring

Changing the Color Scheme of Twitter BootstrapRevamping the Color Palette

I am interested in updating the color scheme of a website that I modeled after this example: http://getbootstrap.com/examples/navbar/ So far, I have successfully changed the background color of the entire page using: body{background-color:#XXXXXX} Howev ...

htmlcsstwitter-bootstrap

How to select specific elements with jQuery nth-child selector without skipping any

As a newcomer to jquery, I may not be able to grasp more advanced concepts right away. However, here's my issue: when attempting to select the nth-child(1), it correctly chooses the first item (I realize I could use first child, but I prefer not to). ...

jqueryhtmlcss-selectors

Form in HTML with Automatic Multiplication Functionality in pure JavaScript

I'm struggling with integrating a simplified HTML form with JavaScript to dynamically adjust and multiply the entered amount by 100 before sending it via the GET method to a specific endpoint. Below is the HTML form: <body> <form method= ...

javascripthtmlforms

How can the style of a div's :after pseudo-element be modified when hovering over its :before pseudo-element?

Here is some CSS code: .myDiv:before{ content:''; width:15px; height:15px; display:block; } .myDiv:after{ ... ... display:none; } And here is the corresponding HTML code: <div class='myDiv'></div> ...

htmlcsshover

There seems to be a PHP syntax error within the INSERT INTO statement, resulting in SQL state 37000 when executing SQL

Error Caution: odbc_exec() encountered an SQL error: [Microsoft][ODBC Microsoft Access Driver] Syntax error in INSERT INTO statement., SQL state 37000 in SQLExecDirect in E:\DEP\Prog\PHP6\starcraft\starcraft\personnage_trai ...

phphtmlmysqlsqlsql-server