qnjvkw
Last Updated: November 12, 2017
·
4.621K
· hovanessb
0fe8b422541b693e755d7702625b7b83

A Hover Effect with jQuery or CSS3

I just wanted to share in interesting way of showing product prices for a e-commerce site, or any content that fits within an image with a simple cursor hover.

Here it is with jQuery:
Hover with jQuery

Here it is only using CSS:
Hover with CSS

This type of technique is elegant and can used to display text and make images or divs more interactive and interesting.

Simply, it hides the content with display:none, and with adjacent-sibling selector or jQuery's fade-in, fade-out functions we show and hide things on hover.

Sources:
The Adjacent-Sibling Selector
CSS3 :nth-child() Selector

Say Thanks
Respond

3 Responses
Add your response

4240

thanks was looking for a neat way of doing this :)

over 1 year ago ·
4252
0fe8b422541b693e755d7702625b7b83

@agmitre You are very welcome.

over 1 year ago ·
4358

nice one!

over 1 year ago ·