CSS & jQuery - append value to a property without replacing existing value

Question

I have a few cards that all have different-colored background linear gradients. On mouse over, I want to overlay a semi-opaque white background so I can put some popup text, while preserving the original gradient underneath. How can I accomplish this in an automated way?

I don't want to do the brute force way: add a :hover in each individual card's CSS and add a second linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)) after the initial linear-gradient(actual card color).

I'd like to use jQuery, but I can't get it to append to the background property. It only replaces with a new value.

Fiddle here or code below:

<div class="card card--1">
  <p>
    Some text
  </p>
</div>
<div class="card card--2">
  <p>
    More text
  </p>
</div>
<div class="card card--3">
  <p>
    Even more text
  </p>
</div>

    .card {
      height: 50px;
      border-radius: 15px;
      position: relative;
      transition: 0.1s all;
      transform: translateY(0px);
      text-align: center;
        
      &--1 {
        background: linear-gradient(0deg, #ffd66e, #ffeab2, #c8f8ff 80%);
      }
    
      &--2 {
        background: linear-gradient(11deg, #f5ac9c, #ffefe3);
      }
    
      &--3 {
        background: linear-gradient(18deg, #693b10, #fff5d3);
      }
    }

$(document).ready(function() {
  $(".card").mouseenter(function() {
    $(this).css("background", "linear-gradient(0deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3))")
  })
});

Ger · Accepted Answer · 2021-04-13 08:24:37Z

1

You don't need to add hover to each individual card. You can just add it once to .card.

Remove the JQ code and add the following to the CSS and it works.

.card:hover
{
  background: none;
  background-color: rgba(255, 255, 255, 0.3);
}

answered Apr 13, 2021 at 8:24

Ger

1127 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ger Over a year ago

Another more complicated way to do it with JQ would be to put 2 more divs in each card. One div for the normal bg color, and another div for the rollover. When you rollover the .card div it hides (or puts the opacity at 0) for div#1 and shows div#2, and roll out it does the opposite.

ezeYaniv Over a year ago

Are you sure this works the way I'm asking? When I try your approach, it doesn't maintain the original linear-gradient behind the new overlay. I don't want to completely replace the color with a new color, I want to overlay.

ezeYaniv Over a year ago

This comment you wrote got the closest to actually answering the question - I implemented a similar solution but using opacity: 0.5 instead of switching from 0 to 1.

Ger · Accepted Answer · 2021-04-13 08:44:14Z

0

Another way

Change JQ to:

$(document).ready(function() {

  $(".card").mouseenter(function() {
  $(this).addClass( "cardRollover" );
  })
  
    $(".card").mouseleave(function() {
  $(this).removeClass( "cardRollover" );
  })
  
});

Add to CSS:

.cardRollover{
   background: none;
  background-color: rgba(255, 255, 255, 0.3);
}

answered Apr 13, 2021 at 8:44

Ger

1127 bronze badges

1 Comment

ezeYaniv Over a year ago

I appreciate you trying, but this answer, like your other one, doesn't answer my question. This completely replaces the background color with a new color. I want to overlay a color over the original linear-gradient.

ezeYaniv · Accepted Answer · 2021-04-13 16:57:36Z

I haven't found any way of appending linear-gradients to an existing background: linear-gradient, so I implemented a workaround - I added an overlay div that only shows on hover, with opacity: 0.5 and visibility: hidden.

<div class="card card--1">
  <div class="card__hover"></div>
  <p>
    Some text
  </p>
</div>
<div class="card card--2">
  <div class="card__hover"></div>
  <p>
    More text
  </p>
</div>
<div class="card card--3">
  <div class="card__hover"></div>
  <p>
    Even more text
  </p>
</div>

.card {
  height: 50px;
  border-radius: 15px;
  position: relative;
  transition: 0.1s all;
  transform: translateY(0px);
  text-align: center;

  &:not(:first-child) {
    margin-top: 4rem;
  }

  &--1 {
    background: linear-gradient(0deg, #ffd66e, #ffeab2, #c8f8ff 80%);
  }

  &--2 {
    background: linear-gradient(11deg, #f5ac9c, #ffefe3);
  }

  &--3 {
    background: linear-gradient(18deg, #693b10, #fff5d3);
  }
}

.card__hover {
  position: absolute;
        width: 100%;
        height: 100%;
        background-color: rgba(255, 255, 255, 0.5);
        border-radius: 15px;
        visibility: hidden;
}

$(document).ready(function() {
  $(".card").mouseenter(function() {
    $(this).children(".card__hover").css("visibility", "visible")
  })
  $(".card").mouseleave(function() {
    $(this).children(".card__hover").css("visibility", "hidden")
  })
});

Collectives™ on Stack Overflow

CSS & jQuery - append value to a property without replacing existing value

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related