Hover to solid background?

Question

I am trying to achieve this effect on my website and am stumped on how to do it. My goal is to have an image that when you mouse over it a solid color (with like an opacity of .8) and an icon(and/or text) are displayed on top. Note: My images are also set up to be responsive, so I'm not sure if this will create a problem or not. EXAMPLE>>If you click the link below, and then the computer on the left, and then scroll to the bottom where there are 9 circles that have hover effects which is similar to my goal. http://themeforest.net/item/strand-one-page-parallax-bootstrap-template/full_screen_preview/5445825

Any direction, tutorials, advice would be very much appreciated!

Answer 1

I wouldn't really use javascript to do this. Here is a bare bones example of a solution. http://codepen.io/anon/pen/zujBc

This is the key concept:

.container:hover .overlay-color {
    opacity:.5;
}

Getting the color overlay container to be 100% height might be tricky in some IE versions. Position is everything.

Answer 2

You have several options for this kind of effect, and it may depend on your specific use-case. You can adopt a gracefully-degraded CSS-only that animates the opacity of the element using CSS3 property transition. Which will only animate in supporting browsers, modern browsers such as IE9+ and chrome, FF, etc.

-> See this jsfiddle

Otherwise you will have to use a JavaScript library such as jQuery. To apply .fadeToggle() or .fadeIn() and .fadeOut() in combination with a .hover() or .mouseenter() and .mouseleave(). This should work cross-browser so long as I think you choose a jQuery library less than v2 in which older IE browser support is dropped. (Haven't tested this). A JS solution would also allow you to easily change the animation be using .slideToggle or .show(500) instead, or other more varied animations using $(element).animate({'opacity': 1, 'height' : 100%'}, slow); and the vice-versa.

So a JS solution using identical markup would be something like this fiddle.

jQuery References:

• .fadeToggle()
• .slideToggle()
• .hover()
• .animate()