What is supposed to happen: Button grows slightly when hovered over.
What does happen: Button grows slightly when hovered over and move to the right.
How can I fix this?
Here is the code:
CSS
#skipButton
{
border-radius: 10em;
background: -moz-radial-gradient(center, Pink, Magenta);
background: -webkit-radial-gradient(center, Pink, Magenta);
background: radial-gradient(center, Pink, Magenta);
border: none;
font-family: cursive;
font-size: 2em;
left: 50%;
margin-right: -50%;
outline: none;
padding: .25em;
position: relative;
text-align: center;
-webkit-transform: translate(-50%, 0%);
-webkit-transition: -webkit-transform 0.3s ease-in-out;
}
#skipButton:hover
{
-webkit-transform: scale(1.25);
}
What's happening is that you're scaling and translating. You're implicitly translating back to 0 on hover, since it's already been set. You need this:
#skipButton:hover {
-webkit-transform: translate(-50%, 0%) scale(1.25);
}
Related
I am building a story section for the site. Following is the scss code for a story:
.story{
width: 75%;
background-color: $color-white;
font-size: 1.6rem;
margin: 0 auto;
box-shadow: 0 3rem 6rem rgba(0,0,0,0.2);
border-radius: .1rem;
padding: 4rem;
padding-left: 5.5rem;
transform: skewX(-12deg);
&__shape{
height: 15rem;
width: 15rem;
float: left;
shape-outside: circle(50% at 50% 50%);
clip-path: circle(50% at 50% 50%);
transform: translateX(-1.5rem) skewX(12deg);
position: relative;
}
&__img{
height: 100%;
transform: translateX(-4rem) scale(1.4);
backface-visibility: hidden;
transition: all .5s;
}
&__text{
transform: skewX(12deg);
}
&__caption{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,20%);
font-size: 1.7rem;
text-transform: uppercase;
color: $color-white;
text-align: center;
opacity: 0;
transition: all .5s;
backface-visibility: hidden;
}
&:hover &__caption{
transform: translate(-50%,-50%);
opacity: 1;
}
&:hover &__img{
transform: translateX(-4rem) scale(1);
filter: blur(3px) brightness(80%);
}
}
When I hover a vertical line appears on the right of image and goes away when unhovered. Following are the images of problem.
Without hover:
With hover:
This problem only appears on chrome and not on Mozilla Firefox.
It is common filter: blur(); and clip-path problem. You shape is a circle, so there is a border-radius solution.
Try to add to the image parent element:
&__shape{
/* add */
border-radius: 100%; /* will do the same circle form = your clip-path */
overflow: hidden; /* will hide everything outside the form, including your line */
}
overflow: hidden; + border-radius: 100%; on the parent element will hide that bug.
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
I make an arrow, using two borders of a box and rotating the box. When clicking it, the arrow should point up instead of down, and use a transition.
In Chrome/Safari/Firefox this works corretly. In IE11 however, it rotates weirdly. It ends up in the correct orientation, but gets there differently/around other axis than in the other browsers.
button:after {
/* make a box with two borders */
content: "";
border-left: 1.5px solid blue;
border-top: 1.5px solid blue;
transition: all 1s;
width: 10px;
height: 10px;
display: inline-block;
margin-left: 0.5rem;
/* rotate to give illusion of arrows */
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
transform-origin: 25% 25%;
-webkit-transform-origin: 25% 25%;
}
/* change direction of arrow */
button.open:after {
transform: rotateX(180deg) rotateZ(-135deg);
-webkit-transform: rotateX(180deg) rotateZ(-135deg);
}
Interactive example, click the button:
https://jsfiddle.net/b51sctnu/1/
In general, it's a good idea to keep the changes easy for the browser to understand
In your case, use 2 transforms that are the most similar posible.
Since the final step is
transform: rotateX(180deg) rotateZ(-135deg);
in the initial step use:
transform: rotateX(0deg) rotateZ(-135deg);
The 0deg rotation seems useless, but matches the final transform
Example, changing the new state to a hover to make easier to go back and forth
button:after {
content: "";
border-left: 1.5px solid blue;
border-top: 1.5px solid blue;
transition: all 1s;
width: 10px;
height: 10px;
display: inline-block;
margin-left: 0.5rem;
-webkit-transform-origin: 25% 25%;
-webkit-transform: rotate(-135deg);
transform-origin: 25% 25%;
transform: rotateX(0deg) rotateZ(-135deg);
}
button:hover:after {
-webkit-transform: rotateX(180deg) rotateZ(-135deg);
transform: rotateX(180deg) rotateZ(-135deg);
}
button {
border: 0px;
background: grey;
padding: 20px;
}
<button>asdasd</button>
I have a simple button, that I want to scale up by 10% when the user hovers on it.
I tried to achieve that by using css3 "transform: scale(1.1);" together with "transition: all .3s ease-in-out;".
It scales the button up, but also causes the text to flicker in the process. I tested it in Chrome, FF and IE - all had the same issue.
CSS:
a {
display: inline-block;
padding: 30px;
margin-top: 10%;
margin-left: 15%;
font-size: 20px;
color: #fff;
background-color: #000;
text-decoration: none;
transition: all .3s ease-in-out;
}
a:hover {
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}
Example: https://jsfiddle.net/Lfwnejkc/1/
I tried to find a solution and finally managed to fix it in Chrome by adding "backface-visibility: hidden;" to the button. The text is now bit blurrier but thats alright. Unfortunately for FF and IE this doesn't work and text inside the button is still flickering when it scales up.
a {
display: inline-block;
padding: 30px;
margin-top: 10%;
margin-left: 15%;
font-size: 20px;
color: #fff;
background-color: #000;
text-decoration: none;
transition: all .3s ease-in-out;
backface-visibility: hidden;
}
a:hover {
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}
Example: https://jsfiddle.net/Lfwnejkc/2/
I spent half a day yesterday googling around and trying to fix it. Unfortunately so far I haven't been successful.
Has anyone encountered such a problem and what is the best way to fix it?
Not perfect, but somehow better, is to move the element in the z plane, and get the zoom effect as a result of the perspective
a {
display: inline-block;
padding: 30px;
margin-top: 10%;
margin-left: 15%;
font-size: 20px;
color: #fff;
background-color: #000;
text-decoration: none;
transition: all 1s ease-in-out;
transform: perspective(1000px) translateZ(0px);
}
a:hover {
transform: perspective(1000px) translateZ(300px);
}
BUTTON