Is there a way to make item 1 dynamically update when I hover over item 2?

How can I create a function that enlarges item 2 when hovered over, while causing item 1 to shrink and rotate its text?

Is there a way to achieve this effect using CSS or JavaScript?

Currently, I have managed to make the hover effect work on item 1, where item 2 shrinks.

This is my current code snippet:

container {
  width: 100%;
  display: flex;
}

h2 {
  font-size: 40px;
}

#box1 {
  position: relative;
  background: #154c79;
  height: 600px;
  color: white;
  text-align: center;
  float: left;
  flex: 1;
}

#box1:hover {
  transition: width 2s;
  text-align: center;
  flex: 10;
}

#box1:hover~#box2 {
  writing-mode: vertical-lr;
  text-orientation: upright;
  text-align: center;
  font-size: 50px;
  flex: 1;
}

#box2 {
  position: relative;
  background: #FBCEB1;
  height: 600px;
  color: white;
  text-align: center;
  float: right;
  flex: 1;
}

#box2:hover {
  transition: width 2s;
  text-align: center;
  flex: 10
}

#box2:hover~#box1 {
  writing-mode: vertical-lr;
  text-orientation: upright;
  text-align: center;
  font-size: 50px;
  flex: 1;
}
<div class="container">
  <div id="box1">
    <h2>Box 1</h2>
  </div>
  <div id="box2">
    <h2>Box 2</h2>
  </div>
</div>

htmlcsshover

Answer №1

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.item {
  width: 100px;
  height: 100px;
  background-color: lightgray;
  text-align: center;
  line-height: 100px;
  font-size: 20px;
  transition: all 0.5s ease-in-out;
}

.item-1:hover {
  transform: scale(0.5);
}

.item-2:hover {
  transform: rotate(360deg) scale(1.5);
}
<div class="container">
  <div class="item item-1">Item 1</div>
  <div class="item item-2">Item 2</div>
</div>

Give this a try if it's useful

Answer №2

I have discovered the answer

container {
    width: 100%;
    display: flex;
}

h2 {
    font-size: 40px;
}

#box1 {
    position: relative;
    background: #154c79;
    height: 600px;
    color: white;
    text-align: center;
    float: left;
    flex: 1;
}

#box1:hover {
    transition: width 2s;
    text-align: center;
    flex: 10;
}

#box1:hover ~ #box2 {
    writing-mode: vertical-lr;
    text-orientation: upright;
    text-align: center;
    font-size: 50px;
}

#box2 {
    position:relative;
    background: #FBCEB1;
    height: 600px;
    color: white;
    text-align: center;
    float: right;
    flex: 1;   
}

#box2:hover {
    transition: width 2s;
    text-align: center;
    flex: 10
}

#box1:has(+#box2:hover) {   
    writing-mode: vertical-lr;
    text-orientation: upright;
    text-align: center;
    font-size: 50px;
} 
 <div class="container">
            <div id="box1"> <h2>Box 1</h2>
            <div id="box2"> <h2>Box 2</h2>
            </div>
        </div>

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

I have developed a web page using asp.net that cannot be resized

Hey there! I'm interested in building a web page that cannot be resized or minimized. Is there a way to do this? Additionally, I've noticed some advertising pages that are fixed on the screen - how can I create something similar? ...

c#asp.nethtml

Rearranging the Foundation Grid by incorporating smaller panels ahead of larger panels

I am in the process of designing a visually appealing webpage with no text other than captions. To achieve the desired look, I aim to have each clickable box display in a unique size. Here is the layout I envision: __________________________ | ...

htmlcssresponsive-designzurb-foundation

Single-Page Design Ascend

I'm facing a dilemma with my one-page website layout project. Instead of the conventional scroll down effect, I'd like to implement a design similar to www.xsbaltimore.com where users have to scroll up to view other sections. However, I'm un ...

htmlscrollweb

Ensure that the radio button and its corresponding label are aligned on the same horizontal line

When dealing with multiple radio buttons, each paired with a label, how can you ensure that the button and label always stay on the same line, while also automatically shifting to the next line for the next pair? For example, on a large screen: () Label ...

htmlcssradio-button

Enhancing text with custom gradient using CSS styling

I am facing an issue where uploading an image with text is not helpful for Google search visibility. I am looking to add a specific gradient style to my text. Could anyone assist me in achieving this particular text look that I have in mind? I came acros ...

htmlcsstext

Combining several files into a single variable to encode

I'm encountering an issue with the multiple file upload option. Even though it shows that 2 files have been uploaded, when I try to print the encoded value in the console, it only encodes and takes the value of my last uploaded file. How can I encode ...

javascripthtml

The loading feature of jQuery UI Autocomplete - .ui-autocomplete-loading is ingenious

When fetching the XML file for the search box, I would like to apply this css. It currently takes around 3 seconds to load the file. In the autocomplete.js file, I found these two functions: _search: function( value ) { this.term = this.element ...

jquerycssjquery-uiautocomplete

Storing user responses on a webpage

I am feeling quite lost in my design and I need some help from a talented programmer who can guide me through this realm which is not exactly my area of expertise. My Current Assets Page - form.html <div style="text-align:left"> <form ...

phphtmlmysql

What is the process of adding background color to text?

Is there a more efficient way to style this text without relying on the span tag? I am looking to add a background color to my text. Code: .subject { color: gold; background: gray; } <h2>Some Subjects</h2> <ol> <li style="bac ...

htmlcss

Reduce the line length for better readability

Looking for a way to make a button with flexible width while allowing text to wrap to 2 lines for minimum button size? Check out the examples below: To keep the button width small, even short words should wrap to 2 lines: My Button If there's a ...

css

Maximizing Bootstrap card size in Angular4: A step-by-step guide

How can I make Bootstrap cards resizable on top of other elements when clicked on an icon to make it full screen and overlay on other cards? detail.component.html <div class="card card-outline-info" > <div class="card-header bg-info"><h5 ...

cssangulartwitter-bootstrap-4

Having trouble clearing a div with Jquery

I'm having trouble emptying the am-container with my jQuery code. Here is what I currently have: jQuery(document).find("div[id='am-container']").html(''); Below is the HTML structure: <div class="mid-part-right"> <div ...

javascriptjqueryhtml

Determine the TR id when a button within a TD element is clicked using JavaScript/jQuery

Currently seeking a method to generate a unique identifier for use as a parameter in a JavaScript function. Specifically interested in extracting the id of the first td element if feasible. <tr id='it'><td id="#nameiron">Jason</td ...

javascriptjqueryhtml

Is there a way to change tailwincss into regular CSS?

I recently received an HTML file that was created using Tailwind CSS and now I am looking for a way to convert everything to regular CSS. I found a tool that converts individual classes, but it would require me to extract and paste thousands of classes o ...

csstailwind-css

Tips on how to perfectly position an element in the middle of an HTML

I am struggling to get the textarea element centered using margin: 0 auto. I even attempted to place the element inside a div with margin: 0 auto style. <div style="margin: 0 auto;"> <textarea rows="4" cols"100"></textare> </div& ...

htmlcss

"Embrace the power of Bootstrap 3 with a cutting-edge logo,

Looking to design a layout that features a logo on the left and a slogan pane with the navigation bar below it on the right. Check out image #1 for reference. As the screen narrows, the plan is to have the navigation pane move below the logo and slogan. T ...

csstwitter-bootstrap-3navgraphical-logo

Code malfunctioning

<html> <body> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> <script type="text/javascript> $('img').click(function(){ var ge ...

javascriptjqueryhtml

What are some methods for creating a Venn Diagram that includes data within each section using SVG, CSS, or Canvas?

I am attempting to replicate this visual representation using pure SVG, CSS, or Canvas drawing. So far, I have successfully created three circles that overlap and placed a label in the center of each one. However, I'm facing challenges when it comes t ...

javascripthtmlcsssvgcanvas

Adjust an SVG text to fit perfectly within an SVG background rectangle

Inside this box are two SVGs: one for the text and one for the background rectangle. My goal is to make sure the text fits perfectly within the background rectangle without any stretching or overflowing. I don't want to break the text into multiple l ...

javascripthtmlcsssvg

Data is not populating in the select option box after the AJAX request

Hey there! Recently, I've been diving into the world of AJAX. I created an example that should take data selected from the first dropdown box and filter it into the second dropdown box using AJAX. However, for some reason, the AJAX request doesn' ...

phphtmlajax