Words in motion as the transition unfolds

Hey everyone, I'm encountering an issue with animations. I have an image that transitions on hover, but the text just below it is moving slightly as well. This is causing layout problems for me. I attempted to use absolute positioning based on a similar solution I found, but it didn't solve the issue for me. Any suggestions on how I can fix this?

Check out the code here

<div class="album-item">
  <div class="album-img"><img src="https://is2-ssl.mzstatic.com/image/thumb/Music114/v4/97/e6/70/97e670f6-361b-a23d-617a-52bafcd631cd/075679854247.jpg/170x170bb-85.png" /></div>

  <div class="album-card">
    <h4>title</h4>
    <span>name</span> <span>released</span>
  </div>
</div>


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

h4 {
  align-content: center;
  margin: 5px;
}

.album-img {
}

img {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  border-radius: 3px;
  -webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  opacity: 0.8;
}

img:hover {
  -webkit-transform: scale(1.12, 1.12);
  transform: scale(1.12, 1.12);
  opacity: 1;
  border: 1px solid yellow;
  border-radius: 2px;
  cursor: pointer;
}

.album-card {
}

The text seems to be moving slightly in this example, and I have multiple tiles like this, causing significant layout issues. I really need the text to remain stationary.

htmlcsscss-transitions

Answer №1

If you wish to keep the text in place, avoid altering the layout of the elements above it when transitioning between states. In this scenario, changing the size by adjusting the border width of the element above is causing the issue.

To resolve this, assign the non-hovered element an equal border width with a transparent color.

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

h4 {
  align-content: center;
  margin: 5px;
}

.album-img {
}

img {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  margin: -1px 0 0 -1px;
  border: 1px solid transparent;
  border-radius: 3px;
  -webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  opacity: 0.8;
  display: block;
}

img:hover {
  -webkit-transform: scale(1.12, 1.12);
  transform: scale(1.12, 1.12);
  opacity: 1;
  border-color: yellow;
  border-radius: 2px;
  cursor: pointer;
}

.album-card {
}
<div class="album-item">
  <div class="album-img"><img src="https://is2-ssl.mzstatic.com/image/thumb/Music114/v4/97/e6/70/97e670f6-361b-a23d-617a-52bafcd631cd/075679854247.jpg/170x170bb-85.png" /></div>

  <div class="album-card">
    <h4>title</h4>
    <span>name</span> <span>released</span>
  </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

What is the process for creating a tab logo?

Is there a way to create a personalized logo to appear next to the website title on the tab? Whenever I see a logo displayed beside the website title in my browser tabs, I can't help but wonder how it's done. ...

javascripthtmlcss

Retrieving text content from an HTML element with Jsoup for web page manipulation

My task involves extracting text content from a specific HTML element <span class="adr" style="float: none !important;"> <span class="street-address" style="float: none !important;">18, Jawaharlal Nehru Road, </span> ...

htmlhtml-parsingjsoup

Leveraging SignalR in conjunction with jQuery to dynamically alter the CSS style of a span

Utilizing SignalR to dynamically update a span's color based on real-time data source. The connection is established successfully, but encountering difficulties with updating the css classes on the span. The issue arises when attempting to update mul ...

jqueryhtmlcssrazorsignalr

How can I show or hide all child elements of a DOM node using JavaScript?

Assume I have a situation where the HTML below is present and I aim to dynamically conceal all the descendants of the 'overlay' div <div id="overlay" class="foo"> <h2 class="title">title</h2> ...

javascripthtmlcss

Is it not possible to apply CSS box-shadow to divs on top of an image or video

Why does the box shadow on my content divs not mix with my superbgimage/jw player background? Instead of darkening, it creates a grey halo effect. Do box-shadows only work on white backgrounds? Halo effect instead of shadow blending with background image ...

backgroundcss

What is the best way to make ng-style append to a pre-existing style?

I am facing an issue with my custom popover directive and another custom directive that uses it. I am attempting to use ng-style to adjust the width of the popover. Below is a code snippet from the directive's html template: <div my-custom-popover ...

htmlcssangularjsangularjs-directive

Conceal the div based on the criteria

I need an inline solution for this issue: <div id="xy<%=statusCount%>" style="margin-top: 50px;display:${<%= statusCount %>!=0 ? 'none' : ''};" class="XYZ"> This code is causing an error ...

htmlcssjspjasperserver

Is there a way to change the CSS of a sibling element when hovering over it

Imagine a scenario where hovering over one row changes its color. However, what if we want all rows of the same color to highlight when any row is hovered over? Is it possible to achieve this using just CSS? .red-row:hover { background-color: red; } ...

htmlcss

Alternate the color over time using CSS

Is there a way to dynamically change the color of a div from black to white every two seconds, and then from white to black, continuously toggling as long as the div is visible? Essentially, I want the div to only be displayed when a user clicks and drag ...

javascriptjqueryhtmlcsscolors

How to set a background image using CSS in a Node.js application with Express

I'm currently delving into Node.js and as a total newbie, I haven't been successful in finding a solution. This is my directory structure: app --> public --> a.jpg & style.css When I provide access to these files in Express, it's ...

cssnode.jsexpress

Utilizing v-for and CSS Grid to showcase data effectively

I'm having trouble organizing my Vuex data with CSS GRID. It's turning out messy. My setup includes two columns: the first one for labels and the second for values. {{$store.state.stepOne.textfield[idx].label}} The code above is used to displa ...

cssvue.jscss-grid

What is the correct method for caching fonts within an Angular application?

In the process of developing a web application similar to photoshop-minis using Angular, one key aspect I am focusing on is reducing load times. Particularly when it comes to fonts, as not all necessary fonts are available through Google Fonts. Instead of ...

cssangularcachingbrowser-cachewebfonts

Aligning text in the middle of two divs within a header

Screenshot Is there a way to keep the h4 text centered between two divs? I want it to stay static regardless of screen resolution. Currently, the icon and form remain in place but the h4 text moves. How can I ensure that it stays in one spot? <!doctyp ...

htmlcss

What is the best way to eliminate the appended content within the tbody?

The code snippet below is functioning correctly. I am trying to retrieve the ID or Class of the appended data from the checkbox. However, when I use the following code $('.chk').click(function(){ console.log(cc);}), it does not work as expected. ...

javascriptjqueryhtml

Customizing a Tab Bar with HTML and CSS - Adjusting the text color for the selected tab

When creating a set of radio buttons with labels using HTML, the challenge arises when the active tab appears in blue with white text while the inactive tabs have the same white text making them invisible until highlighted. The goal is to change the color ...

htmlcss

Extracting information from a webpage with no specific identifiers such as name, id, or class linked to the

I am currently attempting to monitor the delivery status of shipments and have it displayed on an Excel tab. Through this specific website , relevant data appears once the "Air wayBill No." is input. I successfully launched Internet Explorer, entered th ...

htmlexcelvbaweb-scraping

Adding dynamic attributes to every TR element in a table using VB.NET ASPX

Would it be possible to use a VB.NET loop function to dynamically update each TR in a table (using Class ID) by adding a generated attribute into each TR? For example, AutoGen'd <table class="DynaGenerated Content"> <tr><td></td ...

cssasp.net.netvb.netwebforms

Incorrect formatting of HTML email on Outlook

Here is the code snippet I am using for an HTML email: <div style="background-color:red;max-width:600px;height:140px;margin-left:auto;margin-right:auto;"> <img src="https://via.placeholder.com/140x99" height="140" wi ...

htmlemailoutlookhtml-emailoutlook-2010

Error: The function $(...).ekkoLightbox is not defined

Recently, I attempted to integrate ekkolightbox into my WordPress website. However, each time I selected an image, I encountered the following error message: Uncaught TypeError: $(...).ekkoLightbox is not a function Initially, I suspected that the issue ...

javascriptjqueryhtmlwordpresstwitter-bootstrap

Presenting information on an HTML webpage using the slidetoogle feature

< script > $(document).ready(function() { $("#flip").click(function() { $("#panel").slideToggle("fast"); }); }); < /script> When a button in a particular panel is clicked, I aim to display the details of that specific tuple ...

javascriptphpjqueryhtml