Customizing the hover behavior of a div element without causing displacement of surrounding elements

I am facing an issue where the descriptions in my list of 100 items are longer than the width of the div, causing the text to be cut off. I want to display the full description on hover without affecting the layout of other items. Currently, when I hover over one item, all the items below it shift downwards. I need a solution that moves only the hovered item forward while keeping the rest in place.

Check out the demo here

<div class="album-item">
  <div class="album-img"><img src="https://is1-ssl.mzstatic.com/image/thumb/Music124/v4/1a/69/cf/1a69cf82-2cfe-a7e1-a79c-cb9d7d67b710/886447513651.jpg/170x170bb-85.png"></div>
  <div class="album-card">
    <div class="name">Rent (Original Soundtrack of the Fox Live Television Event)</div>
    <div class="artist">Original Television Cast of Rent Live</div>
    <div class="date">February 1, 2019</div>
  </div>
</div>

<div class="album-item">
  <div class="album-img"><img src="https://is1-ssl.mzstatic.com/image/thumb/Music124/v4/1a/69/cf/1a69cf82-2cfe-a7e1-a79c-cb9d7d67b710/886447513651.jpg/170x170bb-85.png"></div>
  <div class="album-card">
    <div class="name">Rent (Original Soundtrack of the Fox Live Television Event)</div>
    <div class="artist">Original Television Cast of Rent Live</div>
    <div class="date">February 1, 2019</div>
  </div>
</div>

.album-item {
  background-color: gray;
  width: 170px;
  margin: 25px;
}

img {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  -webkit-transition: all 0.6s cubic-bezier(0.15, 0.8, 0.4, 1);
  transition: all 0.6s cubic-bezier(0.15, 0.8, 0.4, 1);
  opacity: 0.8;
  border: 1px solid transparent;

  &:hover {
    -webkit-transform: scale(1.1, 1.1);
    transform: scale(1.1, 1.1);
    opacity: 1;
    border-color: yellow;
    cursor: pointer;
  }
}

.album-card {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  &:hover {
    color: yellow;
    white-space: normal;
    height: 100%;
  }

  .name {
    font-size: 110%;
    font-weight: 550;
  }

  .artist {
    font-weight: 300;
  }

  .date {
    font-weight: 100;
    font-style: italic;
    font-size: 80%;
  }
}

My goal is to have the image description displayed on top of the corresponding image without causing any movement in the entire list layout.

htmlcssangularsass

Answer №1

To avoid repeating the information, check out this link: https://codepen.io/dmegatool/pen/jdmOgq

Does that achieve the desired effect?

Updated css :

.album-item {
  width: 170px;
  margin: 25px;
  margin-bottom:75px;
}

img {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  -webkit-transition: all 0.6s cubic-bezier(0.15, 0.8, 0.4, 1);
  transition: all 0.6s cubic-bezier(0.15, 0.8, 0.4, 1);
  opacity: 0.8;
  border: 1px solid transparent;


  &:hover {
    -webkit-transform: scale(1.1, 1.1);
    transform: scale(1.1, 1.1);
    opacity: 1;
    border-color: yellow;
    cursor: pointer;
  }
}

.album-card {
  display:block;
  position:absolute;
  width:170px;
  background-color: gray;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;


  &:hover {
    color: yellow;
    white-space: normal;
    height: auto;
    z-index:10;
  }

  .name {
     font-size: 110%;
     font-weight: 550;
   }

  .artist {
     font-weight: 300;
   }

  .date {
     font-weight: 100;
     font-style: italic;
     font-size: 80%;
   }
}

Original HTML:

<div class="album-item">
  <div class="album-img"><img src="https://is1-ssl.mzstatic.com/image/thumb/Music124/v4/1a/69/cf/1a69cf82-2cfe-a7e1-a79c-cb9d7d67b710/886447513651.jpg/170x170bb-85.png"></div>
  <div class="album-card">
    <div class="name">Rent (Original Soundtrack of the Fox Live Television Event)</div>
    <div class="artist">Original Television Cast of Rent Live</div>
    <div class="date">February 1, 2019</div>
  </div>
</div>

<div class="album-item">
  <div class="album-img"><img src="https://is1-ssl.mzstatic.com/image/thumb/Music124/v4/1a/69/cf/1a69cf82-2cfe-a7e1-a79c-cb9d7d67b710/886447513651.jpg/170x170bb-85.png"></div>
  <div class="album-card">
    <div class="name">Rent (Original Soundtrack of the Fox Live Television Event)</div>
    <div class="artist">Original Television Cast of Rent Live</div>
    <div class="date">February 1, 2019</div>
  </div>
</div>

Answer №2

view demo and source code

An effective solution to this issue is to display a duplicate of the text element without the ellipsis on top when hovering over it.

<div class="wrapper">
  <div class="text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
  </div>
  <div class="hover">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
  </div>
</div>

.wrapper{
  position: relative;
}
.wrapper .hover{
  display: none;
  position: absolute;
  top: 0;
  background-color: #fff;
  box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
}
.wrapper:hover .hover{
  display: block;
}
.text{
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

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

Load a page and sprinkle some contents with a slide effect

I am brand new to jQuery and just starting out, so please excuse me if this question seems basic or silly. I would like the header and footer of my page to stay in place while the center content slides in from the right side when the page loads. This websi ...

javascriptjqueryhtmlcss

Make the element switch from hidden to visible when hovering over it using CSS

I had a challenge to only show some rating text on my website when I hovered over it. Being new to coding with CSS and JavaScript, I was experimenting with overriding styles using the Stylebot extension in Chrome. I encountered an issue while trying to mo ...

javascripthtmlcss

The information retrieved from the API is not appearing as expected within the Angular 9 ABP framework

I am facing an issue with populating data in my select control, which is located in the header child component. The data comes from an API, but for some reason, it is not displaying correctly. https://i.stack.imgur.com/6JMzn.png. ngOnInit() { thi ...

javascriptangulartypescriptasp.net-coreabp

Is there a way to trigger a click event in the child component?

I need to execute a function for each element that is clicked. The current setup is as follows: <!-- This resides in the parent-component --> <template ngFor let-myData [ngForOf]="someData"> <tr [item]="myData" (click)="toggleActive($e ...

angularangular2-components

Having trouble with margin auto 0 not functioning properly in Safari on iPad?

I'm facing a challenge with centering a div in Safari on iPad. It works fine in Chrome, but in Safari there are margins on the left and right which require scrolling to view the whole content. Any suggestions on how to make this work seamlessly in bot ...

htmlipadresponsive-design

The external HTML page fails to load within a div in Firefox browser

My jquery script successfully loads an external HTML page into a div when tested on Chrome, but it's not functioning properly on Firefox. Here is the demo link. Could someone please explain why this code snippet is not working on Firefox? Code: &l ...

jqueryhtmlajaxloading

dividing Handlebars HTML content into different files or sections

I am looking to design a single route webpage, but I would like to divide the HTML code into multiple files. When rendering this particular route, my goal is for the rendered file to pull content from different template files and combine them into one coh ...

htmlnode.jsexpresshandlebars.js

Creating full-width divs using BootstrapLearn how to easily create full-width div

Bootstrap is being utilized in my current project. I have been creating divs inside columns, but they are not extending to the full width of the columns. Below is a snippet of the code: <!DOCTYPE html> <html lang="en"> <head> ...

htmlcssbootstrap-4

Increasing the size of the .ui-btn-left component

Seeking advice on a Javascript query that I can't seem to resolve online. As a beginner in Javascript, I'm struggling with what seems like a simple issue. My dilemma lies in enlarging the close button on a jQuery page. .ui-dialog .ui-header .ui- ...

jqueryhtmlcssjquery-mobilemobile

Display a JQuery dropdown menu depending on the ID of the current section

In my one-page structure, I have multiple sections with a categorized nav-bar that includes drop-down lists for each category. My goal is to display the drop-down menu of the category corresponding to the current section. if($("#About").hasClass('act ...

jquerycssdrop-down-menunavbar

Choosing comparable choices from the drop-down menu

I am working on a dropdown menu that contains different options. I need to use jQuery to automatically select the option that corresponds to the branch of the currently logged in user. However, when some option text is very similar, it causes an issue. // ...

javascriptjqueryhtml

Angular CodeMirror Line-Break function not displaying line numbers

I am currently utilizing Code Mirror from ngx-codemirror. My goal is to split the line when it fits within the width of the parent container. After searching, I found a couple of solutions that suggest using: lineWrapping: true Additionally, in the styles ...

cssangulartypescriptcodemirrorngx-codemirror

Draggable vue includes a Textarea HTML element that allows users to easily

The issue lies in implementing the draggable functionality on a textarea element. While the textarea allows text input and deletion, trying to select the text using pointer events triggers the dragging function instead, as shown in the image below: https ...

javascripthtmlvue.jstextareadraggable

Converting HTML to PDF: Transform your web content into

I have a couple of tasks that need to be completed: Firstly, I need to create a functionality where clicking a button will convert an HTML5 page into a .PDF file. Secondly, I am looking to generate another page with a table (Grid) containing data. The gr ...

javascriptcsshtmlpdf

Using global variables in local Angular-cli components by importing them

Here is an example of my folder structure in Angular CLI: MyApp/ src style/ page/ normalize.less styles.less In my angular-cli.json file, I have the following configuration: "app":{ "styles": [ "./style ...

angularlessangular-cli

Troubleshooting problems with resolving deeply nested promises

My approach to utilizing promises has been effective until now. The issue arises when the console.log(this.recipe) returns undefined and console.log(JSON.stringify(recipes)) displays an empty array. This suggests that the nested promises may not be resolvi ...

javascriptarraysangulartypescriptpromise

An innovative tool for discovering how different colors will complement each other

Design may not be my strong suit, but there are times when I need to add a border line or a shade of gray to a background color. Is there a tool available where I can specify background color: #343434 color: #asdfgh and visually see how it will look wit ...

css

Creating a CSS animation to repeat at regular intervals of time

Currently, I am animating an SVG element like this: .r1 { transform-box: fill-box; transform-origin: 50% 50%; animation-name: simpleRotation,xRotation; animation-delay: 0s, 2s; animation-duration: 2s; animation-iterat ...

javascriptcsssvgcss-animations

Number Stepper Reverse

Could the HTML5 number stepper be reversed so that pushing down increases the number and vice versa? In Response to any 'Why?' inquiries: Consider batting order in sports like cricket or baseball. As you move down the order, your batting positio ...

htmlinput

Guide to creating a parallax scrolling effect with a background image

My frustration levels have hit an all-time high after spending days attempting to troubleshoot why parallax scrolling isn't functioning for a single image on a website I'm developing. To give you some context, here's the code I've been ...

javascripthtmlcssparallaxskrollr