Efeito hover em li

[mruoppolo 14]

Olá, tudo bem?

 

Estou criando uma loja virtual com um tema que estou desenvolvendo para o wordpress, eu preciso criar um efeito hover que coloca meio que uma mascara em cima da imagem do produto. Como segue na imagem abaixo:

 

 

O lado laranja é o efeito hover o outro é a li normal.

 

Como crio este efeito??

 

Obrigado

[AndersonMamede 88]

Eae!

 

O efeito você pode fazer com base nesse:

https://jsfiddle.net/owsLh0vo/

[mruoppolo 14]

Então Anderson, o problema é que estou desenvolvendo um tema em wordpress e ele precisa ter suporte ao woocommerce o grande problema é este, o woocommerce já me dá a saída do html pronto, eu só consigo estilizar as classes que já existem, porque se eu mexer direto nos arquivos do woocommerce para editar o html, quando o cliente atualizar o plugin, vai perder todas as alterações, preciso conseguir fazer sem mexer no html.

 

Moh treta isso aqui :/

[L. Henrique 179]

Marcello,

Você pode usar o modelo do Anderson sem nem mesmo mexer no HTML. É só definir uma classe pra lista, adicionar um pseudo elemento (:after, :before) na imagem e fazer a opacidade aumentar no evento hover. Só um pequeno adendo a resposta do Anderson...

Se você quiser o plus no meio da imagem, é só definir o content pra um valor de um icon font. Exemplo:

content: "/f102";

Caso não possa mexer tanto assim, então o certo seria publicar essa questão na seção de Wordpress.

Abraços!

[mruoppolo 14]

Então seria tipo isso:

 

CSS

ul.products li:hover img:before{
     background-color:#F37021;
     content:"/f102";
}

HTML

<ul class="products">

  <li class="post-69 product type-product status-publish has-post-thumbnail product_cat-ciclo-introdutorio  instock virtual shipping-taxable purchasable product-type-simple">
	<a href="http://localhost/wp-anpei/produto/organizacao-e-planejamento-para-inovacao/" class="woocommerce-LoopProduct-link"><img width="300" height="300" src="http://localhost/wp-anpei/wp-content/uploads/2016/06/entrepreneurship-300x300.jpg" class="attachment-shop_catalog size-shop_catalog wp-post-image" alt="77979722-87e3-430f-b0a1-29933dfa2782" title="77979722-87e3-430f-b0a1-29933dfa2782" srcset="http://localhost/wp-anpei/wp-content/uploads/2016/06/entrepreneurship-150x150.jpg 150w, http://localhost/wp-anpei/wp-content/uploads/2016/06/entrepreneurship-180x180.jpg 180w, http://localhost/wp-anpei/wp-content/uploads/2016/06/entrepreneurship-300x300.jpg 300w, http://localhost/wp-anpei/wp-content/uploads/2016/06/entrepreneurship-600x600.jpg 600w" sizes="(max-width: 300px) 100vw, 300px" /><h3>Organização e planejamento para inovação</h3>

	<span class="price"><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">R$</span>1.760,00</span></span>
</a><a rel="nofollow" href="/wp-anpei/categoria-produto/ciclo-introdutorio/?add-to-cart=69" data-quantity="1" data-product_id="69" data-product_sku="" class="button product_type_simple add_to_cart_button ajax_add_to_cart">Adicionar ao Carrinho</a></li>

</ul>

É tipo isso???

[mruoppolo 14]

Eu fiz o CSS desta forma:

.woocommerce-LoopProduct-link{
  position: relative;
  display: inline-block;
}

.woocommerce-LoopProduct-link::before{
  content: "+";
  color:#FFF;
  font-size:50px;
  font-weight:bold;
  display: inline-block;
  position: absolute;
  background: #F37020;
  transition: 0.8s ease;
  opacity: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.woocommerce-LoopProduct-link:hover::before{
  opacity: 0.8;
}

Funcionou legal, porém tem um problema, o link <a> (que é de onde eu peguei a classe woocommerce-LoopProduct-Link) ele começa antes da imagem e termina depois do titulo, preço e outras coisas, então ele acaba deixando a li inteira laranja.

 

Tem como eu inserir um span só na imagem utilizando esses :before e :after???

[AndersonMamede 88]

No before/after você só consegue adicionar texto, não elementos HTML. E o before/after deve ser usado apenas para elementos que contém conteúdo, que não é o caso do img (pode ser que alguns browsers não reconheça...):
http://stackoverflow.com/a/5843164

 

As imagens vão ser todas do mesmo tamanho? Se sim, você poderia usar o before no link (tag a) e posicionar exatamente em cima da imagem com as mesmas dimensões.

 

ps: você pode usar javascript?

[mruoppolo 14]

Cara então, posso usar javascript sim, mas como o javascript agiria no css??

 

Valeu

[AndersonMamede 88]

Por javascript você coloca o img dentro de um span (se estiver usando jQuery, pode usar a função wrap) e adiciona uma classe à esse span, aí você consegue utilizar o css para fazer o efeito, exatamente como está no exemplo do jsfiddle...

[mruoppolo 14]

Valeu mesmo AndersonMamede e L Henrique, ficou bacana pra caramba. Abs

 

;)

[AndersonMamede 88]

Beleza!!