I've tried creating a ripple effect on hover over with a button, the only problem I have is that the text shakes/rattles/shivers when I hover over it, I want it to stay still for a smooth transition. Any ideas on how to stop this?
a {
display: block;
position: relative;
width: 300px;
height: 50px;
background: rgba(0, 0, 255, .2);
text-decoration: none;
text-align: center;
overflow: hidden;
margin: 10% auto;
}
p,
span:first-of-type,
span:last-of-type {
position: absolute;
margin: 0;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 0;
height: 0;
border-radius: 50%;
transition: all .3s;
}
span:first-of-type {
transition-delay: .1s;
z-index: 1;
}
span:last-of-type {
transition-delay: .2s;
z-index: 2;
}
span.cta {
color: #33C;
text-transform: uppercase;
font-family: Arial;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 300px;
display: block;
transition: color .3s;
z-index: 3;
}
a:hover p,
a:hover span:first-of-type,
a:hover span:last-of-type {
width: 110%;
height: 660%;
border-radius: 50%;
background: rgba(0, 0, 255, .2);
}
a:hover span:first-of-type,
a:hover span:last-of-type {
width: 100%;
height: 100%;
}
a:hover p span {
color: #FFF;
}
<a href="#">
<p>
<span></span>
<span class="cta">Shop the Trend</span>
<span></span>
</p>
</a>
N.B. It's fine in IE11, it happens in every other browser.
Here you go...Modified HTML[added button text inside div and applied new class "textCta" to it]
<span class="cta"><div class="textCta">Shop the Trend</div></span>
CSS
.textCta {
color:#33C;
text-transform:uppercase;
font-family:Arial;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 300px;
display: block;
transition: color .3s;
z-index: 3;
}
Demo
By deleting the p tags and placing the actual text within a div, I managed to stop the shivering and still keep the background effect the same.
Thanks to Nofi for their help.
<a href="#">
<span></span>
<div class="cta">Shop the Trend</div>
<span></span>
</a>
Related
I'm not even sure if this is possible!
I'm trying to animate the padding amount around a centered text link. When you click on the text link, the padding is changed from 20% to 100% - this bit works :)
The text is centered using CSS
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
I'm using transition property to animate the padding bit
transition-property: padding;
transition-duration: .5s;
transition-timing-function: ease-in-out;
Apologies if the code is a little clunky - here's the full code I'm using here:
#homePanel {
width: 300px;
height: 300px;
position: relative;
overflow: hidden;
}
#homePanel img {
width: 100%;
filter: grayscale(1%);
transition-property: opacity;
transition-duration: .4s;
transition-timing-function: ease-in-out;
height: auto;
}
#panelLink h3 a {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-weight: bold;
text-transform: uppercase;
text-align: center;
letter-spacing: 2px;
color: #ffffff;
background-color: rgba(0, 0, 0, 0.6);
padding: 20%;
transition-property: padding;
transition-duration: .5s;
transition-timing-function: ease-in-out;
}
#panelLink h3 a {
color: #fff;
text-decoration: none;
}
#panelLink h3 a:hover {
color: #fff;
padding: 100%;
}
<div id="homePanel">
<div id="panelLink">
<img src="https://www.landscapia.co.uk/wp-content/uploads/2022/03/landscapia-design.jpg" alt="Landscapia Design" width="600" height="600" class="img-responsive" />
<h3>Design</h3>
</div>
</div>
The problem I'm having is the text link is wobbling / flickering when I hover the link. I'm guessing this is because the CSS is trying to also re-center the text to adjust for the extra padding, which is causing the flicker on the hover.
I've also included a link to CodePen showing the code in action - https://codepen.io/rolandxp30/pen/oNqZoom
I can't think of any other way of doing this? - is there a way of stabilising or centering the text or another way of creating the same animation effect?
Thanks in advance, kind regards
Brian
I'd use an absolute positioned pseudo element on the link for the background, and then simply apply a transform: scale(...) on hover.
what is an absolute positioned pseudo element?
A pseudo element, that is absolutely positioned ;-)
Positioning it at top/right/bottom/left 0, makes it take the dimensions of the parent. And on hover, it simply gets scaled up. I used a factor of 3 here, that appears to be sufficient. You don't want to go too high here, otherwise there will be a noticeable delay before you see the it shrink again, when you un-hover the element.
#homePanel {
width: 300px;
height: 300px;
position: relative;
overflow: hidden;
}
#homePanel img {
width: 100%;
filter: grayscale(1%);
transition-property: opacity;
transition-duration: .4s;
transition-timing-function: ease-in-out;
height: auto;
}
#panelLink h3 a {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-weight: bold;
text-transform: uppercase;
text-align: center;
letter-spacing: 2px;
color: #ffffff;
padding: 20%;
}
#panelLink h3 a {
color: #fff;
text-decoration: none;
}
#panelLink h3 a::after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
background-color: rgba(0, 0, 0, 0.6);
transition-property: transform;
transition-duration: .5s;
transition-timing-function: ease-in-out;
}
#panelLink h3 a:hover::after {
transform: scale(3);
}
<div id="homePanel">
<div id="panelLink">
<img src="https://www.landscapia.co.uk/wp-content/uploads/2022/03/landscapia-design.jpg" alt="Landscapia Design" width="600" height="600" class="img-responsive" />
<h3>Design</h3>
</div>
</div>
Try this it might works!
I just make a design label outside a because of padding. (Note: Please do additional change based on your requirement if required with anchor tag.)
This is html code.
<div id="homePanel">
<div id="panelLink">
<a href="https://www.google.co.uk/"><img
src="https://www.landscapia.co.uk/wp-
content/uploads/2022/03/landscapia-design.jpg" alt="Landscapia Design"
width="600" height="600" class="img-responsive" /></a>
<h3><span>Design</span></h3>
</div>
This is css code:
#homePanel {
width: 300px;
height: 300px;
position: relative;
overflow:hidden;
}
#homePanel img {
width: 100%;
filter: grayscale(1%);
transition-property: opacity;
transition-duration: .4s;
transition-timing-function: ease-in-out;
height: auto;
}
#panelLink h3 span {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-weight: bold;
text-transform: uppercase;
letter-spacing: 2px;
color: #ffffff;
z-index: 1;
}
#panelLink h3 a {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-weight: bold;
text-transform: uppercase;
letter-spacing: 2px;
color: #ffffff;
background-color: rgba(0, 0, 0, 0.6);
padding: 20%;
transition-property: padding;
transition-duration: .5s;
transition-timing-function: ease-in-out;
}
#panelLink h3 a {
text-decoration: none;
}
#panelLink h3 a:hover {
padding: 100%;
}
Here's a codepen
I have this structure
body {
background-color: #1e1f26;
color: #fff;
font-size: 20px;
}
.card {
color: white;
width: 150px;
background-color: lightblue;
position: relative;
z-index: 0;
height: 180px;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 0 0 rgba(#000, 0.5);
transition: box-shadow 0.3s;
}
.card .description {
background-color: rgba(#fff, 0.5);
height: 100%;
box-sizing: border-box;
padding: 10px;
transition: 0.3s;
opacity: 0;
transform: translateY(10%);
}
.card:hover .description {
opacity: 1;
transform: translateY(0);
}
.card .label {
display: block;
position: absolute;
width: 100%;
transform: rotate(-45deg);
text-align: center;
bottom: 15%;
right: -30%;
background: #f31;
}
<div class="card">
<div class="description">
Lalala
</div>
<div class="label">
LABEL
</div>
</div>
Label is rotated -45 deg
Description has opacity: 0 by default, but on hover is shown
This works perfectly fine in chrome, butt in safari label text gets glitchy or somewhat blurry during the description transition.
What can cause this? Is there a fix?
I am trying to write code that mimics this animation as much as possible.
I have been going over keyframe animations & I think that they can be used to do what I need them to do.
I effectively want to have three things happen when the user hovers over the parent element. The first is the color
on the right side of the element will change dynamically (as in the picture & as in the example code), the
icon will animate into the picture & then the text will then animate.
I am new to programming & I am looking for some direction.
Example of finished product: https://imgur.com/a/bxV1V1B
DEMO
.wrapper {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
a {
display: block;
width: 200px;
height: 40px;
line-height: 40px;
font-size: 18px;
font-family: sans-serif;
text-decoration: none;
color: #333;
border: 2px solid #333;
letter-spacing: 2px;
text-align: center;
position: relative;
transition: all .35s;
}
a span {
position: relative;
z-index: 2;
}
a:after {
position: absolute;
content: "";
top: 0;
right: 0;
width: 0;
height: 100%;
background: green;
transition: all .35s;
}
a:hover:after {
width: 15%;
}
<div class="wrapper">
<span>Hover Me!</span>
</div>
Here you go. I made a CSS animation for you which will rotate and translate a new i that I have added into the HTML. I used font awesome for the check with the circle around it. Take a look:
.wrapper {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
a {
display: block;
width: 200px;
height: 40px;
line-height: 40px;
font-size: 18px;
font-family: sans-serif;
text-decoration: none;
color: #333;
border: 2px solid #333;
letter-spacing: 2px;
text-align: center;
position: relative;
transition: all .35s;
}
a span {
position: relative;
z-index: 2;
}
a:after {
position: absolute;
content: "";
top: 0;
right: 0;
width: 0;
height: 100%;
background: green;
transition: all .35s;
visibility: hidden;
}
a:hover:after {
width: 15%;
visibility: visible;
}
#check {
right: 2px;
top: 8px;
position: absolute;
display: none;
z-index: 3;
transition: right .35s;
}
a:hover #check {
animation:spin .35s linear;
display: block;
}
#keyframes spin {
0% {
transform: translate(25px) rotate(0deg);
}
100% {
transform: translate(0px) rotate(360deg);
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="wrapper">
<span>Hover Me!</span><i id="check"style="font-size:22px; color:lightgrey" class="fa fa-check-circle"></i>
</div>
So I know that two transforms don't apply at the same time. But at hover, they can replace each other?! Following is the code for a button I am trying to make, but when I hover, the properties don't seem to work! Also, the down-arrow I am trying to insert in there is also not exactly at the center. So due to which I have to use padding to center it!
.btn__bg {
position: absolute;
display: inline-block;
opacity: 0;
top: 75%;
left: 50%;
transform: translate(-50%, -50%);
height: 60px;
width: 60px;
background-color: #000;
border-radius: 50%;
text-align: center;
animation: fadeInTop 1.2s forwards ease-out 1.5s;
transition: all .2s;
box-shadow: 0 4px 40px rgba(0,0,0,.3);
}
.btn__content {
font-size: 30px;
color: #fff;
font-weight: 100;
text-decoration: none;
line-height: normal;
}
.btn__down--text {
display: inline-block;
vertical-align: middle;
}
.btn__bg:hover {
transform: translate(-50%, -50%) scale(1.5);
}
.btn__bg:hover ~ .btn__down--text {
vertical-align: middle;
}
<div class="header__main--text">
<h1 class="header__heading--primary usr-res">welcome</h1>
<a href="#" class="btn btn__bg btn__content usr-res">
<span class="btn__down--text">↓</span>
</a>
</div>
Any help would be appreciated!
It's not really clear what you mean: The scaling works (?)
The vertical position of the arrow can be adjusted with a margin-top on the span which contains it.
.btn__bg {
position: absolute;
display: inline-block;
opacity: 1;
top: 75%;
left: 50%;
transform: translate(-50%, -50%);
height: 60px;
width: 60px;
background-color: white;
border-radius: 50%;
text-align: center;
animation: fadeInTop 1.2s forwards ease-out 1.5s;
transition: all .2s;
box-shadow: 0 4px 40px rgba(0,0,0,.3);
}
.btn__content {
font-size: 30px;
color: #000;
font-weight: 100;
text-decoration: none;
line-height: normal;
}
.btn__down--text {
display: inline-block;
margin-top:0.3em;
}
.btn__bg:hover {
transform: translate(-50%, -50%) scale(1.5);
}
.btn__bg:hover ~ .btn__down--text {
vertical-align: middle;
}
<div class="header__main--text">
<h1 class="header__heading--primary usr-res">welcome</h1>
<a href="#" class="btn btn__bg btn__content usr-res">
<span class="btn__down--text">↓</span>
</a>
</div>
Hovering over btn should trigger display: block; on btn2 (which it does), then maintain this hover effect when I move the mouse below and outside of btn until I am able to click btn2 (which it currently doesn't).
I thought I could do this by using margin on btn, but that didn't work.
body {
background-color: #673ab7;
font-size: 30px;
}
.btn {
margin-bottom: 50px;
text-align: center;
line-height: 100px;
position: absolute;
left: 50%;
width: 100px;
height: 100px;
background-color: #00bcd4;
border-radius: 100%;
transition: all .2s ease-in-out;
&:hover {
transform:scale(1.05,1.05)
}
}
.btn2 {
position: absolute;
top: 110px;
left: 50.5%;
text-align: center;
line-height: 55px;
border-radius: 50px;
display: none;
width: 50px;
height: 50px;
background-color: black;
transition: all .2s ease-in-out;
&:hover {
transform:scale(1.05,1.05)
}
}
.btn:hover +.btn2{
transition: all .2s ease-in-out;
display: block;
position: absolute;
transform: scale(1.05,1.05);
transform: translate(20px);
}
.icon {
color: white;
}
.icon2 {
color: white;
width: 26px;
line-height: 20px;
}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<div class="container">
<i class="icon fa fa-link"></i>
<i class="icon2 fa fa-edit"></i>
</div>
Set your :hover css to the parent .container tag of both items so the hover rules are maintained when moving from one element to the next. This way you are maintaining the hover state when moving from child to child.
I also changed display:none; to visibility:hidden; and opacity:0|opacity:1 respectively. `display:none' isn't going to animate.
The animation time also allows for a short period of overlap (non :focus) when moving from one element to the other. With some keyframing you can make the move from one to the other a bit cleaner.
body {
background-color: #673ab7;
font-size: 30px;
}
.btn {
margin-bottom: 50px;
text-align: center;
line-height: 100px;
position: absolute;
left: 50%;
width: 100px;
height: 100px;
background-color: #00bcd4;
border-radius: 100%;
transition: all .2s ease-in-out;
&:hover {
transform:scale(1.05,1.05)
}
}
.btn2 {
position: absolute;
top: 110px;
left: 50.5%;
text-align: center;
line-height: 55px;
border-radius: 50px;
visibility:hidden;
opacity:0;
width: 50px;
height: 50px;
background-color: black;
transition: all .2s ease-in-out;
&:hover {
transform:scale(1.05,1.05)
}
}
.container:hover .btn +.btn2{
transition: all .2s ease-in-out;
visibility:visible;
opacity:1;
position: absolute;
transform: scale(1.05,1.05);
transform: translate(20px);
}
.icon {
color: white;
}
.icon2 {
color: white;
width: 26px;
line-height: 20px;
}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<div class="container">
<i class="icon fa fa-link"></i>
<i class="icon2 fa fa-edit"></i>
</div>