CSS Transition opacity not effecting with rgba color

Question

Why opacity transition is not effecting on hover, if i just put opacity separately as .4 in text class it works, but it doesn't work with rgba opacity.

ul {
  list-style:none
}

li {
  padding-bottom:15px;
 }
.text {
  color:rgba(13,19,13,.4); // here is initial opacity .4
  transition: opacity 2s cubic-bezier(.4,1,.2,1);
}

.text:hover {
  opacity:.9
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  
  <ul>
    <li><a href="#" /><span class="text">Item</span></li>
    <li><a href="#" /><span class="text">Item</span></li>
    <li><a href="#" /><span class="text">Item</span></li>
    <li><a href="#" /><span class="text">Item</span></li>
    <li><a href="#" /><span class="text">Item</span></li>

</ul>
</body>
</html>

There is a difference between color opacity and opacity you are mixing them — Awais, Apr 02 '20 at 05:42

score 1 · Accepted Answer · answered Apr 02 '20 at 05:46

You need to set color for transition, once you change opacity within color attribute

ul {
  list-style:none
}

li {
  padding-bottom:15px;
  font-size: 2em;
 }
.text {
  color:rgba(13,19,13,.4);
  transition: color 2s  cubic-bezier(.4,1,.2,1);
}

.text:hover {
  color: rgba(13,119,13,.9);
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  
  <ul>
    <li><a href=""><span class="text">Item</span></a></li>
    <li><a href=""><span class="text">Item</span></a></li>
    <li><a href=""><span class="text">Item</span></a></li>
    <li><a href=""><span class="text">Item</span></a></li>
    <li><a href=""><span class="text">Item</span></a></li>

</ul>
</body>
</html>

Ferin Patel · Answer 2 · 2020-04-02T05:48:19.250

0

Here is the solution, in .text class give seperate properety for opacity.

ul {
  list-style:none
}

li {
  padding-bottom:15px;
 }
.text {
  color:rgba(13,19,13,0.4);
  transition: opacity 2s cubic-bezier(.4,1,.2,1);
}

.text:hover {
  cursor:pointer;
  color:rgba(13,19,13,0.9);
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  
  <ul>
    <li><href=""a /><span class="text">Item</span></li>
    <li><href=""a /><span class="text">Item</span></li>
    <li><href=""a /><span class="text">Item</span></li>
    <li><href=""a /><span class="text">Item</span></li>
    <li><href=""a /><span class="text">Item</span></li>

</ul>
</body>
</html>

edited Apr 02 '20 at 05:48

answered Apr 02 '20 at 05:44

Ferin Patel

3,424
2
17
49

Thank you for answer but, i am saying this works i have already mentioned in my question, i want why it is not working with rgba opacity. – jsduniya Apr 02 '20 at 05:47
I have edited my solution – Ferin Patel Apr 02 '20 at 05:48
I won't work if you give color opacity in text class and change element opacity in .hover state – Ferin Patel Apr 02 '20 at 05:49
So you have to use any of method shown in my snippets above – Ferin Patel Apr 02 '20 at 05:50

Awais · Answer 3 · 2020-04-02T06:02:27.903

Using opacity only rather then color opacity

ul {
  list-style: none
}

li {
  padding-bottom: 15px;
}

.text {
  opacity: .4;
  transition: opacity 2s cubic-bezier(.4, 1, .2, 1);
}

.text:hover {
  opacity: .9
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>

  <ul>
    <li>
      <href="" a /><span class="text">Item</span></li>
    <li>
      <href="" a /><span class="text">Item</span></li>
    <li>
      <href="" a /><span class="text">Item</span></li>
    <li>
      <href="" a /><span class="text">Item</span></li>
    <li>
      <href="" a /><span class="text">Item</span></li>

  </ul>
</body>

</html>

Using color opacity

ul {
  list-style: none
}

li {
  padding-bottom: 15px;
}

.text {
  color: rgba(13, 19, 13, .4);
  transition: color 2s cubic-bezier(.4, 1, .2, 1);
}

.text:hover {
  color: rgba(13, 19, 13, .9);
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>

  <ul>
    <li>
      <href="" a /><span class="text">Item</span></li>
    <li>
      <href="" a /><span class="text">Item</span></li>
    <li>
      <href="" a /><span class="text">Item</span></li>
    <li>
      <href="" a /><span class="text">Item</span></li>
    <li>
      <href="" a /><span class="text">Item</span></li>

  </ul>
</body>

</html>

Looks your demo not working, i don't see any transition effect on hover. — jsduniya, Apr 02 '20 at 05:51
@jsduniya Sorry my bad did't remember to change opacity transition to color in color rgba hover case, Update my ans please check — Awais, Apr 02 '20 at 06:03

score 0 · Answer 4 · answered Apr 02 '20 at 05:52

use the color property on transition and on :hover use color:rgba(13,19,13,0.9);

ul {
  list-style:none
}

li {
  padding-bottom:15px;
 }
.text {
  color:rgba(13,19,13,0.4);
  transition: color 2s cubic-bezier(.4,1,.2,1);
}

.text:hover {
  color:rgba(13,19,13,0.9);
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  
  <ul>
    <li><a href="#" /><span class="text">Item</span></li>
    <li><a href="#" /><span class="text">Item</span></li>
    <li><a href="#" /><span class="text">Item</span></li>
    <li><a href="#" /><span class="text">Item</span></li>
    <li><a href="#" /><span class="text">Item</span></li>

</ul>
</body>
</html>

CSS Transition opacity not effecting with rgba color

4 Answers4