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>
Related
So i made a simple button with a perspective pseudo element that flips on hover.
This works perfectly well on android and pc, but on iphone/ipad the text is only visible in the upper half.
Also tried adding a span for the text and position it above the stack, same result.
Does anyone know how to fix this?
Couldn't find a similar question on stack so far, but should be fixable i reckon.......
PS: i use scss, so it converts including -webkit and other variants..
This is how it looks on appetize.io (and real iphone):
.btn {
position: relative;
display: inline-block;
cursor: pointer;
padding: 12px 20px;
margin: 10px 10px;
text-decoration: none;
-webkit-perspective: 500px;
perspective: 500px;
color: #fff;
-webkit-transition: all .4s ease-in;
transition: all .4s ease-in;
z-index: 10;
line-height: 20px;
overflow: visible;
}
.btn:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
background-color: #f00;
border-radius: 12px;
left: 0;
-webkit-perspective: 500px;
perspective: 500px;
-webkit-transform: translateY(-50%) rotateX(45deg);
transform: translateY(-50%) rotateX(45deg);
min-height: 20px;
top: 50%;
z-index: -10;
-webkit-transition: all .4s ease-out;
transition: all .4s ease-out
}
.btn:hover:after {
color: #fff;
-webkit-transform: translateY(-50%) rotateX(-135deg);
transform: translateY(-50%) rotateX(-135deg);
background-color: #000
}
<div class="btn">this is unreadable on ios?</div>
I have made a little animation that add a line under the box from the left to the right when it's hovered and the line go back from the left to the right when the mouse isn't hovering the box, but the issue is that the line goes back from the left to the right when I refresh the page. Is there a solution to disable the animation when I open the page or when I refresh it (if possible without JavaScript)
body {
background-color: black;
}
.box {
width: 100px;
height: 100px;
margin: 40px auto;
background-color: #f44336;
position: relative;
}
.box::after {
content: '';
position: absolute;
bottom: -7px;
width: 100%;
height: 3px;
background-color: #fff;
animation: out 400ms linear forwards;
transform-origin: right center;
}
.box:hover::after {
animation: in 400ms linear;
transform-origin: left center;
}
#keyframes in {
from {
transform: scaleX(0);
}
to {
transform: scaleX(1);
}
}
#keyframes out {
from {
transform: scaleX(1);
}
to {
transform: scaleX(0);
}
}
<div class="box"></div>
I changed your animation to a transition instead. Is this what you're after?
body {
background-color: black;
}
.box {
width: 100px;
height: 100px;
margin: 40px auto;
background-color: #f44336;
position: relative;
}
.box::after {
content: '';
position: absolute;
bottom: -7px;
width: 100%;
height: 3px;
background-color: #fff;
transform: scaleX(0);
transform-origin: right center;
transition: transform 400ms linear;
}
.box:hover::after {
transform: scaleX(1);
transform-origin: left center;
}
<div class="box"></div>
I don't believe this is possible using only css - you can use a css declaration when a mouse-over ends, however it will always trigger upon load.
You can however use simple JS using classes "on" and "off" to differentiate 'page load' and 'hover off'.
The code in this instance would be:
demo
$(".box").hover(
function () {
$(this).removeClass('off').addClass('on');
},
function () {
$(this).removeClass('on').addClass('off');
}
);
body {
background-color: black;
}
.box {
width: 200px;
height: 200px;
margin: 40px auto;
background-color: #f44336;
position: relative;
}
.box::after {
content: '';
position: absolute;
bottom: -7px;
height: 3px;
background-color: #fff;
}
.box.off::after {
width: 100%;
animation: out 400ms linear forwards;
transform-origin: right center;
}
.box.on::after {
width: 100%;
animation: in 400ms linear;
transform-origin: left center;
}
#keyframes in {
from {
transform: scaleX(0);
}
to {
transform: scaleX(1);
}
}
#keyframes out {
from {
transform: scaleX(1);
}
to {
transform: scaleX(0);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box"></div>
I've got a box with a nice hover overlay that animates in. This works fine on all browsers, however on Safari (desktop and mobile) there are some styles that aren't applied correctly (Width, height, and padding). When I toggle these styles off and on again using the inspector everything is as it should be, Safari just doesn't seem to correctly apply at the beginning. Also, there is no CSS inheritance issue as Safari claims to be using the rules as defined below, adding !important has no effect. See code and images below.
HTML
<div class="col-md-5 hla-building-col animated fadeInUp" style="height:350px;background-image:url(/placeholder.jpg)">
<div class="overlay text-center">
<h3>Karma</h3>
<p>Sitting right in the heart of it all...</p>
<a>Learn More</a>
</div>
</div>
CSS
.hla-building-col {
padding: 0;
box-shadow: -1px 0px 50px -6px rgba(102,103,102,1);
}
.hla-building-col .overlay {
background-color: rgba(255,255,255,.9);
width: 80%;
height: 40px;
padding: 8px 15px;
margin: 0 auto;
transform: translateY(165px);
transition: all 600ms ease;
}
.hla-building-col:hover .overlay {
width: 100%;
height: 100%;
padding: 100px 15px;
/**** EDIT: Properties above are not rendering ****/
margin: 0 auto;
transform: translateY(0);
/* transition: all 600ms ease; */
animation-duration: 1s;
animation-name: slidein;
}
.hla-building-col .overlay p, .hla-building-col .overlay a {
opacity: 0;
}
.hla-building-col:hover .overlay p, .hla-building-col:hover .overlay a {
opacity: 1;
transition: all 1000ms ease;
transition-delay: 1000ms;
}
#keyframes slidein {
from {
width: 60%;
height: 40px;
transform: translateY(165px);
padding-top: 8px;
}
to {
width: 100%;
height: 100%;
transform: translateY(0);
padding-top: 100px;
}
}
Safari uses WebKit, you can add it to your css with the -webkit- prefix.
Read more about it here: en.wikipedia.org/wiki/WebKit and here: developer.mozilla.org/en-US/docs/Web/CSS/Webkit_Extensions
Here's the CodePen.
The square changes to a circle as expected when it slides to the right, but when it returns back to the left, it stays a circle instead of changing to a square.
Also, I can only click the <a> once. If I try to click multiple times, it doesn't work.
Trying to do this with only CSS (if possible).
body {
margin-top: 30px;
background: gainsboro;
}
.container {
margin: auto;
width: 100%;
}
.path {
position: relative;
overflow: hidden;
width: 100%;
height: 80px;
x-background: white;
}
#keyframes ani {
0% {
left: 0;
}
50% {
left: 95%;
}
100% {
left: 0;
}
}
.shape:target {
border-radius: 50%;
transition: all .7s ease-in-out;
animation-name: ani;
animation-duration: 2s;
animation-direction: alternate;
animation-fill-mode: none;
}
.shape {
position: absolute;
left: 0;
background-color: slateblue;
width: 80px;
height: 80px;
display: block;
border-radius: none;
transition: border-radius .4s ease-out;
}
<div class="container">
<div class="path">
<span id="elem" class="shape"></span>
</div>
</div>
The closest you can get with just CSS is this, as far as I know:
body {
margin-top: 30px;
background: gainsboro;
}
.container {
margin: auto;
width: 100%;
}
.path {
position: relative;
overflow: hidden;
width: 100%;
height: 80px;
x-background: white;
}
#keyframes ani {
0% {
left: 0;
}
50% {
left: 95%;
}
100% {
left: 0;
}
}
.path a:focus .shape {
border-radius: 50%;
transition: all .7s ease-in-out;
animation-name: ani;
animation-duration: 2s;
animation-direction: alternate;
animation-fill-mode: none;
}
.shape {
position: absolute;
left: 0;
background-color: slateblue;
width: 80px;
height: 80px;
display: block;
border-radius: none;
transition: border-radius .4s ease-out;
}
<div class="container">
<div class="path">
<span id="elem" class="shape"></span>
</div>
</div>
The problem before was triggering the state with :target:. This is tough to debug with sites like Codepen or other embedded editors, since you can't see the hash change. Basically, clicking the link would append #elem to the URL, apply the :target styles to .shape, and stay like that until the hash changes.
This solution uses :focus, which gets you closer to your goal, but not all the way. To repeat the animation, you need to defocus/blur the circle, then click it again.
I'm usually all for CSS-only effects, but I'm pretty sure you'll need Javascript for this. Something as simple as applying a class on click, waiting 2 seconds, then removing the class would accomplish the same effect more reliably.
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>