Opacity only in li and not in span

Asked

Viewed 77 times

2

I have the following code HTML:

<li class="item produtoDesabilitado" id="1028" style="border: 2px solid rgb(255, 255, 255) !important; height: 346px; padding-bottom: 22px;">
    <div class="product-image-wrapper" style="max-width:180px;">
        <a title="Raio de Sol " class="product-image">
            <img id="product-collection-image-1028" src="raio-sol.jpg" alt="Raio de Sol ">
            <span style="" id="prodIndisponivel" class="prodIndisponivel">Produto Indisponível</span>
        </a>
    </div> <!-- end: product-image-wrapper -->
    <h2 class="product-name"><a title="Raio de Sol ">Raio de Sol </a></h2>
    <div class="price-box">
        <span class="regular-price" id="product-price">
        <span class="price">R$46,80</span></span>
    </div>
    </div>
</li>

From the class produtoDesabilitado I insert a opacity of 0.5 in li as follows:

.item.produtoDesabilitado {
    opacity: 0.5 !important;
}

However, the span with the id="prodIndisponivel" cannot "pick up" this opacity. Along with this has another however, the image I use is .jpg and there’s no way to change it to .png to use a background with opacity to give this effect.

html css html5 css3 opacity

  • What input face are you talking about?

  • @Juliohenrique É span, I was wrong when typing the question and edited correcting the error...

  • But what’s right? Apply css to which/which elements?

  • 1

    Do not apply on the LI because if you put opacity on the LI you cannot change the Opacity of anything that is inside it!

  • 1

    On the Image, any image accepts opacity regardless of its extent. If you use it as the background of some element just put the opacity in the element in which the background was applied.

  • @Marcelorafael really did not... I had not understood his need.

  • @Marcelorafael the problem is that the li ball does not get opacity

Show 2 more comments

2 answers

1

Just do this

.produtoDesabilitado {
  background: rgba(255,255,255,.5); /*Caso necessite  aplicar no background*/
  color: rgba(0,0,0,.5);
}
#prodIndisponivel {
  color: black;
}
<li class="item produtoDesabilitado" id="1028" style="border: 2px solid rgb(255, 255, 255) !important; height: 346px; padding-bottom: 22px;">
    <div class="product-image-wrapper" style="max-width:180px;">
        <a title="Raio de Sol " class="product-image">
            <img id="product-collection-image-1028" src="raio-sol.jpg" alt="Raio de Sol ">
            <span style="" id="prodIndisponivel" class="prodIndisponivel">Produto Indisponível</span>
        </a>
    </div> <!-- end: product-image-wrapper -->
    <h2 class="product-name"><a title="Raio de Sol ">Raio de Sol </a></h2>
    <div class="price-box">
        <span class="regular-price" id="product-price">
        <span class="price">R$46,80</span></span>
    </div>
    </div>
</li>

https://jsfiddle.net/thecodermarcelo/4hsdusdL/16/

1


You can apply opacity .5 in all the child elements of div, except where the image and text are "Product Out of stock". For this you use the pseudo-class :not():

Example:

.item.produtoDesabilitado >*:not(.product-image-wrapper),
.item.produtoDesabilitado div .product-image img{
   opacity: .5;
}
<li class="item produtoDesabilitado" id="1028" style="border: 2px solid rgb(255, 255, 255) !important; height: 346px; padding-bottom: 22px;">
    <div class="product-image-wrapper" style="max-width:180px;">
        <a title="Raio de Sol " class="product-image">
            <img height="100" id="product-collection-image-1028" src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg" alt="Raio de Sol ">
            <span style="" id="prodIndisponivel" class="prodIndisponivel">Produto Indisponível</span>
        </a>
    </div> <!-- end: product-image-wrapper -->
    <h2 class="product-name"><a title="Raio de Sol ">Raio de Sol </a></h2>
    <div class="price-box">
        <span class="regular-price" id="product-price">
        <span class="price">R$46,80</span></span>
    </div>
    </div>
</li>

<li class="item" id="1028" style="border: 2px solid rgb(255, 255, 255) !important; height: 346px; padding-bottom: 22px;">
    <div class="product-image-wrapper" style="max-width:180px;">
        <a title="Raio de Sol " class="product-image">
            <img height="100" id="product-collection-image-1028" src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg" alt="Raio de Sol ">
            <span style="" id="" class="">Produto Disponível</span>
        </a>
    </div> <!-- end: product-image-wrapper -->
    <h2 class="product-name"><a title="Raio de Sol ">Raio de Sol </a></h2>
    <div class="price-box">
        <span class="regular-price" id="product-price">
        <span class="price">R$46,80</span></span>
    </div>
    </div>
</li>

I had already answered something similar at this link, only that in the case was blur and not opacity.

  • I’m just having trouble straightening the opacity with respect to the image. Or ends up putting opacity on all images even without the class .produtoDesabilitado or she ends up giving the opacity also in the span

  • That’s right. I hadn’t thought about it. I’ll see...

  • Take a look now.

  • Now it worked out, thank you so much for your help and attention!

Browser other questions tagged html css html5 css3 opacity

You are not signed in. Login or sign up in order to post.