Animating an element from its center with pure CSS

Question

Animating an element from its center with pure CSS

I've dedicated countless hours to uncovering a solution that can be achieved using only CSS. My goal is to create an animation on a div element where its height and width decrease uniformly when hovered over.

<div class="a"></div>

Above you'll see a basic div element with the following CSS styling:

.a {
    width: 350px;
    height: 350px;
    background: #000;
    margin: 100px 0 0 400px;
    transition: all 2s linear;
    position:fixed;
}

The objective is to shrink both the height and width of the element from the center upon hover, utilizing CSS exclusively.

html css

Answer 1

Answer №1

Implement the scale transformation:

.b {
  width: 300px;
  height: 300px;
  background: #333;
  margin: 20px;
  transition: all 3s ease-in-out;
  position: absolute;
}
.b:hover {
  transform: scale(1.5);
}

<div class="b"></div>

Answer 2

Implement the scale transformation:

.b {
  width: 300px;
  height: 300px;
  background: #333;
  margin: 20px;
  transition: all 3s ease-in-out;
  position: absolute;
}
.b:hover {
  transform: scale(1.5);
}

<div class="b"></div>

Answer 3

Answer №2

If you're searching for a specific function, it's the scale() one. To meet your needs, the ideal approach is to trigger the scale() function when hovering over the target element like so:

.a {
  width: 350px;
  height: 350px;
  background: #000;
  margin: 10px;
  transition: all 2s linear;
  position: fixed;
}
.a:hover {
  transform:scale(0.7);
}

This CSS function will enlarge the div element while maintaining its center. Refer to this link for a more detailed explanation.

Answer 4

If you're searching for a specific function, it's the scale() one. To meet your needs, the ideal approach is to trigger the scale() function when hovering over the target element like so:

.a {
  width: 350px;
  height: 350px;
  background: #000;
  margin: 10px;
  transition: all 2s linear;
  position: fixed;
}
.a:hover {
  transform:scale(0.7);
}

This CSS function will enlarge the div element while maintaining its center. Refer to this link for a more detailed explanation.

Answer 5

Answer №3

Implement the :hover effect using the pseudoclass.

.a:hover {
   width: 300px;
   height: 300px;
}

The transition on element .a will function as intended.

Answer 6

Implement the :hover effect using the pseudoclass.

.a:hover {
   width: 300px;
   height: 300px;
}

The transition on element .a will function as intended.

Animating an element from its center with pure CSS

Answer №1

Answer №2

Answer №3

Similar questions

Navigational strip within the grid

Unable to assign a className to a personalized React component - troubleshooting needed!

The XmlUtil.serialize(root) function is converting empty tags into self-closing tags

Stop capturing mouse and keyboard events within a specific div element on all web browsers

The error message indicates a validation issue with the img tag: The attribute src has an invalid value, as it uses a backslash () as a path segment delimiter instead of

Transform black and white image to vibrant colors and add various hover effects

Error: Unexpected syntax error occurred due to the use of '===' operator

CSS unable to modify the color of the switch in HTML code

Centering text underneath bootstrap image design

Using Radio button to access local HTML pages - A step-by-step guide

"Create a New Browser Tab When User Interacts with a Hyperlink leading to an External Website

Retrieve data from an ASP.NET Web API endpoint utilizing AngularJS for seamless file extraction

Unable to load the CSS file

Tips for utilizing append and remove to modify HTML forms

Assign the chosen option value to a PHP variable for storage

Top method for uploading outside materials

Add CSS styling to a section of a canvas

Tips for transferring PHP variable from a drop down menu

Setting the height of the text area in a three-column layout cannot be achieved using a percentage value

Having difficulty modifying the width of the BODY element using CSS