Gradient transition effect changing background color from bottom to top

I am facing an issue where I have a block and I want the background color to animate from bottom to top on hover. Can you please help me identify what is causing this problem? Your assistance is greatly appreciated.

.right-block--wrapper {
    background: #fff none repeat scroll 0 0;
    box-shadow: 0 0 5px 1px rgba(50, 50, 50, 0.75);
    display: inline-block;
    margin-left: -30px;
    margin-top: 9px;
    padding: 15px 19px 12px;
    width: 100%;
    max-width: 429px;
    position: relative;
    z-index: 2;
}
.right-block--wrapper:before {
    background:#474747;
    bottom: 0;
    content: "";
    left: 0;
    position:
    absolute;
    right: 0;
    top: 0;
    transform:scaleY(0);
    transform-origin: 50% 100%;
    transition-duration: 0.3s;
    transition-property: transform;
    transition-timing-function: ease-out;
    z-index: -1;
}
.right-block--wrapper:hover {
    background: #474747;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="right-block--wrapper">
     <p>Demo Content</p>               
</div><!-- right-block--wrapper -->

javascripthtmlcss

Answer №1

The styles for the ::before pseudo element are not being applied when the .right-block--wrapper element is hovered.

I believe you intended to implement the following:

.right-block--wrapper {
  background: #fff none repeat scroll 0 0;
  box-shadow: 0 0 5px 1px rgba(50, 50, 50, 0.75);
  display: inline-block;
  margin-left: -30px;
  margin-top: 9px;
  padding: 15px 19px 12px;
  width: 100%;
  max-width: 429px;
  position: relative;
  z-index: 2;
}

.right-block--wrapper:before {
  background: #474747;
  bottom: 0;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transform: scaleY(0);
  transform-origin: 50% 100%;
  transition-duration: 0.3s;
  transition-property: transform;
  transition-timing-function: ease-out;
  z-index: -1;
}

.right-block--wrapper:hover:before {
  transform: scale(1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="right-block--wrapper">
  <p>Demo Content</p>
</div>
<!-- right-block--wrapper -->

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 best way to display grouped items horizontally in an ASP.NET ListView?

My ASP ListView currently displays items vertically in columns with GroupItemCount set to 3: A D G B E H C F I Is there a way to adjust the display so that it groups items horizontally in rows like this? A B C D E F G H I This is the ListVi ...

.netasp.netcsslistviewhtml

Navigating and Organizing in Ionic Service Factory

Apologies for the beginner question. I am looking to incorporate filtering and sorting by name on my webpage. However, I have encountered two issues after attempting to implement this functionality using a factory in services.js: When typing a search ter ...

javascripthtmlangularjsionic-framework

How can I generate codegen types using typeDefs?

I have been exploring the capabilities of graphql-codegen to automatically generate TypeScript types from my GraphQL type definitions. However, I encountered an issue where I received the following error message: Failed to load schema from code file " ...

javascriptnode.jstypescriptgraphqlgraphql-codegen

I am interested in delivering a blended, divided response containing JSON and a string using Express

I am currently in the process of integrating ChatGPT into my Node/Express project and I have a specific requirement. I would like to initially send some metadata in JSON format to the client before streaming the response from ChatGPT as it comes in. Every ...

javascriptnode.jsjsonexpresschunking

How can I troubleshoot email validation issues in Vue.js?

<button type="submit" class="register-button" :class="(isDisabled) ? '' : 'selected'" :disabled='isDisabled' v-on:click=" isFirstScreen ...

javascriptvue.js

Design a dynamic advertisement page using HTML and Bootstrap to ensure responsiveness

I am currently working on a marketing project where I want to give clients the ability to customize their landing page with image ads in a layout that looks something like this: -------------------------------------------------------------------------- | ...

htmlresponsive-designbootstrap-4

Is there a way to transform integers into their matching strings within Vue markup?

I have a database table where I retrieve data. The "status" field is used to manage the information in this table. If the status is equal to 1, it indicates "Active." If the status is equal to 2, it signifies "Completed." If the status is equal to 0, it r ...

javascriptjsonlaravelvue.js

Styling Options for Material-UI Tables: Enhancing the Look of Your Table Components

I am working with 'material-ui' and attempting to change the color of a table element based on its value. In the code snippet below, I have tried to make the background color go red if the cell value is "Out of Zone". However, even though the tab ...

htmlcssmaterial-ui

Establishing a class for wp_nav_menu

Is there a way to transform the following code: <ul class="ulStyle"> <li class="liStyle"> <div class="first"> <div class="second"> menu1 </div> </div> </li> </ul> into wp_nav_menu? I'm struggling with ...

phpcsswordpressnavigationhtml-lists

Let's unravel this JavaScript enigma: the code snippet window.confirm = divConfirm(strMessage) awaits

Imagine a scenario where you have an old website with a lot of existing JS code. If a user wants to update all the alert messages to modern, stylish Div-based alerts commonly used in jQuery, YUI, Prototype, etc., there are primarily three types of JS dialo ...

asp.netjavascriptjqueryajax

Python and website submission button without an action attribute

I'm currently working on a Python program that interacts with an online store. So far, I've successfully located the desired item and accessed its page using BeautifulSoup. However, I'm struggling with clicking the "Add to cart" button. Most ...

pythonhtmlbeautifulsoupform-submitrobobrowser

Tips for creating a breakpoint in Sass specifically for a 414px iPhone screen size

For my latest project, I am utilizing sass and looking to incorporate a sass breakpoint or media query. My goal is to have the code execute only if the screen size is 414px or less. Below is my existing code: @include media-breakpoint-down(sm) { .sub-men ...

javascriptphphtmlmysqlcss

What is the best way to determine whether a YouTube video permits embedded playback?

When working with user-generated content, it's important to note that YouTube channels may restrict their videos from being played in an embedded player. In order to provide a better user experience, I need to detect the specific reason why a video ca ...

javascriptyoutubeyoutube-api

Obtaining page information from a frame script in e10s-enabled Firefox: A guide

One of the challenges I'm facing is with my Firefox extension, where a function loads page information using the following code: var title = content.document.title; var url = content.document.location.href; However, with the implementation of multi- ...

javascriptfirefoxfirefox-addone10s

Ways to evenly distribute divs into rows

Greetings if this question has already been inquired about, but my search turned up nothing quite like it. My current setup is as follows: .main{ display: inline-flex; flex-direction: row; } <div class = "main"> <div class="sub-div ...

htmlcssflexbox

HTML & CSS: Modify background rectangle behind text to limit its size within the webpage dimensions

I'm experiencing a unique issue with the current code present in my HTML index file. <div class="titleMessage"> <div class="heading"> <p class="main">NAME HERE</p> <p class="sub">Software Engineer& ...

htmlcsstextbackgroundelement

Reorganizing JSON Information

Currently, I am dealing with a JSON file that contains multiple sets of data structured like this: {"name": ["Adelphi University"], "supp": ["Yes: E, WS"], "ed": ["\u00a0"], "online": ["$40"], "ea": ["12/1"], "mid": ["No"], "rd": ["Rolling"], "recs": ...

javascriptjsonparsingfirebasefirebase-realtime-database

utilizing staggered animations with three.js

I am trying to animate an array of meshes in Three.js, but the properties are not being recognized. tl.staggerFrom(array, 2, {"position.y":-100}) The position.y doesn't change. When I use console.log(array[0].position.y), it gives me the initial val ...

javascriptthree.jstween

Customize the position of the date picker for HTML native <input type="date">

I have implemented the HTML native input date element (found here- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date) and encountered an issue in Safari on macOS where my date picker is being displayed off-screen. How can I resolve this ...

htmlcssinput

Is it necessary to include the Fonts file (which accompanies Bootstrap files) in the HTML document?

As a beginner in HTML, I decided to incorporate Bootstrap into my project. After downloading the necessary files, including css, js, and fonts, I found myself able to easily add the css and js files using the appropriate tags. However, I encountered some c ...

htmlcssbootstrap-4