Image appearing to wiggle during a CSS div change

I am currently facing an issue with a DIV element that has CSS properties for hover effect. The code snippet is as follows:

.card:hover {
  box-shadow: 5px 5px 20px #c4c4c4;
  margin-top: -5px;
  margin-left: -5px;
}

Within this div, there is an image styled with the following CSS:

.card .avatar {
  border-radius: 100px;
  margin-top: -30px;
  margin-left: 10px;
}

The problem I am encountering is that the image appears to be jittery or "shaking" slightly during the transition.

For reference, here is the fiddle link: https://jsfiddle.net/zudvv4cv/2/

csscss-transitions

Answer №1

Try using the transform attribute instead of margin in your code

.element:hover {
  box-shadow: 3px 3px 15px #a5a5a5;
  transform: translate(-3px, -3px);
}

Remember to include all necessary prefixes for browser compatibility

.element:hover {
  box-shadow: 3px 3px 15px #a5a5a5;
  -webkit-transform: translate(-3px, -3px);
          transform: translate(-3px, -3px);
}

Check out this example https://jsfiddle.net/pc75xu2o/7/

Answer №2

To create a smooth transition, simply employ the CSS property transform: translate(x,y). This method disregards the positioning of neighboring elements.

transform: translate(-5px, -5px);

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

Step-by-step guide to activating vertical scrolling for select tiers in a multi-layered fly-out navigation

Currently working on a multi-level flyout menu to be integrated into a daterange picker for selecting time periods. Check out the jsfiddle link here: https://jsfiddle.net/6t72hd4x/1/ I attempted to set overflow-y: auto; in the .inner-list class to handle ...

htmlcss

The CSS drop-down menu on the website is not operating as intended

Whenever I attempt to use the menus by hovering over them, the sub menu briefly appears but disappears before I can access it fully. I've experimented with adding margins and adjusting the z-index in different locations, yet I am still unable to pinpo ...

cssdrop-down-menu

Scrolling in Bootstrap 4 Cards conceals the fixed Header

Here's some HTML code featuring Bootstrap 4 elements. It showcases a fixed Header and Footer with scrollable Bootstrap Cards in between. When scrolling, the Headers may be hidden by the Cards. How can you adjust the layout so that the Cards scroll "be ...

htmlcssbootstrap-4scrollbootstrap-cards

What are the best strategies to prevent text from appearing jumpy while fading in word by word?

I'm struggling to create a smooth fade-in effect word by word without causing the first word to suddenly jump to the left when the second word appears. To better explain my issue, I've provided a jsfiddle link: http://jsfiddle.net/6czap/504/ If ...

jquerycss

Tips for aligning an element vertically when it has a float using CSS or JavaScript

I am struggling with centering the image within the article list loop I created. The code snippet looks like this: <article class="article <?php if($i%2==0) { echo 'even'; } else { echo 'odd'; } ?>"> <section class ...

javascriptjqueryhtmlcss

Prevent collapsing when clicking twice

This section is designed to collapse and expand in its default mode. It will close when the user selects "No" and open/close when the user selects "Yes". I am looking to modify it so that it only closes when the user picks "No" and reopens only when the u ...

javascriptjquerycsstwitter-bootstrapbootstrap-4

Step-by-step guide on building a footer with relatively positioned elements

Is there a way to create a footer that stays at the bottom of the screen but also expands from the top based on the position of a specific element? I want it to have a fixed bottom position while adjusting its top side as needed. How can I achieve this? ...

htmlcss

Ways to create a dual grid responsive design using Tailwind CSS

I am currently working on creating a responsive two-column layout using Tailwind CSS. The goal is for the first column to occupy 70% of the width, with both columns expanding to full width on mobile devices. However, my attempts so far have not yielded the ...

htmlcsstailwind-css

Designs created with shapes using HTML, CSS, and JavaScript

I've been given a challenge to reproduce the image shown below using only HTML, CSS, and JS - without utilizing any image files. Initially, I thought about creating the shapes with HTML elements and CSS, but I realize this might not be the best approa ...

javascriptjquerycsshtml

Simple steps to modify the width of underline using CSS

One of the cells in my table has the following content: <td><b>Grand Total</b></td> I want to add a line under the text "Grand Total". I tried using text-decoration: underline;, and it worked fine. However, I now need to customize ...

htmlcss

What is the best way to align multiple container elements alongside the sidebar?

My problem is that small squares on my page are appearing way below where I want them to be, leaving a lot of white space above. I've tried setting them to position: fixed;, but then everything slides off when scrolling down the page. Any suggestions ...

htmlcsstwitter-bootstrap

I'm curious why my background generator is only altering a portion of the background instead of the entire thing

I've been attempting to create a JavaScript random background changer, but I'm encountering some challenges. The main issue is that instead of changing the entire page's background, it only alters a strip of it. Additionally, I'm curiou ...

javascripthtmljquerycssdom

Searching for a comprehensive guide to web-related terminology that is widely accepted

Constantly immersing myself in studying the languages I am familiar with and exploring new development concepts and languages is a regular practice for me. When it comes to books, O'Reilly is my go-to choice, but when it comes to online resources, I&a ...

phphtmlcssprogramming-languages

Tips on eliminating the bottom border of the final div within a group using CSS

Is there a way to remove the bottom border of the last "footer_column" div? See below for the HTML: <div id="footer_wrapper"> <!-- footer_wrapper starts here --> <div id="footer"> <!-- footer starts here --> <div class=" ...

htmlcss

Arranging cards in a stack using VueJS

I am currently working with a small vue snippet. Originally, I had v-for and v-if conditions in the snippet, but due to issues reading the array, it is now hardcoded. The current setup produces three cards stacked on top of each other. I am exploring opti ...

javascripthtmlcssvue.js

Step-by-step guide on utilizing jQuery to fade out all elements except the one that is selected

There are multiple li elements created in this way: echo '<ul>'; foreach ($test as $value){ echo '<li class="li_class">.$value['name'].</li>'; } echo '</ul>'; This code will generate the fol ...

jquerycssfade

Is it possible for a Div's height to be equal to 100% of its container's

<div id="wrapper"> <div id="main-content"> //my main content </div> </div> #wrapper{ height:100%!important; min-height:700px!important; } #main-content{ height:100%!important; } Despite setting the height of my main ...

htmlcss

Unable to display jQuery modal due to error "Uncaught DOMException: Failed to execute 'appendChild' on 'Node': The new child element contains the parent."

Check out the JS Fiddle demo here. Here is the code in question: $('#infoTable').click(infoModal); function infoModal(){ var table = "THIS IS A TABLE"; $("#dialogContainer").dialog({ appendTo: "#msg-dialog", autoOpen: f ...

javascriptjqueryhtmlcssjquery-ui

What is a method to raise the height when scrolling down without reducing it when scrolling up?

For my One Page project, I want a DIV element to increase in height when scrolling down, but maintain that increased height when scrolling up. Currently, I am utilizing JQuery with the code snippet below: $(function(){ $(window).scroll(function() { ...

javascriptjquerycss

When applying a cell formatter to change the color of a Tabulator cell, the text displayed is being

I am attempting to dynamically change the color of a tabulator cell based on its input. My initial approach was to simply try changing the cell's color. After running the following code, here is what I observed: function testFormatter(cell, formatt ...

javascriptcssdomtabulator