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
Related
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'm trying to build some sub-menus with fade in/out effects. Each sub-menu should fade in when the mouse hovers over the corresponding parent menu item. Here's my code so far:
.navbar ul ul {
display: none;
opacity: 0;
position: absolute;
top: -99999px;
-webkit-transition: opacity .1s linear;
-moz-transition: opacity .1s linear;
-o-transition: opacity .1s linear;
transition: opacity .1s linear;
}
.navbar li:hover > ul {
display: block;
opacity: 1;
top: 100%;
-webkit-transition: opacity 0.35s ease;
-moz-transition: opacity 0.35s ease;
-o-transition: opacity 0.35s ease;
transition: opacity 0.35s ease;
}
The Problem:
The sub-menu's fade effect does not work. When I hover my mouse over any parent item, the corresponding sub-menu displays instantly without the fade in/out effect.
The Solution (thanks to Cam):
.navbar ul ul {
display: block;
visibility: hidden;
-webkit-transition: opacity 0.35s ease-in;
-moz-transition: opacity 0.35s ease-in;
-o-transition: opacity 0.35s ease-in;
transition: opacity 0.35s ease-in;
}
.navbar li:hover > ul {
visibility: visible;
-webkit-transition: opacity 0.35s ease;
-moz-transition: opacity 0.35s ease;
-o-transition: opacity 0.35s ease;
transition: opacity 0.35s ease;
}
On my site Im using a CSS3 hover fade for my submit button. It correctly fades on hover, but when I remove the curser from the button it quickly changes back to the original color, it doesn't seem to be doing the 1 second fade back out.
.form-wrapper input[type=submit] {background-color:#0076A9}
.form-wrapper input[type=submit]:hover{
background-color:#7daed3;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:ease}
UPDATE:
.social-links {
color:#0076A9;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:ease;}
.social-links:hover {
color:#7daed3;}
You need to use ease-in-out. See: http://css3generator.com/
-webkit-transition: background 1s ease-in-out;
-moz-transition: background 1s ease-in-out;
-ms-transition: background 1s ease-in-out;
-o-transition: background 1s ease-in-out;
transition: background 1s ease-in-out;
For the transition to effect ALL the properties, use (for social links):
.social-links a{
display: inline-block;
width: 43px;
height: 43px;
margin: 0 10px 10px 0;
color: #0076a9;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
Set the -webkit-transition-duration:1s; to the input without the hover in your css, like so:
.form-wrapper input[type=submit] {
background-color:#0076A9;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:ease;
}
.form-wrapper input[type=submit]:hover {
background-color:#7daed3;
}
Live example: http://jsfiddle.net/YgWYh/
I have have an image which its background color changes when hover.
It takes 1 second to change the colour, but as soon as the courser moves out of the image it changes back without any effect.
How can I have an effect for to fade out the background colour?
CSS:
.latestTrack {
margin:80px 0 0 0 !important;
}
.latestTrack img {
float:right;
margin-right:50px !important;
}
.latestTrack img:hover
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
background-color:#f7710f;
}
HTML:
<img src="img/SocIco/soundcloud-large.png" />
You forgot the easing out part:
.latestTrack img {
float:right;
margin-right:50px !important;
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
-ms-transition: all 1s ease-out;
transition: all 1s ease-out;
}
jsFiddle example here.
I've got a <span> with some text in it and when you hover over it an image comes sliding down the page. So far so good. However, when your mouse accidentally hovers over the image, the animation will be stopped. I do not want that.
.coffee {
-webkit-transition: color 0.2s linear;
-moz-transition: color 0.2s linear;
-o-transition: color 0.2s linear;
-ms-transition: color 0.2s linear;
transition: color 0.2s linear;
z-index: 10;
}
.coffee:hover {
color: #B88A00;
}
.coffee img {
position: absolute;
display: block;
height: 100px;
width: 100px;
z-index: 1;
left: 280px;
top: 50px;
opacity: 0;
-webkit-transition: top 0.4s ease-in-out, opacity 0.6s ease-in-out;
-moz-transition: top 0.4s ease-in-out, opacity 0.6s ease-in-out;
-o-transition: top 0.4s ease-in-out, opacity 0.6s ease-in-out;
-ms-transition: top 0.4s ease-in-out, opacity 0.6s ease-in-out;
transition: top 0.4s ease-in-out, opacity 0.6s ease-in-out;
}
.coffee:hover img {
top: 150px;
opacity: 1;
}
Any help would be much appreciated.
As per i understand may be that's you want. Write like this:
HTML
<span class="coffee"><u>coffee</u></span>!
<img src="image.jpg" alt="Coffee!"/>
CSS
.coffee:hover + img{
top: 150px;
opacity: 1;
}
Check this http://jsfiddle.net/quLKb/2/
You can use the pointer-events attribute. If you set it to none, mouse events are omitted on elements with that css-rule applied.
.coffee img {
pointer-events: none;
}
Here's the modified example: http://jsfiddle.net/kFd9g/