I have many images that all of them will have the same effect in hover, so I made to layers. I is the image and one is the hover effect.
http://jsfiddle.net/jmXdh/13/
So in hover the second layer loads, also i want to give an effect to the main image. only in hover. As you can see I gave grayscale effect to it. but in hover, both 2 hovers don't load at the same time. why is that ?
this is what I got for the main image hover:
a:hover .img{-webkit-filter: grayscale(100%);}
Also I would it happen with transition.
You'll need to add a positive z-index value to your .play class to ensure that that element doesn't get pushed behind the image when the filter is applied to it.
Any webkit css is only working to browsers that support webkit
The double hover effect is working.
I test it by changing the css a bit:
a:hover img{border:2px solid #F00;}
http://jsfiddle.net/jmXdh/21/
Related
I have created an image gallery and every time I hover over one I want a white overlay to show that the image is being hovered on however I would not want to lose the quality of the image.I have already tried changing the opacity but I want it to start with a 100% opacity and then increase.However, this is not possible so I would like a highlight over the image without decreasing the quality.
Here is the link to my work:
http://www.mediafire.com/file/g1yagf1u6y7ea67/website%204.zip
Is there any way in CSS or HTML to do this?
You can use CSS filter property.
.your-image:hover {
-webkit-filter: brightness(1.15);
}
JsFiddle
HTML
<p>im a duck</p>
CSS
p:hover {
display:none;
}
Shouldn't it disappear after hovering?
It does disappear.
However, after it disappears, it's no longer hovered, so it re-appears.
Each time you move the mouse, the cycle repeats; if you move the mouse over it, you'll see it flickering.
The exact behavior depends on the browser; in particular, Chrome only recalculates hover states on mouse events.
this will make more sense to you.
html:
<div class="cont"><p>foo</p></div>
css:
.cont{width:100%;height:30px;}
.cont p{}
.cont:hover p{display:none}
hope that helped.
A simple alternative would be to do something like this:
p:hover {
opacity: 0;
}
However, that will only work while the hovering it happening. It's won't hide the element once hovering has ceased.
With display: none you're completely removing the element from visibility, including height and width. So when you hover it, you completely remove it thus resulting in not hovering, then it reappears. It's a pretty interesting cycle.
You may want to look into visbility or trying to set it within a container that doesn't get hidden so you have some sort of hoverable object at all times.
It will be working, but note that once the element goes display: none, you can't hover it anymore, because there's nothing to display. So it goes unhovered, which then allows the rule to apply again, so essentially you're flickering between hovered and un-hovered VERY quickly, essentially making it look like nothing's happening.
display:none
Will hide the element on hover, thus the element is no longer hovered over, so it reappears.
visibility:hidden;
Will set the element to invisible, however under the visibility state the element is no longer listening to the hover event and so will reappear, similar to display:none
Technically, you could do this on hover to get the desired effect
opacity:0;
and the element will remain hidden whilst you are hovering over it. This is due to the element still listening for events as opacity doesn't affect this.
Here's a fiddle comparing the 3
http://jsfiddle.net/mEVHp/1/
You can use javascript to do this job
$('p').hover(function(){
$(this).hide();
});
see this fiddle for more info.
I am having issues with my navigation bar CSS.
I want it to look like :
http://i39.tinypic.com/28is4uw.png
But this is what I'm getting:
http://i40.tinypic.com/akecl5.png
The only way for me to make it work like that is by using:
.under-menu { position: relative; z-index:999; }
but this kills the submenu links.
Thanks a lot!
Not a perfect solution, but at least some if we want to support IE, if not just adding
pointer-events: none;
Will fix the problem. This demo doesn't include pointer-events.
Here is a demo:
CSSDesk
In summary, I added the wave background inside the dropdown (in the li where the link and the drop ul is), and the effect is almost the same with your second try, with the only differents that I mask the top part of the drop down with the background that I added in the LI.
You will see that the wave background shadow becomes ticker, since the other background is still there (you can hide it with JS then it will become better, but since this is only a html/css topic I dind't add any JS )
So when you hover on the LI element the overlay background shows.
So that overlay background should be added for each li with drop-down. (like I said not a perfect solution)
I'm making a menu with <ul>/<li> and CSS.
Here's what I have so far: https://jsfiddle.net/gANfS/6/
The problem is that if you mouse over the top edge within the 5 pixel margin, it starts getting crazy and going back and forth between the hover and unhovered state because the size of the block grows and shrinks. How can I fix this? When I shrink the li, I don't want to be shrinking the hover area. That would fix it, but I'm not sure how to pull it off. Ideas?
this is a hack job...but it will work
instead of magin-top:5px;
do border-top:5px solid black;
if you want your background to to be a different color, just make sure to set the border color to the same color.
Wrap your li content into a div, then apply your shrinking to that div (.sel div:hover instead of li:hover) and this should make it.
The reason for that is on mouse over, the button moves down and sets a margin-top 5px. Then, if the mouse is over that top edge, the button no longer has "hover" state and it retracts back. When it does get back, it switches to mouse over state and the journey begins again.
You could use padding-top:5px instead of margin-top and set the HOVER effect on the whole container. Padding, as opposed to margin, is space inside the element. That way, when the mouse is over the top edge, it would still be considered as over the element and it will not flicker anymore.
I've been doing my homework and it appears you can't use the CSS transition effect where you're using display:none; and display:inline; and so on.
I'm wanting to add a fade in and out on hover to my CSS dropdown menu to make it look cleaner. This isn't possible when using the display element as I've discovered.
I tried removing display from my CSS but when I do this the element is there (despite not being visible) and fades in when you hover over it. I read a suggestion to add "pointer-events:none;" to this, which isn't cross browser compatible. It also causes the fading element to flicker if you run your mouse over it again.
I also used a CSS keyframes animation suggestion to fade in whilst using the display element, but couldn't get this to fade out when the mouse leaves. :(
I know this is possible because I've seen it on many websites but I just can't get it working right for mine.
Here's my code:
http://pastebin.com/zVQapUNz
I've written your code in jsfiddle.net
http://jsfiddle.net/3PD7D/1/
this does work when the mouse moves over it, you can use the same concept to change the opacity
from {opacity:1;}
to {opacity:0;}
to hide the menu. However this will make it transparent any thing behind would be visible but not clickable. I've not tried what would happen if you add the display:none to the end animation frame.