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:
- Remove the tooltip from the element that gets an opacity change
- Add a wrapper inside the hovered element and only change the opacity on that element and it's children.
- 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
Submit Input Doesn't Get The: Active State in Ie8 When I Click on The Button's Text
Efficient Way to Place Orphaned Element(S) at Top/Beginning Using CSS Flexbox
How to Detect If Webp Images Are Supported via CSS
Using Rems with a Pixel Fallback
iPhone Sticky Menu Jquery Onscroll iOS 9
Bootstrap Container Fill Sides with Colors
Maintain Width and Height of Rotated Square Divs in CSS Grid (Responsive Solution)
How to Make CSS Grid Last Row to Take Up Remaining Space
Select: Last-Child with Especific Class Name (With Only CSS)
Styling Polymer Element in Angular2
CSS Flexbox: a Centered Child Overflows a Parent with Position Fixed
How to Align Two Columns of Text in CSS
Vertically Flowing Text with CSS
How to Get Firefox to Show an Auto Horizontal Scollbar for a Div