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

Guide to effectively testing a function in Angular that outputs a promise

I am trying to unit test a function inside a component that calls a service method with 3 arguments and returns a promise. I have written the necessary code in Angular using karma jasmine testing framework. Would appreciate some feedback on my implementati ...

angularpromisejasminekarma-jasmine

What is the best way to navigate down a page using the <a> tag?

I'm working on creating a mini wiki page on my website that will have a table of contents at the top. Users can click on a link in the table of contents and it will automatically scroll down to the relevant section of the page. I know this involves us ...

htmlcss

The HTML content I created is too large for the screen and is extending beyond its borders

The navigation bar and footer on my HTML page adjust themselves according to the screen width, but the main content is not adjusting properly. I tried using a media query for mobile resolution (517px), but when I tested it on a PC with a smaller screen wi ...

htmlcssoverflow

What could be causing the page to automatically scroll to the bottom upon loading?

My experience with this bootstrap/jquery page in Firefox (v39, latest updates installed) has been unusual as it always seems to jump to the bottom of the page upon clicking. Upon inspecting the code, I couldn't find any JavaScript responsible for thi ...

javascriptjquerycsstwitter-bootstrap

What is the best way to maintain parameters in PHP form code?

I am facing an issue with a script that needs to run with a specific parameter (for example, details.php?studentid=10325). The script contains a form with the following code snippet to send form data back to the current script. However, for some reason, t ...

phphtmlpostparameters

Ensure that the contents of the upper and lower divs are appropriately aligned, while maintaining the centered positioning of the

As a complete beginner in the world of HTML and CSS, I am facing a challenge with my code. Here's the HTML snippet: <section class="instructions"> <div class="row"> <div class="instructions-col" ...

htmlcss

I am facing an issue with Angular reactive forms where the default values I set in ngOnInIt are not being reflected

Having some issues with setting default values in my Angular app using reactive forms. The defaults I set in ngOnInit are not showing up. I am also using the filter function within the map method. I am trying to select a value based on the URL and have it ...

javascriptangulartypescript

Transform text and table from using spaces and tabs to using semicolons as separators

Having issues with the formatting of data in one table space and tab separated, needing to separate fields by semicolon. I attempted using awk directly but it didn't work as expected. Decided to create a Perl script for this task with tables styled in ...

htmllinuxperlcsvdelimiter

What is the technical process behind conducting A/B testing at Optimizely?

I'm currently experimenting with Google Analytics and Content Experiments for A/B testing on my website, but I'm encountering some challenges in making it seamless. To utilize the Google API properly, a few steps need to be taken. Firstly, I nee ...

javascripthtmlcssgoogle-analytics-apiab-testing

Combine collapse and popover in Bootstrap 3 for enhanced functionality

I'm facing some issues trying to use the badge separately from the collapse feature. $(function (e) { $('[data-toggle="popover"]').popover({html: true}) }) $('.badge').click($(function (e) { e.stopPropagation(); }) ) Check o ...

javascriptjquerycsstwitter-bootstrap

What could be the reason for my provider loading the data twice?

Recently, I have been following a tutorial on building an Ionic app that displays information about National Parks. The data is stored locally and loaded by a Provider in my application. However, I noticed that the data is being loaded twice by the Provide ...

angularionic-frameworkpromiseangular-services

Automated line wrapping within a div

My goal is to showcase images within a unique div structure. Currently, the arrangement appears as follows: It seems that the green divs are extending beyond their parent div (the black one). This is how it's structured: <div class="photoView c ...

jqueryhtmlcssangularjs

Struggling to make a basic ajax request function correctly

I've been experimenting with this code snippet in my browser's console. $.ajax({ type: 'GET', url: 'http://stackoverflow.com/', dataType: 'html', success: function() { console.log("Yes, t ...

jqueryhtmlajax

Reduce the size of your CSS files using Gulp through the .pipe method

Is it feasible to incorporate a plugin like clean-css to minify CSS every time a page is refreshed or saved? How can I chain it through pipes to ensure that the minified file ends up in the dist folder? Thank you for any assistance! Presented below is the ...

cssgulpbundling-and-minificationgulp-clean-css

What is preventing my hidden field from being filled by a JavaScript function?

I've recently developed a JavaScript function that generates a specific string required for another form on the website I'm currently working on. Initially, I decided to store this generated value in a hidden field and then submit it within an HT ...

javascripthtml

The jQuery fadeToggle function toggles the visibility of an element starting from hidden instead

I'm having an issue where text in my div only appears on the second click, instead of the first. What could be causing this problem? $('#fPaperCirclePic').on('click', function () { $('#fPaperCircleText, #isargebla, #moq10 ...

javascriptjqueryhtmlcss

Utilize JavaScript to append a CSS class to a dynamic unordered list item anchor element

I am working with a list of ul li in a div where I need to dynamically add CSS classes based on the click event of an anchor tag. Below is the HTML structure of the ul li elements: <div class="tabs1"> <ul> <li class="active"> ...

javascriptjqueryhtmlcsscss-selectors

Adjust the code to enhance the functionality of web components in Sharepoint

I recently came across some code online that I'm trying to modify in order to add an expanding button next to a web part on my Sharepoint site. However, the problem is that by default, all web parts are already expanded and require a click to collapse ...

javascriptjqueryhtmlcsssharepoint

Aligning images and input fields vertically with relative measurements

I'm looking for a way to vertically position two images, one on the left and one on the right, so that they are centered between labels and input fields within a containing div. Is it achievable using only relative lengths? Check out this jsfiddle fo ...

cssvertical-alignment

The width of the child box does not properly receive the 100% application

Artistic Inspiration I have created a unique and elegant card layout design. * { box-sizing: border-box; } .card { display: flex; width: 600px; height: 400px; } .card > .img-window { width: 100%; background-image: url('https://s3- ...

htmlcssflexbox