Attempting to adjust the inner text so that it transitions to white when hovering

I am struggling to change the color of the inner text to white when hovering. I tried using ::before:hover but even though the entire div changes, the text remains black. What could be causing my code not to work?

    .feature {
    .feature-rect {
        position: relative;
        height: 180px;
        width: 270px;
        border-radius: 20px;
        background-color: $light-color;
        @include box-shadow($form-shadow);
        text-align: center;
        margin-bottom: 30px;
        padding: 20px;
        z-index: 1;
        display: block;
      }
      
      .feature-rect::before {
        position: absolute;
        content: "";
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: linear-gradient(180deg, #232153 0%, #6F2365 100%);
        z-index: -1;
        transition: opacity 0.5s linear;
        opacity: 0;
        border-radius: 20px;
        display: block;
        color: #fff;
        cursor: pointer;
        
      }
      .feature-rect:hover::before {
        opacity: 1;
      } 
      .feature-rect:hover{
        color:#fff;
      } 
    } 
     <div class="feature">
       <div class="feature-rect">
       <img src="{{ config('static.images') }}images/card_feature_icon_2.png">
       <div class="title-light-color-font-s mt-10">Lorem Ipsome</div>
       <div class="title-content-font-xs mt-10">Lorem Ipsome Lorem Ipsome Lorem Ipsome Lorem Ipsome</div>
       </div>
     </div>

htmlcsssass

Answer №1

.feature-rect {
    position: relative;
    height: 180px;
    width: 270px;
    border-radius: 20px;
    background-color: $light-color;
    @include box-shadow($form-shadow);
    text-align: center;
    margin-bottom: 30px;
    padding: 20px;
    z-index: 1;
    display: block;
  }

  .feature-rect::before {
    position: absolute;
    content: "";
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(180deg, #232153 0%, #6F2365 100%);
    z-index: -1;
    transition: opacity 0.5s linear;
    opacity: 0;
    border-radius: 20px;
    display: block;
    color: #fff;
    cursor: pointer;

  }
  .feature-rect:hover::before {
    opacity: 1;
  } 
  .feature-rect:hover{
    color:#fff;
  } 
  
  
  
  .feature-rect:hover div{
   color:#fff !important;
  } 
 <div class="feature">
   <div class="feature-rect">
   <img src="{{ config('static.images') }}images/card_feature_icon_2.png">
   <div class="title-light-color-font-s mt-10">Lorem Ipsome</div>
   <div class="title-content-font-xs mt-10">Lorem Ipsome Lorem Ipsome Lorem Ipsome Lorem Ipsome</div>
   </div>
 </div>

Answer №2

Nesting in CSS, which involves using curly braces inside other curly braces, is not a native feature of CSS itself. Instead, it is a feature found in CSS pre-processors like Sass and Less. To achieve nesting in regular CSS, you will need to expand the code structure accordingly:

.feature .feature-rect {
  position: relative;
  height: 180px;
  width: 270px;
  border-radius: 20px;
  background-color: $light-color;
  @include box-shadow($form-shadow);
  text-align: center;
  margin-bottom: 30px;
  padding: 20px;
  z-index: 1;
  display: block;
}

.feature .feature-rect::before {
  position: absolute;
  content: "";
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(180deg, #232153 0%, #6F2365 100%);
  z-index: -1;
  transition: opacity 0.5s linear;
  opacity: 0;
  border-radius: 20px;
  display: block;
  color: #fff;
  cursor: pointer;
}

.feature .feature-rect:hover::before {
  opacity: 1;
}

.feature .feature-rect:hover{
  color:#fff;
} 
<div class="feature">
       <div class="feature-rect">
       <img src="{{ config('static.images') }}images/card_feature_icon_2.png">
       <div class="title-light-color-font-s mt-10">Lorem Ipsome</div>
       <div class="title-content-font-xs mt-10">Lorem Ipsome Lorem Ipsome Lorem Ipsome Lorem Ipsome</div>
       </div>
     </div>

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

Using Javascript/JQuery to apply pixel values in CSS styling

Recently, I've come across a discrepancy between two different ways of accessing CSS properties in jQuery: <foo>.css('marginTop') (which I always assumed was the standard notation) and <foo>.css('margin-top') (which ...

javascriptjquerycss

Creating a responsive card design with Material UI

Creating a responsive card layout for mobile applications is my current challenge const styles = { edit: { width: "40%", marginLeft: 270, background: "#76ff03" }, add: { width: "100%", background: "#18ffff", size: "large" ...

cssmaterial-ui

Using Javascript to retrieve the childNode

I have encountered a challenge that I am struggling to overcome. My issue involves utilizing a dynamically generated table with 4 columns: a checkbox, text values, and a hidden input. echo "<tr><td><div class='input-containerh'> ...

javascripthtml

When clicking on an image, it triggers a unique PHP query, however the results obtained are not accurate

Greetings, I have a search feature on my website. When a user inputs a keyword and clicks the search button, it directs them to jobsearch.php which then displays a list of relevant jobs from the MySQL database. The functionality is working perfectly. Howe ...

phphtmlmysql

angularjs identifies the ng-click and href attributes within my event

md-list md-list-item.md-2-line ng-repeat="document in ctrl.documents" div.md-list-item-text ng-click="ctrl.getDocument($event, document)" span ng-bind-html="(document.content | trustedHtml)" Hey there, I've encountered an issue with my md ...

javascripthtmlangularjs

Failure of Outlook 2007, 2010, and 2013 to Recognize Conditional CSS

I am currently working on a design for a responsive email. The layout is functioning well in all email clients tested using Litmus, except for Outlook 07/10/13 due to its challenging word rendering engine versions. To ensure correct display across differen ...

htmlcssoutlookhtml-emailconditional-statements

Javascript lags behind in utilizing Regex compared to PHP

My regex string is used to extract a value from CSS code like this: body { background: #000; } /* drapeDecalage: 10px */ I am trying to parse the commented drapeDecalage value. I have created a regex expression for that: (?<=\/\* drape ...

javascriptphpcssregex

Show the background color on each list element that is being created from the ng-repeat directive

This code dynamically displays a list of li's with images and text. <ul class="presale"> <li ng-repeat="(k,v) in value | groupBy : 'presales_name'" ng-click="showData(k.split(' ').join('-').r ...

jqueryhtmlcssangularjs

Is there a way to include text beneath the navigation bar and other elements on the page?

I am stuck trying to add some text below my header and navigation bar. Here is the code I've been working with: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta htt ...

htmlcsstextheadernav

The CSS Animation isn't Showing Up

I attempted to add an animation to a specific group inside an SVG element. Unfortunately, I noticed that the animation is either not being applied or it is getting overridden, as indicated by the strike through in Chrome Developer Tools. The cause of this ...

cssanimationsvg

Transform Arabic numerals into Roman numerals using only CSS styling

Currently developing a custom theme for a website and faced with the restriction of not being able to use Javascript. My goal is to translate certain numbers into Roman numerals. I attempted the following: .score:before { counter-reset: mycounter att ...

htmlcssroman-numeralscss-contentcss-counter

enclosing text in a div container in WordPress

My WordPress website is built on the Bootstrap framework and includes content with images and text. I'm attempting to encase the text content in row and col-md-10 tags, while leaving the images as they are. This content is pulled into my single.php p ...

phpjqueryhtmlcsswordpress

Is it possible to create a carousel using PHP and MySQL?

Is it really impossible? I'm determined to pull images from a MySQL database and create a carousel similar to the one showcased in this link: . However, my goal is to achieve this using only HTML, CSS, PHP, and MySQL. ...

phphtmlmysqlcsscarousel

What is the best way to adjust the height of a side-panel to match the dynamic

I'm facing an issue where my side-panel height is not expanding along with the content of the div. While specifying a height of 100% works well for mobile view, I encounter problems in desktop view as the sidebar's height remains fixed. I want th ...

htmlcssbootstrap-4css-position

Styling the navigation bar using CSS

Currently working on establishing a top menu bar similar to StackOverflow, but with a fixed position for my webpage. Check out the JSFIDDLE Demo here Encountering extra space on the left and top of the menu bar. Seeking advice on how to eliminate this ex ...

htmlcssmenu

Is there a way for me to produce a random choice depending on the option selected by the user in the <select> menu?

As a beginner in JavaScript, I am attempting to create a feature where users can select a genre from a dropdown list and receive a random recommendation from that genre displayed on the screen. In essence, my goal is to allow users to get a random suggest ...

javascripthtmllistarraylist

Error with HTML form validation

After clicking the "Send Request" button, the query string ?req_flag=0 is not appearing in the URL. What could be causing this issue? I want my URL to look like this: localhost/flavourr/send_req.php?req_flag=0&f_e_mail_add=value <pre> <form ...

phphtmlcssxhtmltextarea

Updating a component property value through the template

Consider the code snippet below: import { Component, OnInit,Input } from '@angular/core'; @Component({ selector: 'topic-details', templateUrl: './detailpane.component.html', styleUrls: ['./detailpane.component.scs ...

javascripthtmlangular

Struggles with ajax and JavaScript arise when attempting to tally up grades

Currently, I am facing an issue with my JavaScript. The problem arises when trying to calculate marks for each correctly chosen answer based on information from the database. If an incorrect answer is selected, the marks are set to '0', otherwise ...

javascriptjqueryhtmlajax

Toggle the input box by clicking the button

How do I show or hide the input box (blue square) when I click the search button (red square)? Link Image I attempted to create the transition in CSS and also experimented with JavaScript, but the JavaScript part confused me. Here is what I tried: $(" ...

javascripthtmlcsstransition