I am trying to follow this tutorial because I like the effect so much.
CSS Text Glow on Hover with Transition Effects
But the problem is, I set the background color to white.
<style>
.text-glow-hover-with-delay{
background: #FFFFFF;
color: #fff;
transition: text-shadow 3s;
-moz-transition: text-shadow 3s; /* Firefox 4 */
-webkit-transition: text-shadow 3s; /* Safari and Chrome */
-o-transition: text-shadow 3s; /* Opera */
}
.text-glow-hover-with-delay:hover{
text-shadow: 0 0 10px #fff;
}
</style>
<div class="text-glow-hover-with-delay">
Put your mouse over me and I will glow slowly.
</div>
and now it doesn't glow anymore. I'm noob on CSS here. :(
May be you are not able to see the shadow cause its white.
But, its working fine and smoothly. Just reduce the time, 3 seconds are too much.
Here is the working DEMO
OR, if you just want a white shadow See Here
I removed the transition CSS as it seemed to be messing it up and I changed the color tpo black:
http://jsfiddle.net/Ce5SB/
For css transitions you must go from point A to point B.
This means that point A should have a default text-shadow on your default class.
.text-glow-hover-with-delay{
text-shadow:0 0 0 #fff;/*This is the missing piece*/
....
}
With the above missing piece, point B will know where to transition from.
also let me know if the above doesn't work. You may also want to try the transition as
transition:all 300ms ease;/*just in case each browser wants to capture its browser specific text shadow property*/
Related
I have a link with an element inside (let's call it Bob). Bob is the star of the link, so he wants to shine a bit differently.
The link has some CSS3 transitions to create a fade effect. Bob also has a fade effect, so he can still be the shining element of the link.
An important point is that :hover is related to the container (in the example, a div), and I need it that way.
It works great in Firefox, Chrome and IE, but Microsoft Edge doesn't like the way Bob shines. During the transition, Bob just disappears and I have no idea where he goes.
Here's an example HTML:
<div>
<a href="#1">
<span class="Bob">Bright like a diamond!</span>
<p>Random text</p>
</a>
Other random stuff, who cares...
</div>
The :hover transition is on the div, then both a and Bob have transitions. The relevant CSS is very simple, something like:
div:hover .Bob { transition: all 0.5s ease 0s; }
.Bob { transition: all 0.5s ease 0s; }
div:hover a { transition: all 0.5s ease 0s; }
a { transition: all 0.5s ease 0s; }
Then they just have different colors so you can see the fade animations
Here's a JSFiddle so you can meet Bob:
https://jsfiddle.net/Cthulhu/9vv7v6gd/
If you test it in MS Edge, you will see how Bob disappears during the transition, and we don't want that. If you change the transition times between Bob and a, it gets even weirder, but let's keep it simple for now.
Any ideas?
I had same problem today. I resolved it by more specific transition property
{ transition: all 0.5s ease 0s; }
change to something like
{ transition: color 0.5s ease 0s; }
The way to fix this is by adding the transition result to the element.
div:hover a {
/* for example, if blue text was the desired transition. */
color: blue;
}
This is 2019. Problem has been solved by Microsoft and Edge behaves in this situation just like any other browser.
Case closed.
Yesterday I got my problem solved about jquery, which didn't load correctly. Today I struggle with yet another problem: two transitions for one element. The first transition starts when the page has loaded: it fades in. This one actually works when I do not use my second transitions. My second transitions must start whenever someone hovers over the ul. The problem is that the hover transitions 'overwrites' the fade-in transition. My jsFiddle:
http://jsfiddle.net/2cpX6/6/
Thanks in advance.
CSS rules with the same name override each other, just like any other rule.
Try this:
transition: opacity 2s ease-in, color 0.3s ease-in-out;
Note that you only need transition and -webkit-transition, since Firefox and Opera now fully support the unprefixed version, and -ms-transition never existed.
You can't put the same CSS rule for the same ruleset without it being overwritten. This applies to everything. For example, if you had:
span {
color: red;
color: green;
}
The spans would be green. This means that you cannot stack transition rules for the same ruleset.
You can create multiple separate transition rules using a comma.
transition: opacity 2s ease-in, color .3s ease-in-out;
http://jsfiddle.net/ExplosionPIlls/2cpX6/7/
Please can somebody explain the following.
I believe that a transition can be triggered by, for example, hovering.
My hover style should contain the CSS that I want my element to have at the end of the transition (in this case color:red).
The browser will then transition from the original css to the hover css using the time duration specified on the original unhovered css.
a{
color:blue;
transition: color 1s;
}
a:hover{
color:red;
}
This works perfectly.
BUT what if I want the transition from non-hover to hover to be instant? From experimenting, it appears to work if I add transition: color 0s; to my hover css. But to me this doesn't make sense, because my a css still has the 1second duration. If anything, I would expect adding this would cause a 1s transition on hover and a 0s transition when the mouse is moved away.
Can somebody explain where my understanding is wrong?
It's the duration of the transition to that state.
So adding 0 to hover means it will be a 0s transition to the hover state and then a 1s transition back to non-hover.
If it's only on the original non-hover then the transition applies to both.
this is the situation. If you make that opposite, it works perfectly.
Test
css:
a{
color:blue;
transition: color 0s;
}
a:hover{
transition: color 1s;
color: peachpuff;
}
see jsfiddle.
Enjoy!
I am trying to make some kind of animation and I want it to happen without :hover :active or any other event. I want it to happen after 2 second page loads. In fact, I want the object come from invisible place to scene (visible area). Is there anyway of doing it ?
#scene {width:650px;height:300px;border:1px solid black;background-color:#FAFAFA;margin:0 auto;}
#sca {transition: background 2s;width:271px;height:180px;background: url(http://img521.imageshack.us/img521/7913/123hc.png) no-repeat;display:block;position:relative;right:300px; opacity:0.5;
transition: opacity 2s;
-moz-transition: opacity 2s; /* Firefox 4 */
-webkit-transition: opacity 2s; /* Safari and Chrome */
-o-transition: opacity 2s; /* Opera */
transition-delay: 2s;
-webkit-transition-delay: 2s;
}
#sca:hover {opacity:1; }
Yes it's possible, but it's not recommended. How to do it with pure CSS is shown at this site. Here is the demo provided at the site.
A more cross-compatible way of doing it would be using javascript or jQuery, specifically jQuery's ready combined with animation or more generally, effects.
Good luck!
CSS transitions work on events, and there's not any way around that. You'd have to use Javascript to do what you are looking for.
There is difference between transition (from title) and animation (from text). animation can have start without an event, but transition can't.
I am very close to what I want to do but still some problems.
All I want is #sca to come from outside of the div and stays there all the time until page closes and I want this to happen with transition effect very smooth. I also want it to happen without an :focus, :hover, :active events, I want it to happen 2seconds after page opens.
if anybody could help me I would be appreciated.. this is so hard.
#sceneo {width:1200px;height:300px;border:1px solid red;margin:0 auto;}
#scenet {width:650px;height:300px;border:1px solid black;background-color:#FAFAFA;margin:0 auto;}
#sca {float:left;position:relative;left:0;width:271px;height:180px;background: url(http://img521.imageshack.us/img521/7913/123hc.png) no-repeat;display:block;position:relative;right:300px; opacity:0.5;
transition: all 2s;
-moz-transition: all 2s; /* Firefox 4 */
-webkit-transition: all 2s; /* Safari and Chrome */
-o-transition: all 2s; /* Opera */
-webkit-transition-delay:2s;
}
#sca:hover {left:280px;}
<div id="sceneo">
<div id="sca"></div>
<div id="scenet">
</div>
you're almost there! you'll need to create a KEYFRAME animation (as far as I know Opera does not have this yet, but webkit, mozilla, and new IE all support them)
There's a great write up at http://css-tricks.com/snippets/css/webkit-keyframe-animation-syntax/ about how to use keyframes
here's also a quick jsfiddle: http://jsfiddle.net/2wMVR/3/
from there it should be easy!
If you do not want to deal with keyframes, you could use a CSS3 javascript library such as jQuery Transit that handles all the transitions and stuff for you. In my opinion, it is a lot easier than coding CSS3 by hand.
Here is an example that answers your question:
JS Fiddle Demo
Javascript:
$("#sca").transition({ left: '0px', opacity: 1, delay: 2000 }, 2000, 'in');