CSS opacity property does not work on Chrome

user_13159004 0
Viewed 1645

It works on Firefox but on Chrome doesn't. What I'm trying to do is that a card applies the opacity property when hovering on that card.

HTML file:

<div class="col mb-4">
        <a class="textoc"href="user/terapeuticos">
          <div class="card carta">
          
            <img src="../../../assets/imagenes/Fondo1.jpg" class="card-img-top" alt="...">
            <div class="card-body">
              <h5 class="card-title subtitulo2 text-center rounded">Masajes terapéuticos</h5>
              <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
            </div>
          </div>

        </a>
        
</div>

CSS file:

.textoc:link
{
  
  opacity: 1!important;
  text-decoration: none;
  color:black;
  background-color: rgba(255, 255, 255, 1);
  
}

.textoc:hover
{
  opacity: 0.5!important;
  background-color: rgba(255, 255, 255, 0.5);
  
}

.textoc:visited
{
  color: black;
  
}

.carta
{
  border-style: solid;
  border-color: #F3329F;
  border-width: 2px;
  
}

.subtitulo2
{
  
  color:#F3329F;
  border-style: solid;
  border-color: #F3329F;
  border-width: 1px;
}

I tried to solve it by adding background-color: rgba(255, 255, 255, 0.5); but nothing changed.

Pd: I'm using Boostrap 4 framework.

bootstrap-4 google-chrome css html
3 Answers

I think I see what the problem is. Instead of changing the opacity of the a(.textoc) you need to change the opacity of the img that is the child of that a.

.textoc img:hover{
 opacity: 0.5;
 background-color: rgba(255, 255, 255, 0.5)}
user_106090060

You need to target the .card within the .textoc:hover

.textoc:hover .card {
  opacity: 0.5;
}

Here's a jsfiddle

user_61273930

You need to set display: block on .textoc for Chrome to be able to pick up the changes of opacity. By default in Chrome anchor tag is set to inline.

Just suggestion that you don't need !important to achieve something in CSS, it consider bad practice.

user_28365640
Related