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).
Related
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
Is there any way to use the css3 transition only for the text color?
Suppose I have a readmore class which has some transition effect like
.readmore{
colour:red;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
background:url(images/sprite.png) no-repeat 0 0;
}
.readmore:hover{
colour:red;
background:url(images/sprite.png) no-repeat 0 -20px;
}
Now I don't want to apply the background image transition. I need to apply the transition only for color. Because when we mouse over on the text the image is animating and it doesn't looks good.
Any advice? Thanks in advance.
Instead of specifying that you want to transition all properties you can specify that you only want to transition the color property.
Like this:
transition: color .3s ease-out;
And change colour to color.
Hope this helps!
Use this option:
transition-property:color;
It's pretty easy to enable CSS transitions for a single style, but is it possible to disable them for a single style?
The usual method for single-style transitions is:
div
{
transition: opacity 0.5s;
}
but what I'd like to do is set a global transition, then disable it for a single property. Maybe something like this?
div
{
transition: 0.5s opacity 0s;
}
Is that possible in any way?
EDIT
I don't want to disable ALL transitions for an element, I want to disable ONE transition for an element. i.e. I want all properties to transition EXCEPT opacity.
Here's a fiddle to demonstrate: http://jsfiddle.net/jakelauer/QSJXV/
It seems that you can emulate the needed behavior by setting a very short transition-duration for that one property (see fiddle):
transition: all 3s ease, background-color .01s linear;
I solved this. Example here: http://jsfiddle.net/jakelauer/QSJXV/1/
It works exactly how I thought it should, except I was missing a comma. Correct code example:
transition: 0.5s, opacity 0s;
-webkit-transition: 0.5s, opacity 0s;
You could use the :not pseudo-selector to exclude those elements which you mark with a class that shouldn't have the transition.
div {
opacity: 1.0;
...
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
}
// Change state for example
div:hover:not(.disable-transition) {
opacity: 0.5;
}
.disable-transition {
// Manually maintain the opacity so there is no change
opacity: 1.0;
}
I'm using vendor prefixed css transitions, based on this demo, which seems to only be working in Chrome 22+ at the moment. I'm trying to turn the buttons (Home, Contact, About) into drop-down menus on hover. I want to avoid using javascript and see if I can do it all with CSS.
It fades in if I have the z-index set to a low number (-999) and on hover change it to a high number (999), and change the opacity from 0 to 1 using a transition.
nav > div div {
z-index: -999;
opacity: 0;
-webkit-transition: opacity 1s ease-in-out;
}
nav > div:hover div {
z-index: 999;
opacity: 1;
}
See the Fiddle here.
The problem is it won't fade back out. If I change the transition to also delay the z-index from changing then it will fade out, but not in (-webkit-transition: opacity 1s ease-in-out, z-index 0 linear 1s). Modifications to the Fiddle here.
Essentially what's going on is the opacity fading works fine, but z-index moves too quickly in either one direction or the other. If I don't use z-index at all, then it will open the menu when I'm hovering below the "Hover Me" button instead of on it. Here's another Fiddle showing that scenario.
Is there a way to have one transition for going from point A to point B, and another transition for going from point B to point A? I've played around with putting a separate transition on the :hover element but as far as I can tell it just overrides the first one (as if there is no transition from "not hovering" to "hovering").
TL;DR: Is there a way to modify this, this, or this to make a smooth transition when hovering on (not just near) the "Hover Me" button (without using javascript)?
Check out this Fiddle. Not sure if it does what you want, but I changed the following...
CSS
nav > div > div {
z-index: -999;
position: absolute;
opacity: 0;
-webkit-transition: opacity 1s ease-in-out, z-index 0 linear 1s;
-moz-transition: opacity 1s ease-in-out, z-index 0 linear 1s;
-ms-transition: opacity 1s ease-in-out, z-index 0 linear 1s;
-o-transition: opacity 1s ease-in-out, z-index 0 linear 1s;
}
nav > div:hover > div {
z-index: 999;
opacity: 1;
-webkit-transition: opacity 1s ease-in-out, z-index 0 linear 0;
-moz-transition: opacity 1s ease-in-out, z-index 0 linear 0;
-ms-transition: opacity 1s ease-in-out, z-index 0 linear 0;
-o-transition: opacity 1s ease-in-out, z-index 0 linear 0;
}
I've added transitions to the hover state as well, but with a delay of 0.
I'm creating a simple web page and I'm having trouble adding a fade animation to the css when the background image is changed. I know I need to use something along these lines but whenever I try it, it doesn't seem to work...
-webkit-transition: background 1s ease-in-out;
-moz-transition: background 1s ease-in-out;
-o-transition: background 1s ease-in-out;
-ms-transition: background 1s ease-in-out;
transition: background 1s ease-in-out;
I'll put a link to my css and html below, if anyone could take a look, I would be very grateful :)
CSS: http://pastebin.com/9k1tSiAE
HTML: http://pastebin.com/2K7GFWjN
The problem is you are changing the background image in addition to simply changing properties on the background itself. I've setup a fiddle with some random background tiles. You'll see the background slides but the image changes immediately without a transition:
http://jsfiddle.net/jimjeffers/a2jAF/
You'll need to settle on one image for the background but right now you have three:
background-image:url(nav-bg-initial.png);
background-image:url(nav-bg-secondry.png);
background-image:url(nav-bg-tertiary.png);
You'd need to condense those into one sprite. But once you apply a transition to background and adjust the background position, the background slides rather than fades. So depending on the effect you're going for - transitioning the background may not be the best option for you.
Instead -- what you may need to do is use some nested empty container elements. It's not semantically nice but it could achieve what you want if you want to use CSS transitions to perform a cross fade.
<ul id="navigation-list">
<li><a class="navigation-button" id="nav-button-1" href="#">HOME</a><span class="initial"></span><span class="secondary"></span><span class="tertiary"></span></li>
...
</ul>
The CSS then would be:
.navigation-button { position: relative; }
.initial, .secondary, .tertiary {
bottom: 0;
left: 0;
opacity: 0;
position: absolute
right: 0;
top: 0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
z-index: -1;
}
.initial { background-image:url(nav-bg-initial.png); }
.secondary { background-image:url(nav-bg-secondry.png); z-index: -2; }
.tertiary { background-image:url(nav-bg-tertiary.png); z-index: -3; }
And then you'd toggle their appearances like this:
#navigation-buttons:hover #nav-button-1 .tertiary { opacity: 1; }
It's a bit more work but you'd have to do something along those lines to cross fade different background images at various positions without getting a slide effect.