I have a nice little hover effect on my website that quickly transitions in as the user hovers over a link. But when the user leaves hovering over the box, the shadow (and other traits) go away immediately, instead of fading back out. Is there a way I can get the properties to fade both in AND out, maybe using some sort of :un-hover type pseudo class? Thanks! And here is the CSS block if it helps:
a.squares:hover, a.squares:active {
color: black;
background-color: #E8E8E8;
box-shadow: 0 0 12px black;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
-webkit-transition: color 0.1s ease-in-out, background-color 0.1s ease-in-out, box-shadow 0.1s ease-in-out;
-moz-transition: color 0.1s ease-in-out, background-color 0.1s ease-in-out, box-shadow 0.1s ease-in-out;
transition: color 0.1s ease-in-out, background-color 0.1s ease-in-out, box-shadow 0.1s ease-in-out;
}
Put the transitions on a.squares not a.squares:hover
a.squares {
-webkit-transition: color 0.1s ease-in-out, background-color 0.1s ease-in-out, box-shadow 0.1s ease-in-out;
-moz-transition: color 0.1s ease-in-out, background-color 0.1s ease-in-out, box-shadow 0.1s ease-in-out;
transition: color 0.1s ease-in-out, background-color 0.1s ease-in-out, box-shadow 0.1s ease-in-out;
}
a.squares:hover, a.squares:active {
color: black;
background-color: #E8E8E8;
box-shadow: 0 0 12px black;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
I went through this exact thing when I was just leaving about transitions :)
Related
I am doing some basic CSS fill transitions on hover. I have used this codepen as an example: https://codepen.io/brandon4117/pen/ihIgE. Now on hover the background position raises to fill the div, and on hover off, the background goes back down. I wanted to know how can I modify this pen, to work such as when hover off the transition should go upwards, rather than down.
Most hover transitions: Hover on new fill top->bottom. Hover off new fill removes bottom->top. I would like to do on hover fill top->bottom, on hover off fill removes top->bottom again.
A look at the CSS being used:
div {border-style: solid;
border-color: black;
color: black;
padding: 50px;
background-size: 200% 200%;
background-image:
linear-gradient(to top, #A72424 50%, transparent 50%);
background-position:0 100%;
-webkit-transition: background-position 300ms, color 300ms ease, border-color 300ms ease;
-moz-transition: background-position 300ms, color 300ms ease, border-color 300ms ease;
-ms-transition: background-position 300ms, color 300ms ease, border-color 300ms ease;
-o-transition: background-position 300ms, color 300ms ease, border-color 300ms ease;
transition: background-position 300ms, color 300ms ease, border-color 300ms ease;
}
div:hover {color: white;
border-color: #A72424;
background-image:
linear-gradient(to top, #A72424 50%, transparent 50%);
background-position: 0 0%;
-webkit-transition: background-position 300ms, color 300ms ease, border-color 300ms ease;
-moz-transition: background-position 300ms, color 300ms ease, border-color 300ms ease;
-ms-transition: background-position 300ms, color 300ms ease, border-color 300ms ease;
-o-transition: background-position 300ms, color 300ms ease, border-color 300ms ease;
transition: background-position 300ms, color 300ms ease, border-color 300ms ease;
}
a {color: black; text-decoration: none;
transition: all 100ms linear;
-webkit-transition: all 100ms linear;
-moz-transition: all 100ms linear;
-ms-transition: all 100ms linear;
-o-transition: all 100ms linear;}
a:hover {color: white;
transition: all 100ms linear;
-webkit-transition: all 100ms linear;
-moz-transition: all 100ms linear;
-ms-transition: all 100ms linear;
-o-transition: all 100ms linear;
}
a:active {color: white;}
Thanks
Ok I got the answer: For top down do this:
.divclass::after {
position: absolute;
transition: 0.3s;
content: '';
height: 0;
top: 50%;
right: 0;
width: 3px;
background: #fff;
bottom: 0;
top: auto;
z-index: -1;
width: 120%;
}
.divclass:hover::after {
height: 100%;
top: 0;
}
Thanks for pointing me in the direction of pseudos Frderico
I am editing a website template which has the following css for a button class.
.button {
-moz-appearance: none;
-webkit-appearance: none;
-o-appearance: none;
-ms-appearance: none;
appearance: none;
-moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out;
-webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out;
-o-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out;
-ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out;
transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out;
background-color: transparent;
border-radius: 0.35em;
border: solid 3px #efefef;
color: #787878 !important;
cursor: pointer;
display: inline-block;
font-weight: 400;
height: 6.15em;
height: calc(2.75em + 6px);
line-height: 2.75em;
min-width: 20em;
padding: 0 1.5em;
text-align: center;
text-decoration: none;
white-space: nowrap;
margin:10px;
}
I am trying to increase the font within. Tried playing around with the values of line-height and height but wasn't able to increase the font size. Any ideas?
try font-size:__px whatever pixel value it is
I just added font-size property to CSS. It worked. Pretty Basic :P
All you need to do is utilize the CSS font-size property:
#yourdiv{
font-size:20px;
}
Add this:
size: 20px;
or:
font-size: 20px;
http://jsfiddle.net/LJdAU/
-o-transition:color .3s ease-out, background .5s ease-in-out;
-ms-transition:color .3s ease-out, background .5s ease-in-out;
-moz-transition:color .3s ease-out, background .5s ease-in-out;
-webkit-transition:color .3s ease-out, background .5s ease-in-out;
transition:color .3s ease-out, background .5s ease-in-out;
I am trying to fade in and out a div object. See the fiddle. I made the fade especially long to see the problem.
The menu items (canada, germany, etc) on rollover works fine (that is fades in) , but on rollout it does not fade out.
can someone spot the error?
thanks!
LINES 40-47 css code is where the transition code it located :)
The reason your transition is cutting out like that is because you have the transition only on the :hover, what you've got to do is actually move that onto the selector you want to transition, so:
.collapsible, .page_collapsible {
margin: 0;
padding:8px;
height:20px;
border-top:#2b2b2b 1px solid;
border-left:#2b2b2b 1px solid;
border-right:#2b2b2b 1px solid;
border-bottom:#2b2b2b 0px solid;
background: black;
font-family: Lato;
text-decoration:none;
text-transform:uppercase;
color: #fff;
font-size:1em;
-o-transition:color .3s ease-out, background .5s ease-in-out;
-ms-transition:color .3s ease-out, background .5s ease-in-out;
-moz-transition:color .3s ease-out, background .5s ease-in-out;
-webkit-transition:color .3s ease-out, background .5s ease-in-out;
transition:color .3s ease-out, background .5s ease-in-out;
}
Here is the updated fiddle: http://jsfiddle.net/LJdAU/1/
I am having issues with my CSS3 transitions:
div.one_fifth{
border: 1px solid #48484A;
transition : border 400ms ease-out;
-webkit-transition : border 400ms ease-out;
-moz-transition : border 400ms ease-out;
-o-transition : border 400ms ease-out;
font-size: 18px;
transition : font 300ms ease-out;
-webkit-transition : font 300ms ease-out;
-moz-transition : font 300ms ease-out;
-o-transition : font 300ms ease-out;
}
div.one_fifth:hover{
border: 1px solid #ed2124;
font-size: 20px;
}
Now the problem is that when I define both the transitions, the border one does not work...So it seems like the two transitions interfere and the font one overrides the border one...How do I intergrate them, if so, how would you do it with different speeds(ms)?
You can specify 2 or more comma-separated transitions, using a single transition property:
JSFiddle Demo
div.one_fifth {
border: 1px solid #48484A;
font-size: 18px;
-webkit-transition : border 400ms ease-out, font 300ms ease-out;
-moz-transition : border 400ms ease-out, font 300ms ease-out;
-o-transition : border 400ms ease-out, font 300ms ease-out;
transition : border 400ms ease-out, font 300ms ease-out;
}
div.one_fifth:hover {
border: 1px solid #ed2124;
font-size: 20px;
}
If you were using the same timing and easing for both transitions, you could use transition: all;
jsFiddle
div.one_fifth {
border: 1px solid #48484A;
font-size: 18px;
-webkit-transition: all 400ms ease-out;
-moz-transition: all 400ms ease-out;
-o-transition: all 400ms ease-out;
transition: all 400ms ease-out;
}
div.one_fifth:hover {
border: 1px solid #ed2124;
font-size: 20px;
}
So I have these rules:
a{
background-color: transparent;
-webkit-transition: background-color .3s ease-in-out;
-moz-transition: background-color .3s ease-in-out;
-o-transition: background-color .3s ease-in-out;
-ms-transition: background-color .3s ease-in-out;
transition: background-color .3s ease-in-out;
}
a:hover{
background-color: #fff;
}
which are supposed to make the browser fade in/out a white background on mouse over.
It works in Chrome and Firefox, but in Opera it fades from a grey color to white, instead of transparent to white...
How can I fix that?
Thank you
I don't know the answer to your explicit question, but maybe if you transition from rbga rather than from transparency?
a{
background-color: rgba(255,255,255,1);
}
a:hover{
background-color: rgba(255,255,255,0);
}