What is the process for implementing transitions using SASS?

When the pointer hovers over it, the transition effect kicks in smoothly. However, it reverts back to its original size abruptly when the mouse pointer is no longer hovering over it. What I aim for is for the cardLink to scale smoothly to .95 when hovered over, and then smoothly scale back to its normal size. I am currently utilizing React and Sass for this.

.homepage{
        &__cardLink {
            transition: transform .9s linear; 
            text-decoration: none;
            
            @include tablet {
              height: 100%;
            }
        
            :hover {
              box-shadow: 1px 2px 9px 7px #8e8d8a;
              transform: scale(0.95);
              transition: .75s;
             
            }
          }
        }
        

Answer №1

Make sure to include the transform property in the initial class as well!

.homepage {
  &__cardLink {
    transition: transform .9s linear; 
    transform: scale(1);
    text-decoration: none;
    
    @include tablet {
      height: 100%;
    }

    :hover {
      box-shadow: 1px 2px 9px 7px #8e8d8a;
      transform: scale(0.95);
    }
  }
}

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

ReactJS and Webpack: Troubleshooting image display issues

I am having trouble loading a background image in my component. Despite using require('imagepath') to load the image, it gets changed to url('imagepath') during build. However, when I try to load it within my styles that are being added ...

The inline feature of the Bootstrap input group addon is not being utilized

Check out my code snippet here: http://www.bootply.com/iR1SvOyEGH <form> <div class="form-group"> <label for="inputEmail">Company Name</label> <input type="text" class="form-control"> <span class="input-gro ...

Why does my NextJS performance grade fluctuate on web.dev?

We are experiencing inconsistent performance scores on web.dev with our NextJS application. Initially, we had a score of around 30 which prompted us to start optimizing. Now, our Lighthouse score locally fluctuates around 90 with a margin of 5. However, wh ...

Header element not keeping the navbar at the bottom

My goal is to attach this navigation bar to the bottom of a header, but it's sticking to the top instead. I want the navigation to remain at the bottom of the header even when the user scrolls down. Currently, both the header and navigation are set t ...

Issue detected in this React flow: the maximum update depth has been exceeded

I am working with the following function: compareProducts = (company) => { console.log(company.productList) let headerSet = false; for (let i in company.productList) { //case1 : looking for data in an array, if found, setState and exi ...

"Internet Explorer: Unleashing the Magic of Card Fl

I'm encountering a problem that I can't seem to solve. Everything works perfectly in Chrome, FF, Safari, etc., but in Internet Explorer, I see the image on the front side instead of the text on the backside. Can anyone please assist me with this ...

Buttons containing two lines of text appear bigger compared to those with only one line of text, but it is essential for all buttons to be consistent in size with the single line buttons

I am facing an issue with the buttons on my website, as they seem to resize based on the amount of text present. When there are 2 lines of text, the buttons appear larger compared to those with just one line. How can I rectify this situation? Although thi ...

What could be causing this error in a new Next.js application?

After multiple attempts, my frustration and disappointment in myself are causing a headache. Can someone please assist me? I am trying to create an app using the following command: npx create-next-app@latest --ts Immediately after running next dev, I enco ...

Tips for avoiding the influence of the parent div's opacity on child divs within a Primeng Carousel

I'm struggling to find a solution to stop the "opacity" effect of the parent container from affecting the child containers. In my code, I want the opacity not to impact the buttons within the elements. I have tried using "radial-gradient" for multipl ...

Creating the appearance of a white sheet of paper on a computer screen

I appreciate all the comments provided earlier. Looking back, I realize I should have been more thorough in my explanation. Hopefully, the updated version will make things clearer. On a broad level, my goal is to create a digital screen background that re ...

Designing a layout for a chat application that is structured from the bottom up

I'm currently in the process of designing a web application for a chat platform. I have access to an API that provides a list of messages: chatsite.com/api/thread/1/messages/ [ { "id": 2, "sender": { "id": 2, ...

What is the best way to incorporate multiple conditions within a React component?

When working in React, I have the ability to conditionally render any div using the following code snippet: {hasContent && <span>{value}</span> } Recently, I attempted to include two conditions as follows: {hasContent || hasDesc &am ...

Trouble toggling Reactstrap navbar in my TypeScript project using NextJS

I recently integrated Reactstrap into my NextJS TypeScript project and encountered an issue with the Navbar component. Despite following the example from the Reactstrap documentation, the mobile toggle menu does not open when clicked. Additionally, none of ...

What should I do about the error message from Vercel that is preventing my form component from being accepted?

I am struggling to fix the issue with Vercel continually giving me an error. No matter what I try, it refuses to accept my form component. Error message: Failed to compile. ./pages/createCards/index.js Module not found: Can't resolve '@/compone ...

Regular expression patterns for authenticating and verifying passwords

Currently, I am working on a JavaScript program to validate passwords using regex. Here are the requirements: The password must consist of at least seven characters. It should include at least one of the following: an uppercase letter (A-Z) a lowercas ...

Efficient method for a component to work seamlessly with both React 17 and the latest version React 18

With the introduction of React 18, there is a new method for manually rendering a component. Instead of using import ReactDOM from 'react-dom'; ReactDOM.render(component, container) it is now required to use import { createRoot } from 'reac ...

What is the best way to activate materialise pop-up menus in a React application?

Looking to enhance my React app by adding a NavBar with dropdown functionality. Here's the code snippet: <ul id="dropdown1" className="dropdown-content"> <li><NavLink to="/create">Create lesson ...

Elevated Floating Button

https://i.sstatic.net/jMT5g.png I am attempting to create a vertical floating button for my website, but the text is displaying outside of the box. CSS #feedback { height: 104px; width: 104px; position: fixed; top: 40%; z-index: 999; tr ...

Error message: ReactJs encountered a TypeError stating that categories.map is not a function

Encountered the following issue: Error: TypeError: categories.map is not a function Snippet from App.js: export default function Header() { const [categories, setCategories] = useState([]); useEffect(() => { const loadCategor ...

The error message "Next.js encountered an issue with accessing an undefined property 'xx'"

Currently, I am working on developing a straightforward quiz application by utilizing react context and a multi-step form. Below is the snippet of my code responsible for managing form data: import { useState, createContext, useContext } from "react&q ...