Eu só queria compartilhar uma forma interessante de mostrar preços de produtos para um site de e-commerce, ou qualquer conteúdo que caiba em uma imagem com um simples cursor hover.
Aqui está com jQuery:
Passe o mouse com jQuery
Aqui está usando apenas CSS:
Passe o mouse com CSS
Este tipo de técnica é elegante e pode ser usada para exibir texto e tornar imagens divsmais interativas e interessantes.
Simplesmente, ele esconde o conteúdo com display:none, e com seletor de irmão adjacente ou jQuery fade-in, fade-outfunções que mostramos e escondemos coisas ao pairar.
Fontes:
The Adjacent-Sibling Selector
CSS3: nth-child () Selector