Here's a jsfiddle of the project I'm working on
http://jsfiddle.net/bhbLa/
I have a picture that is set to grayscale using some CSS, with some text positioned over the image. When the image is hovered over, it turns the grayscale off and hides the text. It's almost exactly what I want.
The problem I'm having is that if you scroll over the very center of the image where the opacity:0; text is, it isn't considered as hovering over the image, which turns the image back to grayscale.
I've racked my brain all day for this, and I don't know why
div.text:hover #cell {
opacity:1;
}
doesn't correct this problem.
If I am understanding correctly, you need to target the hover effect on the image's parent and not the image itself.
What your old selector was doing was only targeting the hover effect if the cursor is over the image. Well when you are hovering over the text, which is a block level element, you are actually no longer hovering over the img element and therefor will lose it's hover effect.
Here is the css I changed:
div.cell:hover img {
filter: none;
-webkit-filter: grayscale(0);
transition: opacity .2s ease-in-out;
-moz-transition: opacity .2s ease-in-out;
-webkit-transition: opacity .2s ease-in-out;
opacity:1.0;
}
Finally, a fiddle: Demo
Related
Using hover with transition ease-in for an image, taking cursor out of the image makes it unpleasant
i've tried :after ,but i'm not sure if thats what i need, if it is , i didn't figure it out (i'm a noob)
this is the code i'm using for hovering
.movies img:hover
{
border: 7px solid white;
padding: 0px;
width: 230px;
transition: all 0.1s ease-in;
}
How to add a transition(or something else to smooth it)to make the new border created by the hover disappear with a transtion ?
I guess you can smooth it (as you named it) by throwing out
transition: all 0.1s ease-in;
to your .movies img class, but I'm not sure if that's the solution you're looking for.
Have you got a codepen project for this problem?
I am trying to add a simple ease-in and ease-out effect when you hover over a logo. I know there are posts about this. I've tried many different combinations of CSS, but can't seem to get it to work.
I've successfully changed the logo color by changing the content upon hover with this CSS code:
#dealertrackr-image.et_pb_image:hover {
content: url('image url');
}
When it is hovered over, the logo changes from the black and white state to colored state. I now want this to have a 1s ease-in and ease-out on hover and release of hover. Nothing that I tried worked.
http://www.nationalgalactic.com/divisions/
If all you were hoping for was grayscale, you may also be interested in just loading in the full color image and using a CSS filter to desaturate / resaturate on hover.
This combined with CSS transitions will create a nice little fade:
img {
-webkit-filter: grayscale(100%);
filter: gray; filter: grayscale(100%);
filter: url(desaturate.svg#greyscale);
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
transition: all .25s ease;
}
img:hover {
-webkit-filter: grayscale(0%);
filter: none;
}
*edit
This is a pure CSS solution, but is not fully supported in Android Jellybean, and Internet Explorer. If full browser support is important to you, please see isherwood's answer on this same post. For full support, your solutions are limited to stacked images or javascript.
The only way to do it with images is to stack elements and transition the opacity of the top layer. Browsers don't do image-to-image transitions.
Something like this, where the anchor has a background image:
a {
display: inline-block;
background: url(http://lorempixel.com/400/150/nature) left top no-repeat;
}
a img {
transition: opacity 1s;
}
a:hover img {
opacity: 0;
}
<a href="#">
<img src="http://lorempixel.com/400/150/nature/2" alt="">
</a>
Here's a demo with your code and images.
I'm attempting to add a opacity hover-over effect with small text to a thumbnail with a fancybox effect. I don't know much jquery so a css method would be preferable.
I found another forum that says to add a class of fade to my img element with the css of:
.fade {
opacity: 1;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;}
.fade:hover {
opacity: 0.5;}
But that had no effect. Any ideas?
Your css is correct. If it is not working for you, you either did not apply the classname fade to your image(s), or you have a browser that does not support the opacity css property.
As #MaryMelody posted in a comment, this JSFiddle has your code with the class applied to a div (the class can be applied to any element to make it fade on hover).
Alright Google isn't helping me out much here.
The aim of the game is to have a button, which is a custom png, and upon mouse rollover it 'slides upwards', remaining in the same spot but transitioning to the rollover by means of sliding.
Preferably I'd like to get this sorted using CSS3, the page already has a bit of an OTT fest of JQuery.
Currently I've only managed to get it to slide from the left side. Downwards is fine too.
Code is about as simple as it comes, the HTML looks like this (Just a basic DIV):
<div id="Abutton"><a draggable="false" title="A button n' stuff"></a></div>
The CSS:
#Abutton a {
background: url(mediafolder/Abutton.png) no-repeat 0% 0px;
display: block;
height: 32px;
width: 86px;
cursor: pointer;
transition: background .25s ease-in-out;
-moz-transition: background .25s ease-in-out;
-webkit-transition: background .25s ease-in-out;
}
#Abutton a:hover {
background-position: -86px 0%;
}
(Plus a further # for the positioning and size etc..)
If it makes for any complications the button is also tied to a JQuery file that upon clicking, smooth scrolls to a different point in the page (Props to the awesome chap that helped me out with that last night!).
Thanks in advance!
I think what you're asking is a slot machine display type feel?
Just use an image sprite, which you pretty much already are trying to do, and put a css animation on it, and it will look what you want (which i think is what you want?) Best of luck
.animate {
-webkit-transition: all 0.250s -in-out;
-moz-transition: all 0.250s ease-in-out;
-o-transition: all 0.250s ease-in-out;
transition: all 0.250s ease-in-out;
}
I am asking a specific question about a specific problem that I don't know how to do but would like to add to my site.
1) When the parent li has a child, I want that nav to stayed hovered with the effect applied when going through the child elements. Right now, when I am no longer hovered over it, it will lose its hover effect and apply hover effects on the child elements when I want the parent li to still have the hovered effect when going through the sub navigation.
2)And the other thing I do not know how to do is transition effect when I hover over any navigation links, it will sort of have an fade in out effect when hovered in and out from. How do I do this?
I attempted to do this:
CSS:
#nav li:hover > ul{ /*display sub menus when hovered over*/
left:0; /*show menu when hovered*/
z-index:100; /*places the sub nav in frontier of all elements*/
transition: all 2.4s ease-in-out -2s; /*transition: property duration timing-function delay;*/
-moz-transition: all 2.4s ease-in-out -2s;
-webkit-transition: all 2.4s ease-in-out -2s;
}
It brought about unexpected, but cool results of bringing out the submenus, sliding to the right. It's not what I intended, but okay. I just wanted the other two features applied but don't where to look. My full code is here: jsfiddle nav code
Show DEMO Transition
#nav a:hover{
transition: ease-in-out all .4s;
-moz-transition: ease-in-out all .4s;
-webkit-transition: ease-in-out all .4s;
background-color:#000000;
color:#FFFE41;
text-decoration:none;
font-weight:bold;
}
I edited your code, changing left property to opacity and adding one more transition. Take a look: http://jsfiddle.net/YfuDT/
About part 1 of your question, I am afraid you won't achieve it with css, some javascript necessary.