Hover effects in CSS using z-index are causing the displacement of divs

Whenever I hover over the first div to reveal the entire text, the second div's position shifts to go behind it. My goal is to have the second div stay in place, allowing the text from the first div to overlap it.

Check out the demo here: https://codepen.io/adivity/pen/OJEzoPm

<html>
<body>
  <div class="container">
    <div>1) This is the complete title that I want to reveal. It's very long and will completely cover the next div.
    </div>
    <div>2) This is the complete title that I want to reveal. It's very long and will completely cover the next div.
    </div>
    <div>3) This is the complete title that I want to reveal. It's very long and will completely cover the next div.
    </div>
  </div>
</body>
</html>
.container {
  max-width: 100px;
  margin: 0 auto;
}
.container div {
  height: 80px;
  background-color: grey;
  
}
.container div {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
 
}
.container div:hover {
  overflow: visible;
  white-space: normal;
  z-index: 2;
  max-width: 100px;
 }

Answer №1

I found that by removing the position: absolute line from .container div:hover, the issue was resolved for me. Does this solution meet your needs?

.container div:hover {
  overflow: visible;
  white-space: normal;
  z-index: 2;
  position: absolute; <---remove this
  max-width: 100px;
}

Answer №2

If you're looking for a solution, here is a logic you can experiment with:

.container {
  max-width: 100px;
  margin: 0 auto;
}
.container div {
  height: 100px;
  background-color: grey;
}
.container div {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.container div:hover {
  overflow: visible;
  white-space: normal;
  z-index: 2;
  max-width: 100px;
}
<html>
<body>
  <div class="container">
    <div>1) This is the full title that I want to be revealed
    </div>
    <div>2) This is the full title that I want to be revealed
    </div>
    <div>3) This is the full title that I want to be revealed
    </div>
  </div>
</body>
</html>

Answer №3

To witness the overlap, you must erase the background color of the divs.

.container {
  max-width: 100px;
  margin: 0 auto;
}
.container div {
  height: 100px;
/*   background-color: grey; */
}
.container div {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.container div:hover {
  overflow: visible;
  white-space: normal;
  z-index: 2;
  position: absolute;
  max-width: 100px;
}
<html>
<body>
  <div class="container">
    <div>1) This is the full title that I want to be revealed
    </div>
    <div>2) This is the full title that I want to be revealed
    </div>
    <div>3) This is the full title that I want to be revealed
    </div>
  </div>
</body>
</html>

If you wish for the divs to remain in their original positions, simply delete the "position: absolute" rule from the CSS.

.container {
  max-width: 100px;
  margin: 0 auto;
}
.container div {
  height: 100px;
/*   background-color: grey; */
}
.container div {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.container div:hover {
  overflow: visible;
  white-space: normal;
  z-index: 2;
/*   position: absolute; */
  max-width: 100px;
}
<html>
<body>
  <div class="container">
    <div>1) This is the full title that I want to be revealed
    </div>
    <div>2) This is the full title that I want to be revealed
    </div>
    <div>3) This is the full title that I want to be revealed
    </div>
  </div>
</body>
</html>

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

Having trouble getting my parallax slideshow to work with jquery preventDefault

-UPDATE- After countless hours of online courses, tutorials, and programming, I finally completed my website! Check it out here: The site is almost where I want it to be, but there are a few remaining challenges: 1) AJAX: I'm struggling to get the ...

MacOS web browsers adjust content to fit the screen size

As I delve into React development, one thing that has caught my attention is how MacOS browsers try to fit all the page content in view rather than allowing users to scroll. Let me illustrate this with an example: function Example() { const Elements = ...

Remove any posts that have a date earlier than the current day

Currently, I am working on a website showcasing events organized by my friend's music label. However, I have run into an issue while attempting to implement an "archiving automation". The code I have tried below is not functioning as expected, as my " ...

What could be the reason for the child element not occupying the full height of its parent container?

* { padding: 0; margin: 0; box-sizing: border-box; } body { margin: 50px; } .navbar { display: flex; align-items: center; justify-content: center; color: darkgreen; font-family: 'Vollkorn', serif; font-size: 1.2rem; font-w ...

Having trouble with contact form functionality, developed with AJAX, PHP, and HTML5

I am currently in the process of creating a functional contact form for my website to streamline communication with potential clients who are interested in design services. Although I have never developed an operational contact form that sends emails, I c ...

Tips for implementing a method to switch CSS properties of a main container by using a checkbox within its child element in a Svelte component

It took me a while to figure this out, but I still feel like my implementation is not ideal. I'm confused as to why things break when I remove the checkedActivities.has(activity) ? "checked" : "unchecked", because I thought TypeScr ...

Is Safari causing issues with the CSS slider animation?

Currently, I am working on implementing a CSS-only slider (no jQuery) in WordPress using the code from this source: http://codepen.io/dudleystorey/pen/kFoGw An issue I have encountered is that the slider transitions are not functioning correctly in Safari ...

Ways to adjust the number of columns in a div using Bootstrap for varying screen sizes of larger devices

https://i.sstatic.net/1nHlm.pngI am new to coding and exploring html, css, and bootstrap. Is it possible to assign varying numbers of columns to a div based on different resolution ranges for larger devices? Specifically looking at the "lg" range which co ...

Steps to activate the image viewer for each individual looping image:

I'm struggling with my JavaScript code that fetches images and displays them in a modal view when clicked. The issue I'm facing is that the image view only works for the second and other images, but not for the first one. I know there are issues ...

Get the latest html content and save it as a .html file using javascript or jQuery

Looking for a way to save an HTML page as a .html file? Having some trouble with jQuery modifications not being included in the exported file? Check out the code snippet below and let me know if you can spot what's going wrong! I'm still getting ...

Fixed Navigation - Employing stickUp.js extension

* { box-sizing: border-box; } body { margin: 0; padding: 0; font-weight: 500; font-family: 'Helvetica Neue', sans-serif; } main {} .bckgrnd { background-position: center center; background-repeat: no-repeat; background-attachment: ...

Tips for making a JavaFX Button transparent without reducing the hitbox size

When I create a new Button in JavaFX and make the background transparent using either myButton.setBackground(Background.EMPTY); or myButton.setStyle("-fx-background-color: transparent;"), the hitbox is reduced to just the text inside the button when trigge ...

`Changing drop-down menu to display the previously selected item upon page refresh in a Django application`

Is there a way to retain the selected filter in a Django/Python application when a page refreshes after using an HTML drop-down form? Here is the current form I am using: <form name="portfolio_filter" action="" method="get"> <select class="o ...

Using TailwindCSS with Vite in a vanilla JavaScript project: A step-by-step guide

As a beginner, I feel like I'm losing my mind trying to figure this out. I've watched countless tutorials and read through numerous documents, but still can't seem to get it working. Does anyone have any advice on how to successfully integra ...

The absence of images in WordPress categories is a noticeable issue

So I've been working on my WordPress site. For instance, let's say it's wordpress.com I have a page called sports, and some of those pages are now nested under the page 'summer' Now the url looks like www.wordpress.com/summer/sp ...

What steps should I take to ensure my three.js project is compatible with iPhone testing?

I recently developed a new AR project that allows users to interact with AR content through their phone camera on a website. However, I am facing an issue where I cannot easily test my website on an iPhone whenever I make changes to the code. Currently, ...

Limit the character input in AngularJS/Ionic to a specific number

I have a text input field that needs to restrict the user from entering more than a specific number of characters. Let's say I only want the user to type 10 characters, and if they try to enter more, the text field should not accept it. It should stop ...

Accessing the background page of a Chrome extension while it's in operation

I am in the process of developing my first chrome extension that allows youtube.com/tv to run in the background so it can be accessed easily on a phone or tablet. Everything is working fine, except for the fact that if I want to watch the video and not j ...

Having trouble populating a datalist with options sourced from a MySQL table, as the options do not consistently show up (Node.js)

My goal is to dynamically populate a datalist with option elements by querying a MySQL server using node. The requirement is that if the inputted text by the user matches any part of a university name in the database, that university should be displayed as ...

The overlay button is designed to start the video only when clicked on the center of the screen. However, if clicked on any other part of the video, it will stop

$(".video") .parent() .click(function () { if ($(this).children(".video").get(0).paused) { $(this).children(".video").get(0).play(); $(this).children(".playpause").fadeOut(); $("video").attr("controls", true); } else { $ ...