Eu tenho o seguinte código 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>
A partir da classe produtoDesabilitado
eu insiro um opacity
de 0.5 na li
da seguinte forma:
.item.produtoDesabilitado {
opacity: 0.5 !important;
}
Porém, o span
com o id="prodIndisponivel"
não pode "pegar" essa opacidade. Juntamente com isso tem outro porém, a imagem que utilizo é .jpg
e não tem como alterar ela para .png
para usar um background
com opacidade para dar esse efeito.