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
i think it's easier to make this effect with a :before or a :after pseudo element instead of using the background if you're not using self closing tags.
div { padding: 50px; border: 2px solid #000; color: #000; position: relative; transition: 0.3s ease; }
div:after { content: ""; height: 0; width: 100%; background-color: #A72424; position: absolute; top: 0; left: 0; transition: 0.3s ease; }
div:hover { color: #fff; border-color: #A72424; }
div:hover:after { height: 100%; }
in case you need to use the linear gradient you just need to change the linear-gradient direction into "to bottom" instead of "to top"
div { background-image: linear-gradient(to bottom, #A72424 50%, transparent 50%); }
div:hover { background-image: linear-gradient(to bottom, #A72424 50%, transparent 50%); }
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.