I want to make a pop-up footer from elements that appeared when the user hover on a small part of it using only CSS. I run the code on jsfiddle and it's working.
Unfortunately, when I run it from localhost on google version 88.0.4 (using visual studio code), I can clearly see that the element properties didn't load on time. they are generating too slow. The transition is indeed working, the problem only happened just after the refresh/the page loaded.
This is the code:
https://jsfiddle.net/hzvgcw58/4/
And this is the video:
https://youtu.be/hiNX-e9uHWA
the problem occurred at 00:02 to 00:06, when I refresh the page
How to fix this?
.tab-container {
position: relative;
height: 200px;
width: 870px;
margin: auto;
overflow: hidden;
background-color: rgba(255, 247, 234, 0.95);
}
.tab {
position: relative;
bottom: -153px;
height: 47px;
width: 182px;
z-index: 9;
border-radius: 15px 15px 0px 0px;
background-color: none;
opacity: 0.5;
transition: 2s ease-in-out;
}
.tab::after {
width: 870px;
height: 113px;
background-color: none;
position: absolute;
bottom: -112px;
left: 0px;
content: '';
z-index: 3;
}
.a {
position: absolute;
bottom: 0;
left: 0;
z-index: 3;
width: 150px;
height: 19px;
background-color: rgba(54, 52, 49, 1);
border-radius: 15px 15px 0px 0px;
padding: 14px 16px;
font-size: 17px;
transition: 2s ease-in-out;
}
.b {
background-color: rgba(54, 52, 49, 1);
position: absolute;
bottom: -113px;
z-index: 3;
padding: 6px 0px;
height: 101px;
width: 870px;
transition: 2s ease-in-out;
}
/* Change background color of buttons on hover */
.tab:hover {
bottom: -40px;
transition: 2s ease-in-out;
}
.tab:hover + .a {
cursor: pointer;
transition: 2s ease-in-out;
bottom: 112px;
display: block;
}
.tab:hover ~ .b {
cursor: pointer;
transition: 2s ease-in-out;
display: block;
bottom: 0;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example</title>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<div class="footer-container">
<div class="footer">
<div class="tab-container">
<div class="tab">
</div>
<div class="a">
London
</div>
<div class="b">
<h3>London</h3>
<p>London is the capital city of England.</p>
</div>
</div>
</div>
</div>
</body>
</html>
Edit:
Thanks to #rauberdaniel the code has finally been fixed. i deleted some of unnecessary attributes such as transition: 2s ease-in-out; & display: block; in .tab:hover + .a { and changed a few codes in html
Change your transition attributes to include only the value you want to transition (in this case bottom), so for example:
.tab:hover {
transition: bottom 2s ease-in-out;
}
Be aware though that transitioning positional values like top or bottom is generally a bad idea because it will trigger a lot of expensive layout tasks for the browser. Instead, you should use transform: translate(…) in order to move the footer up.
Related
I have some text with an animated background, basically just a solid color that fills from top to bottom on hover. I'd like the text to change color as the background crosses the text. So if it were to pause halfway through the text, or even a letter, part of the text would be one color and the rest of the text another color. I know I've seen this done somewhere but can't find any examples now.
In my gif below, I have the text just transitioning between colors but it's not really the effect I'd like to have.
What I would do is use a pseudo-element (e.g. "::before") to duplicate the text and have the different color and background, absolutely position it on top of the other, and then transition the clip-path (with as well clip for IE and Safari support).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.example {
color: #115;
background: #fff;
font-size: 2.5em;
padding: .25em;
position: relative;
}
.example:hover,
.example:focus {
/* this empty rule is a fix for IE10 */
}
.example::before {
content: attr(data-text);
color: #fff;
background: #115;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: .25em;
clip: rect(0,0,2em,0);
clip-path: inset(0 100% 0 0);
-moz-transition: clip .5s;
-webkit-transition: clip .5s;
transition: clip-path .5s, clip .5s;
}
.example:hover::before,
.example:focus::before {
clip: rect(0,1920px,2em,0); /* for old browsers that don't support viewport units */
clip: rect(0,100vw,2em,0); /* can't transition this if 'auto' is specified for any edge */
clip-path: inset(0);
}
</style>
</head>
<body>
<h2 class="example" data-text="Example">Example</h2>
</body>
</html>
I have something like this, I hope it will help you:
button {
text-align: left;
position: relative;
height: 45px;
width: 100%;
padding: 5px 5px 5px 15px;
font-weight: 700;
font-size: 15px;
letter-spacing: 2px;
color: #383736;
border: 2px #383736 solid;
text-transform: uppercase;
outline: 0;
overflow: hidden;
background: none;
z-index: 1;
cursor: pointer;
transition: 0.08s ease-in;
transform: rotate(90deg);
transform-origin: 20px 20px;
transition-delay: 0.48s;
}
.btn-fill:hover {
transition: 0.5s linear all;
color: white;
}
.btn-fill::before,
.btn-fill::after,
.btn-fill span::before,
.btn-fill span::after {
content: "";
position: absolute;
z-index: -2;
background: #383736;
transition: all 1s;
}
.btn-fill:hover::before,
.btn-fill:hover::after,
.btn-fill:hover span::before,
.btn-fill:hover span::after {
transition: all 1s;
}
.btn-fill-ltr::before {
top: 0;
left: 0;
height: 100%;
width: 0%;
}
.btn-fill-ltr:hover::before {
width: 100%;
}
<button class="fill btn-fill btn-fill-ltr">About</button>
Base on the work of Jamie Boelman.
Codepen: https://codepen.io/boelmanj/pen/KVveKV
I have created animation that runs hover the link.
I have created animation using in and out key frames.
But I got issue. I think this happens because of knight-rider-out animation. But I need that for mouse leave.
The issue is when the page load it is running automatically. Code pen link
.container {
padding: 50px;
max-width: 500px;
}
.dashBottom {
padding-left: 0px;
position: relative;
padding-bottom: 15px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
color: black;
text-decoration: none;
}
.dashBottom:after {
position: absolute;
content: "";
bottom: 0px;
width: 30px;
background-color: black;
height: 4px;
left: 0;
right: auto;
-webkit-animation: knight-rider-out 0.5s;
animation: knight-rider-out 0.5s;
animation-fill-mode: forwards;
}
.dashBottom:hover:after {
-webkit-animation: knight-rider-in 0.5s;
animation: knight-rider-in 0.5s;
animation-fill-mode: forwards;
}
#keyframes knight-rider-in {
from {
left: 0px;
width: 30px;
}
50% {
left: 0px;
width: 100%;
}
to {
left: calc( 100% - 30px);
width: 30px;
}
}
#keyframes knight-rider-out {
from {
left: calc( 100% - 30px);
width: 30px;
}
50% {
left: 0px;
width: 100%;
}
to {
left: 0px;
width: 30px;
}
}
<div class="container">
<a class="viewMore dashBottom" href="#">View More</a>
</div>
To avoid this you can consider transition. Here is another way to achieve the same effect with less of code:
.container {
padding: 50px;
max-width: 500px;
}
.dashBottom {
padding-left: 0px;
position: relative;
padding-bottom: 15px;
transition: all 0.3s;
color: black;
text-decoration: none;
background-image:linear-gradient(#000,#000);
background-size: 200% 4px;
background-position: calc(200% + 30px) 100%;
background-repeat:no-repeat;
transition:0.5s all;
}
.dashBottom:hover {
background-position:calc(-100% - 30px) 100%;
}
<div class="container">
<a class="viewMore dashBottom" href="#">View More</a>
</div>
I found this animated button at codepen, I changed a little bit and now want to add it to my code.
But I want the animation go backwards when the element is not hovered anymore. At the moment it goes again from top to bottom. But I wanted this:
Hover: Top to Bottom
End of Hover: Bottom to Top
I thought this is possible with :after:hover. But it doesn't worked and I'm not pretty sure if this is the correct way.
.btn {
border: 0;
padding: 0 24px;
display: block;
position: relative;
transition: border-bottom-color 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0.25s;
text-align: center;
border-bottom: solid 3px;
height: 48px;
}
.btn:not(.btn-disabled):before {
content: '';
position: absolute;
left: 0px;
bottom: 0px;
height: 0px;
width: 100%;
z-index: 0;
transition: all 0.3s cubic-bezier(1, 1, 1, 1) 0s;
}
.btn:not(.btn-disabled):hover:before {
top: 0%;
bottom: auto;
height: 100%;
}
.btn span {
position: relative;
z-index: 2;
}
.btn:focus {
outline: 0;
}
.btn:not(.btn-disabled):hover {
color: #ff0080;
border-bottom-color: #ffffcc;
}
.btn:not(.btn-disabled):active {
border-bottom-color: #0040ff;
transition-delay: 0s;
transition-duration: 0.15s;
}
.btn-primary {
background-color: #ffffcc;
color: #ff0080;
}
.btn-primary:before {
background: #fff;
}
<button type="button" class="btn btn-primary">
<span>Small Button</span>
</button>
Actually my Code is in Sass but I changed it here for the demonstration.
To prevent the transition from starting from the top when unhovered, set top: 0 and height: 0 on the pseudo element when not hovered, and change the height to 100% when hovered. When the height moves from 0 to 100% the direction of the animation would be down, and when it goes from 100% to 0, the direction would be up.
.btn {
border: 0;
padding: 0 24px;
display: block;
position: relative;
transition: border-bottom-color 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0.25s;
text-align: center;
border-bottom: solid 3px;
height: 48px;
}
.btn:not(.btn-disabled):before {
content: '';
position: absolute;
top: 0;
left: 0;
height: 0;
width: 100%;
z-index: 0;
transition: all 0.3s cubic-bezier(1, 1, 1, 1) 0s;
}
.btn:not(.btn-disabled):hover:before {
height: 100%;
}
.btn span {
position: relative;
z-index: 2;
}
.btn:focus {
outline: 0;
}
.btn:not(.btn-disabled):hover {
color: #ff0080;
border-bottom-color: #ffffcc;
}
.btn:not(.btn-disabled):active {
border-bottom-color: #0040ff;
transition-delay: 0s;
transition-duration: 0.15s;
}
.btn-primary {
background-color: #ffffcc;
color: #ff0080;
}
.btn-primary:before {
background: #fff;
}
<button type="button" class="btn btn-primary"><span>Small Button</span></button>
Change the btn:before and provide
top: 0;
left: 0;
height: 0;
I'm having trouble using the ease function in CSS.
I have an image and when you hover over it I want it to ease to get bigger and show another div.
<div class="info1">
<img src="info.png">
<div class="infoh">
<p>Information to be shown when hovered over</p>
</div>
</div>
The CSS
.infoh {
width: 180px;
height: 180px;
display: none;
position: absolute;
background-color: #ffb534;
padding: 30px;
border-radius: 100%;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border: 4px solid #ffffff;
z-index: 1;
margin-left: -80px;
margin-top: -33px;
}
.infoh p {
font-size: inherit;
text-align: center;
}
.info1:hover .infoh {
display: block;
}
.info1 {
position: absolute;
display: inline-block;
width: 32px;
height: 32px;
margin-left: 19.5%;
margin-top: -1.5%
}
I tried placing it on the image but that didn't work, then I tried on each div, and couldn't get it to ease. It just pops up.
.info1 img {
-webkit-transition: width 2s; /* Safari */
transition: width 2s;
transition-timing-function: ease;
-webkit-transition-timing-function: ease;
}
I'm not exactly sure of the effect you're after, but as #Paulie_D said, you're probably looking at using visibility and opacity.
Here's some code to try out, and at least that should give you something to work with.
(I also changed the order of your HTML a bit)
.info1 {
position: absolute;
display: inline-block;
width: 32px;
height: 32px;
}
.info1 img {
width: 32px;
height: 32px;
-webkit-transition: all 2s; /* Safari */
transition: all 2s;
transition-timing-function: ease;
-webkit-transition-timing-function: ease;
}
.infoh {
position: absolute;
visibility: hidden;
opacity: 0;
z-index: 1;
width: 180px;
height: 180px;
background-color: #ffb534;
padding: 30px;
border-radius: 100%;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border: 4px solid #ffffff;
-webkit-transition: all 1s; /*Safari*/
transition: all 1s;
}
.infoh p {
font-size: inherit;
text-align: center;
}
.info1:hover img {
width: 300px;
height: 300px;
}
.info1:hover .infoh {
visibility: visible;
opacity: 1;
-webkit-transition-delay: 1s; /*Safari*/
transition-delay: 1s;
}
<div class="info1">
<div class="infoh">
<p>Information to be shown when hovered over</p>
</div>
<img src="https://unsplash.it/300/300">
</div>
Hope this helps, and good luck!
I am using a simple :hover:after in CSS to create a dark overlay on top of a div. I also am using transition property to make it fade in and out instead of simply appearing and disappearing.
Now, fading in it does brilliantly, but fading out, on the other hand, doesn't. It simply disappears as if there never was no transition to being with.
Here's the simplified code:
HTML:
<div class="innerImg"></div>
CSS(full code):
.innerImg {
float: left;
height: 74%;
background-image: url("../images/an_image.jpg");
background-size: 100%;
background-repeat: no-repeat;
width: 100%;
border-bottom: 1px solid #9F9F9F;
transition: all .2s ease;
overflow: hidden;
position: relative;
}
.innerImg:hover {
border-color: #F8CE26;
transition: all .2s ease;
}
.innerImg:after {
transition: all .2s ease;
content: "";
}
.innerImg:hover:after {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 10;
background-color: rgba(0,0,0,0.7);
cursor: pointer;
transition: all .2s ease;
}
In desperation, I applied transition everywhere, but still, there were no changes. Originally, just putting it inside .innerImg and .innerImg:after was enough. In fact, it didn't work until I created just :after and gave that transition.
Anything stupid I'm missing here?
This is happening because you placed all the CSS properties that define the object's size on the hover selector. So when you aren't hovering over it, it has no size (and it disappears instantly).
What it looks like when not being hovered over:
What it should look like:
To fix, just move all of the size/layout properties from .innerImg:hover:after to .innerImg:after.
.innerImg:after {
display: block;
transition: all .2s ease;
content:"";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 10;
cursor: pointer;
}
.innerImg:hover:after {
background-color: rgba(0, 0, 0, 0.7);
}
Demo (I slowed down the animation so it's easier to see):
.innerImg {
float: left;
height: 74%;
background-image: url("../images/an_image.jpg");
background-size: 100%;
background-repeat: no-repeat;
width: 100%;
border-bottom: 1px solid #9F9F9F;
transition: all .5s ease;
overflow: hidden;
position: relative;
}
.innerImg:hover {
border-color: #F8CE26;
transition: all .5s ease;
}
.innerImg:after {
display: block;
transition: all .5s ease;
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 10;
cursor: pointer;
}
.innerImg:hover:after {
background-color: rgba(0, 0, 0, 0.7);
}
<div class="innerImg">Hover over me!</div>