CSS Opacity on Hover of Div

How to change the opacity of image on hover using css

Your code is good- verified in this Fiddle with a friendly fish: http://jsfiddle.net/Qrufy/

    img {        opacity: 0.5;        filter: alpha(opacity=40);    }        img:hover {        opacity: 1.0;        filter: alpha(opacity=100);    }

    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/1/15/Colossoma_macropomum_01.jpg/800px-Colossoma_macropomum_01.jpg" />

CSS3 hover opacity ease-in-out effect?

Don't repeat the transition rules. CSS pre-processors can help with the vendor prefixing but you really don't need to (and shouldn't) repeat the transition declarations in the :hover. Just set them once in elements's default state like so:

.button-hover {    font-family: arial black;    font-size: 100px;    color: #000;    -webkit-transition: opacity 1s ease-in-out;    -moz-transition: opacity 1s ease-in-out;    -ms-transition: opacity 1s ease-in-out;    -o-transition: opacity 1s ease-in-out;    transition: opacity 1s ease-in-out;    opacity: 1;}
.button-hover:hover {    opacity: 0.5;}

<div class="container">    <a href="#" class="button-hover">HOVER ME</a></div>

CSS Making a div change opacity, lightness when hovered over

The flicker you're seeing is caused by setting pointer-events:none; on the hover property.

You're telling the browser to ignore all pointer events, even the ones that trigger hover states. So the moment you activate the hover css you deactivate it, causing the flicker (it's updated by mouse pixel movement).

CSS:

.divhover:hover {
  background-color: hsla(0, 100%, 100%, 0.0); 
}

Update: If your ultimate goal is to simply grey out the text until you hover over it, then you might try this:

Working Demo

HTML:

<div class="hover">    
    <p> xtext <a>xlink</a> </p> 
    <p> xtext <a>xlink</a> </p>
</div>

CSS:

.hover {
    width:500px; 
    height:500px;
    background-color:#ccc; 
    color:#333;
    opacity: .5;
}

.hover:hover{
    opacity: 1;
}

I think you may be going about this effect in an odd way. You can add a hover state on the containing element and toggle the opacity.

change opacity of one div by hovering over another div

Use the :hover pseudo selector on .songs, but then target .songtitles and change its opacity:

.songs:hover .songtitles {
    opacity: 1;
}

JSFiddle

How to set separate opacity for hover element and its tooltip?

I tend to avoid opacity:val since it applies to every part of an element AND all children of the element.

In your case you have a few options:

1. Remove the tooltip from the element that gets an opacity change
2. Add a wrapper inside the hovered element and only change the opacity on that element and it's children.
3. Simulate opacity by using rgba (alpha) on backgrounds, borders, etc but you'll have to change each of those attributes separately.

Opacity when hovering DIV or other Element

You can set a class to the <p> or just, use an operator to set the :hover to paragraph.

Example:

#testHdiv:hover > p {
    opacity: 1;
}

http://jsfiddle.net/g97pusex/1/

---

Related Topics