In this Fiddle (html+css) you can see that if you mouseover the "link" both, font and background, slowly rea-animates but if you mouseout ONLY the font re-animates again. The background just fast blink back to
a {background:}
How do I force the background to animate even on mouseout?
You had your transition for the background only on the hover. That means that if the user isn't hovering the transition isn't executed. By giving #dolu a transition: 5s instead of transition: color 5s it is fixed.
updated fiddle
Full CSS:
body {background: red; }
#dolu {
position: absolute;
bottom: 5px; text-align:
center; width: 100%;
}
#dolu a:hover {
color: white;
background: rgb(31, 31, 31);
}
#dolu a {
color: black;
background: white;
font-size: 40px;
font-weight: bold;
font-family: sans-serif;
font-variant: normal;
text-decoration: none;
padding: 10 20 6 20;
transition: 5s;
}
Related
This question already has answers here:
CSS transition not working with underline
(10 answers)
Closed 5 months ago.
I would like the text to underline when I hover over it, with a slight transition to make it look nice, but it underlines directly and the transition doesn't occur, what's my mistake?
.habilidades__titulo {
text-decoration: none;
text-align: center;
font-size: 48px;
color: var(--branco-principal);
}
.habilidades__titulo:hover {
text-decoration: underline;
transition: 2s all;
}
<a href="#" class="habilidades__titulo">
title
</a>
Use border instead and apply the transition on the border color.
.habilidades__titulo {
text-decoration: none;
text-align: center;
font-size: 48px;
color: red;
transition: 2s border;
border-bottom: 0.1em solid transparent;
}
.habilidades__titulo:hover {
border-color: currentColor;
}
<a href="#" class="habilidades__titulo">
title
</a>
Set your text-decoration color to 'transparent'. Then on hover you can set the color to whatever you want. Transition should target text-decoration-color.
.habilidades__titulo {
text-decoration: underline;
text-decoration-color: transparent;
text-align: center;
font-size: 48px;
color: var(--branco-principal);
display: inline-block;
transition: .4s text-decoration-color ease;
}
.habilidades__titulo:hover {
text-decoration-color: darkorchid;
}
<div class="habilidades__titulo">test</div>
This is very hacky. You might want to wrap it inside a div with fixed width.
.habilidades__titulo {
text-decoration: none;
text-align: center;
font-size: 48px;
color: red;
display:inline-block;
width:0px;
border-bottom: 0.1em solid red;
transition: all .2s ease;
}
.habilidades__titulo:hover {
width:90px;
}
<a href="#" class="habilidades__titulo">
title
</a>
Issue
This problem is caused by CSS transition. Transition doesn't work for values that cannot be represented numerically: auto, display: none/block/flex, etc.
text-decoration: none <-> underline is NOT numerical. That is why your code doesn't work.
More examples:
❌height: 0 <-> height: auto
❌display: none <-> display: flex
✅height: 0 <-> height: 100vh
✅color: blue <-> color: red (Colors CAN be represented numerically)
Solution
Change text-decoration-color instead of text-decoration-line(= text-decoration in your code)
.habilidades__titulo {
text-decoration-color: transparent; /* rgba(0, 0, 0, 0) */
text-align: center;
font-size: 48px;
color: var(--branco-principal);
transition: 2s all; /* Moved */
}
.habilidades__titulo:hover {
text-decoration-color: inherit; /* The same color as font-color */
/* transition: 2s all; */
}
<a href="#" class="habilidades__titulo">
title
</a>
I have an issue with my Navbar, when I try to scroll, the body goes all the way up behind the logo. See below picture for reference:
Is there anyway I could make the body disappear when I scroll? Preferably it would disappear before the red line.
Sorry for my bad english and if the question might be a bit dumb. New to development, still learning :)
Here's my CSS code for the navbar:
#header {
height: 100px;
transition: all 0.5s;
z-index: 997;
transition: all 0.5s;
background: rgba(42, 44, 57, 0.9);
}
#header.header-transparent {
background: transparent;
}
#header.header-scrolled {
background: #fff;
}
#header .logo h1 {
font-size: 28px;
margin: 0;
padding: 0;
line-height: 1;
font-weight: 700;
letter-spacing: 1px;
}
Have you tried changing the background color of the navbar:
#header {
height: 100px;
transition: all 0.5s;
z-index: 997;
transition: all 0.5s;
background: white;
}
#header.header-transparent {
background: transparent;
}
#header.header-scrolled {
background: #fff;
}
#header .logo h1 {
font-size: 28px;
margin: 0;
padding: 0;
line-height: 1;
font-weight: 700;
letter-spacing: 1px;
}
I need to set css of button like this website, where you can see the Read more button with Dark color and half shadow
Please see the following image:
I tried below code, but I failed:
.rmbutton {
color: #ffffff !important;
background: #504d62 !important;
position: relative;
overflow: hidden;
padding: 13px 35px;
text-transform: uppercase;
display: inline-block;
font-size: 14px;
transition-property: background;
transition-duration: 0.3s;
transition-timing-function: ease;
transition-delay: 0s;
text-align: center;
font-weight: bold;
}
Thanks in advance!
Simple background, You should fiddle with the values to your liking.
button {
color: white;
padding: 40px 80px;
background: linear-gradient(100deg, red 25%, blue 26%);
}
<button>Don't click me</button>
I could really use some help in my css code.
I'm trying to make my <h1> change color and shape using the transition property.
I want the shape and color to change slowly while I hover over the headline,
but currently only the color is affected, and the shape changes independently.
my code is as follows :
html :
<h1 class="box">Abcdefg</h1>
css :
.box {
background: #2db34a;
margin: 1px auto;
transition: background 1s linear;
border-radius: 0.3%;
color: white;
cursor: pointer;
height: 95px;
line-height: 95px;
text-align: center;
width: 400px;
}
.box:hover {
background: #ff7b29;
border-radius: 50%;
}
thanks.
You just need to add border-radius to your transition
.box {
background: #2db34a;
margin: 1px auto;
transition: background 1s linear, border-radius 1s linear;
border-radius: 0.3%;
color: white;
cursor: pointer;
height: 95px;
line-height: 95px;
text-align: center;
width: 400px;
}
.box:hover {
background: #ff7b29;
border-radius: 50%;
}
<h1 class="box">Abcdefg</h1>
You have the next line of code:
transition: background 1s linear;
The transition only works on the background right now. If you change background to all the transition will work on both background and border-radius, like this:
transition: all 1s linear;
Use all in the transition setting to affect both the border-radius and the background-color:
.box {
background: #2db34a;
margin: 1px auto;
transition: all 1s linear;
border-radius: 0.3%;
color: white;
cursor: pointer;
height: 95px;
line-height: 95px;
text-align: center;
width: 400px;
}
.box:hover {
background: #ff7b29;
border-radius: 50%;
}
<h1 class="box">Abcdefg</h1>
Transitions work only on properties that have numbers. That being said, the question is it should work for the border-radius as well. But the problem here is the browser is unable to find the initial state of the property. Just add border-radius: 0% and it should work.
HTML code:
<p> the code is :</p>
<h1 class="sheet">Abcdefg</h1>
CSS Code:
css code :
.sheet {
background: blue;
margin: 1px auto;
transition: background 5s linear , border-radius 5s ease-in-out ;
color: white;
cursor: pointer;
height: 95px;
line-height: 95px;
text-align: center;
width: 400px;
}
.sheet:hover {
background: red;
color:grey;
border-radius: 40%;
}
I'm making a simple button with a CSS underline ease transition. All other ease transitions are working fine (hover, ease in, un-hover, ease out), but border-bottom will not ease out. When you quit hovering, it simply reverts back to normal without easing out.
Here is a code-pen with a quick button I made to illustrate the problem.
https://codepen.io/anon/pen/jwgpdv
Here is my CSS:
.gbtn {
background: #bba989;
text-align: center;
line-height: 150px;
height: 150px;
color: white;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 12px;
display: inline-block;
transition: all .25s ease;
box-sizing: border-box;
font-family: "montserrat", serif;
padding: 0px 30px;
}
.gbtn:hover {
background-color: #aa9470;
border-bottom: 150px solid #242424;
}
You didn't define a border before hover, how is the browser supposed to know how to transition out?
Add this:
.gbtn {
border-bottom: 0 solid #242424;
}