Enhancing elements with CSS by adding transformations and box shadows upon hovering

My card component using material UI has a hover effect with a transforming animation, as well as a shadow that should appear on the card. However, I am facing an issue where the box-shadow appears on the box before the transformation, creating white space between the transformed card and the shadow. How can this be resolved?

const CardStyle = styled(Card)`
  background: red;
  transition: transform 50ms;
  &:hover {
    transform: scale(1.02) perspective(0px);
    box-shadow: ${({ theme }) => theme.shadows[4]};
  }
`;

Another way to achieve the same output:

:hover {
  transform: scale(1.02) perspective(0px);
  box-shadow: 4px 4px 4px rgba(60, 60, 93, 0.33)
}

Answer №1

For a smooth effect on your box-shadow, consider adding a transition.

section {
  height: 8rem;
  width: 8rem;
  margin: 2rem auto;
  border: blue 5px dotted;
  background: yellow;
  transition: transform .3s, box-shadow .8s;
}

section:hover {
  transform: scale(1.05) perspective(0px);
  box-shadow: 0 15px 10px rgba(255,255,0,.9);
}
<section></section>

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

Bootstrap 4 input fields extend past padding boundaries

I have created a basic form using the following code: <div class="container"> <div class="jumbotron" style="width:100%"> <h1> ConfigTool Web Interface </h1> <p> Edit the con ...

Having trouble locating the CSS and JavaScript files within my Spring Maven project

I have a Spring framework application with a Maven project. In addition, I have CSS and JavaScript files under the WEB-INF folder. When attempting to link the JavaScript and CSS files like this: <link rel="stylesheet" href="../allDesign/js/vendor/anims ...

Tips for adjusting the border-bottom line in real-time as text is selected from a dropdown menu

$('#select').on('change', function() { name = $('#select :selected').val(); //some code here }); . bdr-txtline { border-bottom: 1px solid black; } <div class="container"> <div class="row"> <div ...

Placing an image within a table row that spans multiple rows to maintain center alignment in relation to other rows that are not span

Having trouble with centering the image in an email signature when viewed in GMail. The layout works fine in JSBin but appears uneven in GMail. Any suggestions on how to make sure it stays centered? Check out the code here <table cellspacing="0" cel ...

Tips for implementing an image as a background in AngularJS

Struggling with a Dilemma: This issue has been driving me insane for the past three days... I am eager to utilize an angularJS variable as a background image without relying on a directive. My objective is to load images of any shape (square, rectangle, ...

Centered at the bottom of the screen lies a Bootstrap button

As a beginner with bootstrap, I am currently exploring new concepts and experimenting with different features. One thing I am attempting is to center a bootstrap button at the bottom of the screen. Here is my current code: .bottom-center { position: a ...

What is the best way to ensure the header spans the entire width of a webpage using the display: flex; property and flex-direction: column styling within the body element

Click here for the CSS code snippet Hello everyone, this is my very first query on Stack Overflow. I know it might be a simple question but it's my first time posting here so kindly bear with me. Below is the CSS code snippet provided: *{ ...

Is there a child missing? If so, add a class

I need to add the class span.toggle if the parent element of li does not have a child ul element. click here to view on codepen Snippet of HTML: <html lang="en"> <head> <meta charset="UTF-8> <title>No Title</title>& ...

Incorporating a MUI5 theme into a custom emotion-themed application

I'm currently working on an application that incorporates multiple themes. One of these is a Material UI theme specifically designed for MUI v4, while the other is an emotion theme used by non-MUI components. In my attempt to transition to MUI v5, I ...

Some CSS features might not work properly when using Vuetify alongside Vue.js and Webpack

I believe the issue may stem from my inability to correctly import the JS file for Vuetify, but I haven't been able to pinpoint any errors. It seems that certain CSS functionalities of Vuetify, like list highlight events, are not working in my applica ...

Align the asp.net content generated towards the left side

I am looking to optimize the layout of my asp.net code by shifting the content on all pages to the left side of the screen for better efficiency. Despite my efforts, I have been unable to find a suitable CSS solution that works universally across all view ...

Is there a way to modify the color of multiple disabled select fields in Internet Explorer?

After experimenting with various methods to change the color of disabled select items, I found success in Chrome but hit a roadblock in IE. Despite trying ::ms-value, the red color was applied to all disabled select fields, which was not the desired outcom ...

Positioning the button to the right of the Login option in the navigation bar

I'm trying to design a navigation menu with a Login link and a "Try for Free" button on the right side of the webpage. But I'm struggling with aligning the button next to the Login link. This is how it looks currently: https://i.stack.imgur.com/ ...

The side menu in Bootstrap dropdown experiences a one-time functionality

When navigating through a responsive top menu with Bootstrap, everything works seamlessly - from toggling the menu to dropdown functionality. However, I encountered an issue with the side menu as nav-pills used to select tab-panes. <div class="containe ...

Material UI categorizing iPads with a width of 768px and a height of 1024px as belonging to the small

I am facing a challenge with the layout of my app on different screen sizes. To address this issue, I am utilizing Material UI's breakpoints to control the layout based on the screen size. According to the documentation, screens categorized as small ...

Concentrating on Popper triggering upon MouseOver

I am having an issue with my Popper, which is activated on mouseOver and deactivated on mouseOut. Within the Popper, there is a link for users to interact with. The problem arises when the Popper disappears as soon as I move out of it, preventing the use ...

Is it possible to achieve uniform column width in a MaterialUI Table by using Span?

I'm currently working with the Table component in Material UI to create a data table. One challenge I am facing is trying to ensure that all columns have equal widths in my datatable. The code snippet I am experimenting with looks like this: <Table ...

Creating a simple bootstrap code for developing plugins in Wordpress

After successfully coding in Brackets with the Theseus plugin on my local machine, I encountered a problem when attempting to transfer my code to a Wordpress installation. The transition from Brackets to Wordpress seems far more complicated than expected. ...

Unable to apply the responsive Tailwind class to the Material-UI component

How can I add top margin to my button only on mobile devices? import { Button } from '@mui/material'; <Button type="submit" variant="contained" color="primary" className="w-full md:w-auto sm:mt-4& ...

CSS - the option element is not appearing when using display:block

I am facing an issue with a select tag and its options. I have used CSS to hide all the options except for the last one which is set to display block. However, the last option is not showing up. Could this be due to the large number of options present? &l ...