How to make a div fade on hover?


Tags: javascript,jquery,html,css,css3

Problem :

Hi I currently have span that displays over an image on hover, however I want to use a bit of javascript or css transitions to make this div fade in to about 0.8 opacity on hover then back to 0 when the mouse is not hovering.

Here is an example of how I have it setup so far, now all thats needed is the fade and 0.8 opacity:

How its setup - Jsfiddle

Im sure there is a simple bit of code that someone has to do this

Help is much appreciated thanks!



Solution :

So... here's the CSS3 / HTML5-way to do this. This won't work in IE though: it will fall back on the regular, immediate way (so it does work, it just isn't as smooth as it is in the real browsers).

div.yourDiv {
    -webkit-transition: .4s ease-in-out opacity;
    -moz-transition: .4s ease-in-out opacity;
    -o-transition: .4s ease-in-out opacity;
    transition: .4s ease-in-out opacity;
}

div.yourDiv:hover {
    opacity: 0.8;
}

Since CSS3-transitions are using hardware-accerelation, this really is very smooth! Besides that, you don't even need any Javascript or jQuery for this =)!


    CSS Howto..

    how to center columns group

    how to draw a configurable pie chart in css

    How to align both vertically and horizontally in CSS?

    Fuelux, how to fix the width of a repeater column

    How to move img src a few pixels down in html page

    How can I show hidden element when it has focus?

    How do I properly reference files in subdirectories (in xampp) for PHP, CSS, etc. on localhost?

    How to create double border which is not touching to edges in pure css?

    How to adjust nav menu based nav item name character length?

    How can I get these two divs to appear close to each other vertically?

    How to use array so i will get value either x[0] or x[1]

    How to make middle div acting like a fixed positioned header when middle div go to the top place by mouse scrolling

    How to alternate HTML table row colors using JSP?

    CSS: how to remove the top-gap for sub-menus?

    How to add css for div tag and Panel in asp

    How to style xml file? from xml to html using xslt and style that html using css [closed]

    How to change an image on mouseover of wrapper div

    How to prevent conflicts between css rules

    How do i rotate text in css

    How to use CSS Background-size: cover; but leave space for menu?

    How to slow drop menu animation with CSS only

    How to center div using JQuery or CSS

    How can I have the text content of a div overflow in a HTML email template?

    How to style just one type of input field without also affecting other input types with CSS

    How can I resize images that are loaded onto a page?

    How can I set my unordered list to be in the middle not in-line (see image)?

    How to show only the div with id while hiding other divs using CSS only

    How to remove top / bottom margin from isotope masonry

    How to align horizontally nav bar in css?

    How do I change the opacity of an image when I hover of my text?