Is there a way to ease-in-out between 2 border thicknesses?
My code:
nav a {
border-bottom: 1px solid #AADA4B;
}
nav a:hover {
border-bottom: 3px solid #AADA4B;
}
Thanks very much for the help.
Sam.
Sure, just transition border or border-width on the a element:
nav a {
/* -moz-, -o-, -webkit- prefixes omitted for brevity */
transition: border-width 0.1s ease-in-out;
border-bottom: 1px solid #AADA4B;
}
Related
I have card component using material UI. The card is transforming on hover and there should appear shadow on the card too. But when i put the box-shadow shadow appears on the box before transforming, and there is white space between the transformed card and the shadow. How can i fix this?
const CardStyle = styled(Card)`
background: red;
transition: transform 50ms;
&:hover {
transform: scale(1.02) perspective(0px);
box-shadow: ${({ theme }) => theme.shadows[4]};
}
`;
The same output in other way:
:hover {
transform: scale(1.02) perspective(0px);
box-shadow: 4px 4px 4px rgba(60, 60, 93, 0.33)
}
Include a transition for your box-shadow if I'm understanding your intent right.
div {
height: 5rem;
width: 5rem;
margin: 3rem auto;
border: green 5px dashed;
background: red;
transition: transform .5s, box-shadow 1s;
}
div:hover {
transform: scale(1.02) perspective(0px);
box-shadow: 0 10px 10px rgba(255,0,0,.7);
}
<div></div>
Well, I have set up an animation when someone hovers over a button, and when they do so, the background color, border radius and the font color change. When I hover over it, there is a smooth animation, however when I stop hovering, there is a very sharp animation.
Code:
.button {
text-align:center;
background:#ccc;
display:inline-block;
position:relative;
text-transform:uppercase;
margin:25px;
border:solid #B26B24;
background:none;
color:#fff;
border-top-left-radius:17px;
border-top-right-radius:17px;
border-bottom-left-radius:17px;
border-bottom-right-radius:17px;
-moz-border-radius-topleft:17px;
-moz-border-radius-topright:17px;
-moz-border-radius-bottomleft:17px;
-moz-border-radius-bottomright:17px;
-webkit-border-top-left-radius:17px;
-webkit-border-top-right-radius:17px;
-webkit-border-bottom-left-radius:17px;
-webkit-border-bottom-right-radius:17px;
}
.button:hover {
background-color:#ffffff;
color:#161616;
font-size:18px;
border-top-left-radius:75px;
border-top-right-radius:75px;
border-bottom-left-radius:75px;
border-bottom-right-radius:75px;
transition: 0.75s;
-webkit-transition: 0.75s;
-ms-transition: 0.75s;
}
.button-text {
padding:0 25px;
line-height:56px;
letter-spacing:3px;
}
Working example:
http://codepen.io/Riggster/pen/eNppgJ
Does anyone know how I stop this sharp animation from happening?
I have looked on stack overflow and the internet however all I can find is people having this issue, but with javascript or JQuery.
Thanks.
You need to set the transition declaration on the element you want to animate. Right now it is only on :hover, so the animation only occurs when hovering.
.button {
transition: 0.75s;
-webkit-transition: 0.75s;
-ms-transition: 0.75s;
/* etc. */
}
.button:hover {
/* no transition declaration */
background-color: #ffffff;
color: #161616;
font-size: 18px;
border-top-left-radius: 75px;
border-top-right-radius: 75px;
border-bottom-left-radius: 75px;
border-bottom-right-radius: 75px;
}
Updated Codepen
I'm working on this site https://stagetoday.squarespace.com/ .
In the left bottom corner, there is a link, but I can't remove the text-decoration:underline when I hover over it.
I tried text-decoration:none and text-decoration:none!important but it still stays.
Can anyone help me?
It is a border
#bottomBar a:hover {
border: none;
}
or only this link
.sqs-block-content a:hover {
border: none;
}
Actually, it's not an underline it's this:
#topbar a:hover, #container a:hover, #bottomBar a:hover {
color: #999;
border-color: #999; /* here */
-webkit-transition: border 0s ease-out;
-moz-transition: border 0s ease-out;
-o-transition: border 0s ease-out;
transition: border 0s ease-out;
}
Just remove the border declarations.
you have to do :
border-bottom: 1px solid transparent;
on your file site.css on line 8096 you have this. it's not an underline property but a border bottom attribute.
change this property instead.
How do I have the properties of a declaration apply to an element after the CSS3 transitions end? I have something like:
.something {
background: blue;
padding: 10px 0px;
background-clip: content-box;
transition: box-shadow 300ms;
}
.something:hover {
box-shadow: 0px 0px 3px blue;
padding: 0px;
margin: 10px 0px;
}
I'd like the padding and margin properties in the :hover declaration to be applied after the transition is done in 300ms.
you can add a delay like this:
transition: box-shadow 300ms, padding 300ms 400ms;
The box-shadow transition will start on hover and last 300ms, and the padding will start after 400ms and again last 300ms.
.something {
background: blue;
color: white;
padding: 0px;
background-clip: context-box;
transition: box-shadow 300ms, padding 300ms 400ms;
}
.something:hover {
box-shadow: 0px 0px 3px blue;
padding: 10px;
margin: 10px 0px;
}
<div class='something'>Something</div>
Article on CSS-Tricks
You can achieve this by placing another element inside or outside .something and applying padding and margin transitions to the new element, but with transition-delay value set to the time equal or greater than time of your initial box-shadow transition.
So, for instance:
<div class="immediate">
<div class="later">
I can haz transitions.
</div>
</div>
And CSS:
.immediate {
background: #eeb;
transition: box-shadow 300ms;
}
.immediate:hover {
box-shadow: 0 0 3px black;
}
.later {
margin: 0;
padding: 10px 0;
transition: all 400ms;
transition-delay: 300ms;
}
.later:hover {
margin: 10px 0;
padding: 0;
}
This will perform the box-shadow transition in 300ms, and afterwards margin and padding in 400ms (you can set this transition time to 0 if that's the effect you're looking for).
You can try it on jsFiddle: http://jsfiddle.net/gTVVk/2/
EDIT: Duncan Beattie's answer will do just fine, unless you need to perform different transitions on the same property. Otherwise there's no point to overcomplicate things with nested divs.
When using #Duncan Beattie´s solution one property will override the other.
This should work:
transition: box-shadow 300ms linear, padding 300ms linear 400ms;
Syntax:
transition: [property] [duration] [timing-function] [delay], ... more property-transitions
I am trying to tint images onHover. I have the css working but some of the images which have rounded edges or don't completely fill the parent show the black background:
(The far left has the mouse over it)
How can hide the black so only the img is tinted?
Here is my css:
.thumb {
width:150px;
height:150px;
margin: 0px 5px 14px 14px;
float:left;
display:inline;
background: black;
overflow:hidden;
cursor: pointer;
/*border: 2px solid #00A3C6; */
}
.thumb img {
display: block;
-webkit-transition: all 0.25s linear;
-moz-transition: all 0.25s linear;
-ms-transition: all 0.25s linear;
-o-transition: all 0.25s linear;
transition: all 0.25s linear;
}
.thumb:hover img {
opacity: 0.7;
}
If the image has rounded corners, you can use border-radius in your css to set rounded corners of the "tint" container.
If the actual image has a white border... you're kind of out of luck. You can crop images but you don't have any way to doing this dynamically for any kind of image.
How can hide the black so only the img is tinted?
Try removing background: black from .thumb ?
P.S. display: inline is also not needed there