I'm trying to get a transition hover effect on border that the border expands on hover.
h1 {
color: #666;
}
h1:after {
position: absolute;
left: 10px;
content: '';
height: 40px;
width: 275px;
border-bottom: solid 3px #019fb6;
transition: left 250ms ease-in-out, right 250ms ease-in-out;
opacity: 0;
}
h1:hover:after {
opacity: 1;
}
<h1>CSS IS AWESOME</h1>
I've tried this on Jsfiddle
To expand the bottom border on hover, you can use transform:scaleX'(); (mdn reference) and transition it from 0 to 1 on the hover state.
Here is an example of what the border hover effect can look like :
The border and transition are set on a pseudo element to prevent transitioning the text and avoid adding markup.
To expand the bottom border from left or right, you can change the transform-origin property to the left or right of the pseudo element:
h1 { color: #666;display:inline-block; margin:0;text-transform:uppercase; }
h1:after {
display:block;
content: '';
border-bottom: solid 3px #019fb6;
transform: scaleX(0);
transition: transform 250ms ease-in-out;
}
h1:hover:after { transform: scaleX(1); }
h1.fromRight:after{ transform-origin:100% 50%; }
h1.fromLeft:after{ transform-origin: 0% 50%; }
<h1 class="fromCenter">Expand from center</h1><br/>
<h1 class="fromRight">Expand from right</h1><br/>
<h1 class="fromLeft">Expand from left</h1>
Note : You need to add vendor prefixes to maximize browser support (see canIuse).
Expand bottom border on hover with 2 lines
You can achieve this effect when the text spans on 2 lines. The before pseudo element is absolutely positioned to make underline of the first line with bottom:1.2em;:
h1 { position:relative;color: #666;display:inline-block; margin:0;text-transform:uppercase;text-align:center;line-height:1.2em; }
h1:after, h1:before {
display:block;
content: '';
border-bottom: solid 3px #019fb6;
transform: scaleX(0);
transition: transform 250ms ease-in-out;
}
h1:before{
position:absolute;
bottom:1.2em; left:0;
width:100%;
}
.ef2:hover:after {
transition-delay:150ms;
}
h1:hover:after, h1:hover:before { transform: scaleX(1); }
<h1>Expand border<br/>on two lines</h1>
<br/>
<br/>
<h1 class="ef2">Expand border<br/>effect two</h1>
Different transition direction on hover in and out :
The point is to change the transform-origin position from one side to the other on the hover state. This way the bottom boder enters from one side on hover and exits on the other when the element isn't hovered anymore.
Here is a demo :
h1 { color: #666;display:inline-block; margin:0;text-transform:uppercase; }
h1:after {
display:block;
content: '';
border-bottom: solid 3px #019fb6;
transform: scaleX(0);
transition: transform 250ms ease-in-out;
}
h1.fromLeft:after{ transform-origin: 100% 50%; }
h1.fromRight:after{ transform-origin: 0% 50%; }
h1.fromLeft:hover:after{ transform: scaleX(1); transform-origin: 0% 50%; }
h1.fromRight:hover:after{ transform: scaleX(1); transform-origin: 100% 50%; }
<h1 class="fromRight">Expand from right</h1><br/>
<h1 class="fromLeft">Expand from left</h1>
We can do this with only background. No pseudo-element needed. This is more flexible.
h1 {
/* you can change these variables to control the border */
--border-color: purple;
--border-width: 5px;
--bottom-distance: 0px; /* you can increase this */
color: #666;
display: inline-block;
background-image: linear-gradient(var(--border-color), var(--border-color));
background-size: 0% var(--border-width);
background-repeat: no-repeat;
transition: background-size 0.3s;
margin: 5px 0;
}
.fromCenter {
background-position: 50% calc(100% - var(--bottom-distance));
}
.fromRight {
background-position: 100% calc(100% - var(--bottom-distance));
}
.fromLeft {
background-position: 0 calc(100% - var(--bottom-distance))
}
h1:hover {
background-size: 100% var(--border-width);
}
<h1 class="fromCenter">Expand from center</h1><br/>
<h1 class="fromRight">Expand from right</h1><br/>
<h1 class="fromLeft">Expand from left</h1>
Multiple line animation:
h1 {
/* you can change these variables to control the border */
--border-color: purple;
--border-width: 5px;
--bottom-distance: 0px; /* you can increase this */
color: #666;
display: inline; /* should be 'inline' for multiple line animation */
background-image: linear-gradient(var(--border-color), var(--border-color));
background-size: 0% var(--border-width);
background-repeat: no-repeat;
transition: background-size 0.5s;
}
.fromCenter {
background-position: 50% calc(100% - var(--bottom-distance));
}
.fromRight {
background-position: 100% calc(100% - var(--bottom-distance));
}
.fromLeft {
background-position: 0 calc(100% - var(--bottom-distance))
}
h1:hover {
background-size: 100% var(--border-width);
}
<h1 class="fromLeft">Expand from <br>left with <br>multiple line</h1>
simple and lightweight version
li {
margin-bottom: 10px;
}
.cool-link {
display: inline-block;
color: #000;
text-decoration: none;
}
.cool-link::after {
content: '';
display: block;
width: 0;
height: 2px;
background: #000;
transition: width .3s;
}
.cool-link:hover::after {
width: 100%;
//transition: width .3s;
}
<ul>
<li><a class="cool-link" href="#">A cool link</a></li>
<li><a class="cool-link" href="#">A cool link</a></li>
<li><a class="cool-link" href="#">A cool link</a></li>
</ul>
I know this is an old post and it is already answered but you might like the following effect too.
<div class="cd-single-point">
<a class="cd-img-replace" href="#0"></a>
</div>
.cd-single-point {
position: absolute;
list-style-type: none;
left: 20px;
top: 20px;
}
.cd-single-point>a {
position: relative;
z-index: 2;
display: block;
width: 10px;
height: 10px;
border-radius: 50%;
background: #0079ff;
-webkit-transition: background-color 0.2s;
-moz-transition: background-color 0.2s;
-o-transition: background-color 0.2s;
transition: background-color 0.2s;
}
.cd-single-point::after {
content: '';
position: absolute;
border-radius: 50%;
width: 100%;
height: 100%;
top: 0;
left: 0;
animation: cd-pulse 2s infinite;
}
#keyframes cd-pulse
{
0% {box-shadow:0 0 0 0 #0079ff}
100%{box-shadow:0 0 0 20px rgba(255,150,44,0)}
}
DEMO
h1 {
color: #666;
display:inline-block;
margin:0;
text-transform:uppercase;
}
h1:after {
display:block;
content: '';
border-bottom: solid 3px #92a8d1;
transform: scaleX(0);
transition: transform 800ms ease-in-out;
}
h1:hover:after {
transform: scaleX(1);
}
<h1 class="fromCenter">Hover Over Me</h1><br/>
we can do using simple transition effect.
HTML
<h1>CSS IS AWESOME</h1>
CSS
h1 {
color: #666;
position: relative;
display: inline-block;
}
h1:after {
position: absolute;
left: 50%;
content: '';
height: 40px;
height: 5px;
background: #f00;
transition: all 0.5s linear;
width: 0;
bottom: 0;
}
h1:hover:after {
width: 270px;
margin-left: -135px;
}
Link to Fiddle
h1 {
/* you can change these variables to control the border */
--border-color: purple;
--border-width: 5px;
--bottom-distance: 0px; /* you can increase this */
color: #666;
display: inline-block;
background-image: linear-gradient(var(--border-color), var(--border-color));
background-size: 0% var(--border-width);
background-repeat: no-repeat;
transition: background-size 0.3s;
margin: 5px 0;
}
.fromCenter {
background-position: 50% calc(100% - var(--bottom-distance));
}
.fromRight {
background-position: 100% calc(100% - var(--bottom-distance));
}
.fromLeft {
background-position: 0 calc(100% - var(--bottom-distance))
}
h1:hover {
background-size: 100% var(--border-width);
}
<h1 class="fromCenter">Expand from center</h1><br/>
<h1 class="fromRight">Expand from right</h1><br/>
<h1 class="fromLeft">Expand from left</h1>
transition: all 1000ms ease-in-out;
Demo
or are you looking for this
Demo2
h1 {
color: #666;
}
h1:after {
position: absolute;
left: 10px;
content: '';
height: 40px;
width: 275px;
border-bottom: solid 3px #019fb6;
transition: all 550ms ease-in-out;
border-bottom-width: 0px;
}
h1:hover:after {
border-bottom-width: 5px;
}
<h1>CSS IS AWESOME</h1>
Related
Is there any way to make this same animation while also having a slanted background ?
either using pure css or react spring ?
Hover animation
i have tryed both solutions under but non of em go me slander background + the left to right, left to right animation.
HTML:
<div>Box</div>
How i want the slider to look like with slander.
div {
position: relative;
display: inline-block;
padding: 15px 70px;
color: #B17461;
font-size: 30px;
transition: color .5s;
overflow:hidden;
}
div:before {
content: '';
position: absolute;
top: 0; left: 0;
width: 150%; height: 100%;
background: #B17461;
z-index: -1;
transform-origin:0 0 ;
transform:translateX(-100%) skewX(-45deg);
transition: transform .5s;
}
div:hover {
color: #fff;
}
div:hover:before {
transform: translateX(0) skewX(-45deg);
}
and under her is the animation goal:
div {
position: relative;
display: inline-block;
padding: 15px 70px;
color: #B17461;
font-size: 30px;
transition: color .5s;
overflow:hidden;
background: linear-gradient(#488566 0 0) no-repeat;
background-size: 0% 100%;
background-position: 100% 0%;
transition: background-size .4s;
}
div:hover {
background-size: 100% 100%;
background-position: 0% 0%;
transition: background-size .4s;
}
The task is to make a hover effect on some list element. When mouse-over - gradient fills list element with some color from top to bottom; but when mouse-leave - gradient should continue its moving from top to bottom. With simple hover effect it always moves backways.
I use Vue and Nuxt, I want to make it on pure CSS but it seems to me its not possible. How to do it?
https://codepen.io/nosdmitry/pen/zYZgNQp
.test {
position: relative;
width: 100px;
height: 100px;
border: 1px solid red;
overflow: hidden;
}
.test::before {
position: absolute;
content: '';
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: blue;
transform: translateY(-100%);
transition: transform .3s ease;
}
.test:hover::before {
-webkit-transition: border-radius 2s;
cursor: pointer;
transform: translateY(0);
transition: transform .3s ease;
}
My code with gradient:
.test {
position: relative;
width: 100px;
height: 100px;
border: 1px solid red;
overflow: hidden;
}
.test::before {
position: absolute;
content: '';
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: blue;
transition: all .3s ease;
background: linear-gradient(to bottom, blue 50%, transparent 50%);
background-size: 100% 200%;
background-position: bottom;
}
.test:hover::before {
background-position: top;
}
Do it like below:
.box {
width:200px;
height:200px;
border:1px solid;
background: linear-gradient(blue 0 0) top/100% 0 no-repeat;
transition:0.5s, background-position 0s 0.5s;
}
.box:hover {
background-size:100% 100%;
background-position:bottom;
}
<div class="box">
</div>
I have 2 features on a page, both using Transform ease when moused over. The image on the left (the character), when moused over, eases into position. The buttons in the middle of the page are supposed to scale up, but ease to the enlarged scale.
I've tried copying the code for the part that works, and using that code respectively on the buttons, but I still can't achieve the 'ease' transition
This is the CSS for the part of the site that functions as I want it to:
#side {
position: fixed;
bottom: -10px;
left: -6px;
}
.magna {
height: 400px;
width: auto;
}
.moving {
position: relative;
transition: transform 0.3s ease;
transform: translateY(10px);
}
.moving:hover {
transform: translateX(5px);
}
This is the CSS for the buttons, that don't ease in:
#social {
margin: 0px auto;
text-align: center;
margin-top: calc(97vh - 500px);
}
.social-icon {
width: 80px;
height: 80px;
margin: 0px auto;
transition;
transform 0.3s ease;
}
.social-icon:hover {
transform: translateY(-8px);
transform: scale(1.12);
}
.middle {
padding: 0px 50px 0px 50px;
}
The project can be found live at: http://51.38.83.57/
I am looking for the buttons in the center's scale to increase but to ease into the new size as opposed to snapping to the new size
Previous code was:
.social-icon:hover { transform: translateY(-8px); transform: scale(1.12); }
Changed to:
.social-icon:hover { transform: translateY(-8px) scale(1.12); }
Suggestion from cYrixmorten was correct
Replace transform: 0.3s ease with transition: 0.3s ease;
#social {
margin: 0px auto;
text-align: center;
}
.social-icon {
width: 80px;
height: 80px;
margin: 0px auto;
transition: 0.3s ease; /* Here's the error */
}
.social-icon:hover {
transform: translateY(-8px);
transform: scale(1.12);
}
.middle {
padding: 0px 50px 0px 50px;
}
<div id="social">
<img class="social-icon" src="https://via.placeholder.com/80">
<img class="social-icon middle" src="https://via.placeholder.com/80">
<img class=" social-icon" src="https://via.placeholder.com/80">
</div>
I'm currently trying to change both my background and my text color at the same time, from left to right. Like the background is doing it.
But, since transform origin does not work in text, I would like to know how (if possible) can I achieve this?
Here is a demo of what I could do:
.container {
background-color: gray;
height: 200px;
width: 50vw;
margin: 5vw;
opacity: 0.5;
border-left: 5px solid black;
position: relative;
-webkit-transition: 0.5s all ease;
transition: 0.5s all ease;
-webkit-transform-origin: left;
transform-origin: left;
}
.container:hover {
color: white;
}
.container:hover::after {
width: 100%;
content: '';
}
.container::after {
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 0%;
opacity: 0.5;
background-color: darkgreen;
}
.container .text {
display: block;
text-align: center;
font-size: 2.3em;
font-family: 'Roboto';
line-height: 2.5em;
}
<div class="container">
<div class="text">Change Text at the same time</div>
</div>
I achieved the effect by adding the following properties to .text:
background: linear-gradient(to left, black 0%, black 50%, white 50%, white 100%); // half black and half white background
background-clip: text; // clip the background in the shape of the text
color: transparent; // remove the color of the text
background-size: 200%; // double the size of the background
background-position: 100% 0; // move the background to show just the black color
Now to make the color change effect - move the background position to 0% to show the white color:
.container:hover .text {
background-position: 0;
}
Demo
.container {
background-color: gray;
height: 200px;
width: 50vw;
margin: 5vw;
opacity: 0.5;
border-left: 5px solid black;
position: relative;
-webkit-transition: 0.5s all ease;
transition: 0.5s all ease;
transform-origin: left;
}
.container:hover .text {
background-position: 0;
}
.container:hover::after {
width: 100%;
content: '';
}
.container::after {
transition: all 1s ease;
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 0%;
opacity: 0.5;
background-color: darkgreen;
}
.container .text {
transition: all 1s ease;
display: block;
text-align: center;
font-size: 2.3em;
font-family: 'Roboto';
line-height: 2.5em;
background: linear-gradient(to left, black 0%, black 50%, white 50%, white 100%);
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
color: transparent;
background-size: 200%;
background-position: 100% 0;
}
<div class="container">
<div class="text">Change Text at the same time</div>
</div>
Browsers support:
Supported by Firefox, Chrome, and other webkit browsers.
Not supported by IE and Edge, as they don't support background-clip: text;
How could I animate the link underline with using border-bottom, so that there is space between the text and the underline?
I know how to do it in the following way, so that the default text-decoration element is animated. But I would like to have space between the link and the underline, that is why I think I need to use border-bottom. But I can't get the border-bottom work with the transition animation. How could I do this? I tried looking for other solutions, but couldn't find any. Thanks!
h2 > a {
position: relative;
color: #000;
text-decoration: none;
}
h2 > a:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
h2 > a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
you can fake an animated border via background and background-size:
a {
padding-bottom: 5px;
/* set here size + gap size from text */
background: linear-gradient(0deg, currentcolor, currentcolor) bottom center no-repeat;
background-size: 0px 3px;
transition: 0.5s;
text-decoration: none;
}
a:hover {
background-size: 100% 3px;
}
a[class] {
color: gray;
}
a.tst {
color: purple;
background: linear-gradient(0deg, currentcolor, currentcolor) bottom center no-repeat, linear-gradient(0deg, turquoise, turquoise) center calc(100% - 2px) no-repeat;
background-size: 0px 2px;
}
a.tst:hover {
background-size: 100% 2px;
}
<a href>kake animated border</a>
<a href class> why currentcolor ?</a>
<a href class="tst">mix of colors ?</a>
The code you've presented uses a pseudo-element not the default text-decoration. Since the pseudo element is positioned absolutely, you can change the distance easily. Change the a:before bottom to -5px or whatever negative value fits the distance that you want:
a {
position: relative;
color: #000;
text-decoration: none;
}
a:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: -5px;
left: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
Long long text