trying to get my website to transition text-shadow on and off hover. When I use a transition without a specified property you can see font-size,color,etc transition. When specifying the text-shadow property in the transition no transition appears (currently using Chrome to test).
nav ul li a {
color: white;
transition: text-shadow 0.5s ease;
}
nav ul li a:hover {
color:grey;
text-shadow: 2px 2px 10px rgba(255,255,255,0.23);
}
Are you sure you are not being deceived by the lightness of your color? I have amended your code and made it a workable snippet, and if I change the color to something more explicit, like red and yellow, you can actually see the effect. It's pretty feint, though. It seems like adding that property to the default does indeed work.
body {
background: black;
}
h1, h2 {
color: white;
text-shadow: 2px 2px 10px red;
transition: text-shadow 1s ease;
z-index: 1;
position: relative;
}
h2 {
text-shadow: 2px 2px 10px transparent;
}
h1:hover,
h2:hover {
text-shadow: 2px 2px 10px yellow;
}
<h1>Hover on me for text shadow!</h1>
<h2>Hover on me for text shadow!</h2>
You need to add shadow and transition in both declarations
Try this css code
nav ul li a {
color: white;
transition: 0.5s ease;
text-shadow: 2px 2px 10px rgba(255,255,255,0);
}
nav ul li a:hover {
color:grey;
text-shadow: 2px 2px 10px rgba(255,255,255,0.23);
transition: 0.5s ease;
}
Related
Other code that might be blocking the animation:
.projectLinks a{
background-color: var(--secondary-color);
color: var(--main-color);
padding: 2px 4px 4px 4px;
border-radius: 15px;
margin-right: 25px;
text-decoration: none;
Animation
transition-property: transform;
transition-duration: .3s;
}
.projectLinks a:hover{
background-color: var(--secondary-hover);
transform: translateY(-3px);
}
The hover color is applied but there is no transition. Why is that?
Here is a link to a codepen recreation of what I have:
https://codepen.io/Ancross/pen/yLKabeM
You will want to change the display property of the links. By default they are display inline.
To keep a similar look, I used display:inline
.projectLinks a{
background-color: rgb(0, 153, 255);
color: white;
padding: 2px 4px 4px 4px;
border-radius: 15px;
margin-right: 25px;
text-decoration: none;
transition-property: transform;
transition-duration: .3s;
display:inline-block;
}
.projectLinks a:hover{
background-color: rgb(1, 137, 228);
transform: translateY(-3px);
}
<div class='projectLinks'>
<a>Text</a>
</div>
You are using translateY on an inline-level element which can not be transformed due to some limitation. To use it correctly you can make it an inline-block
write this line in CSS like
.projectLinks a {
...
display: inline-block;
}
this will cause this to display inline but as a block for more info about inline element and block level element please refer below MDN docs:
inline elements: https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements
block level element: https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements
Hello my problem is simple I have multiple li element with and image and a text inside but the problem is that when I apply this code for zoom it on hover:
.thumb > li a {
border-width: 1px;
border-style: solid;
-moz-border-top-colors: none;
-moz-border-right-colors: none;
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
border-image: none;
border-color: #E5E6E9 #DFE0E4 #D0D1D5;
display: block;
margin: 2px;
position: relative;
transition: all 0.3s ease 0s;
}
.thumb > li a:hover {
border-color: #00C0FF;
box-shadow: 0px 0px 7px #00C0FF;
text-decoration: none;
outline: medium none;
transition: all 0.3s ease 0s;
transform: scale(1.1);
}
It cover the previous li element so some border will not display correctly so I'm wondering if is possible to correct it.
Thanks.
Add this to .thumb>li a:hover (the background is for becoming opaque):
.thumb > li a:hover{
background-color: white;
z-index: 1;
}
fiddle here.
this is fast, I have a menu that I am trying to animate with the :hover event, the menu is on a navbar and what I am trying to accomplish is the same behavior as Twitter navbar, once you hover the links, a border bottom appears, in my case is a box-shadow but it doesn't matter. As you see in the example, there is an animation once the user hover the links and I want the same animation when the user leaves
See here my codepen
and here my css
.capilleira-navbar{
background: white;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
a {
color: getColor(night);
}
a:hover, a:focus {
background: getColor(snow) !important;
color: red;
box-shadow: inset 0px -4px 0px 0px red;
margin: 0px;
transition: all 0.4s ease-in-out;
}
img {
max-width:100px;
margin-top: -7px;
}
.navbar-nav {
margin-left: 30px;
}
.navbar-nav > li > a {
padding-left: 30px;
padding-right: 30px;
}
}
.one {
transition: all 0.4s ease-in-out;
}
.one:hover {
box-shadow: inset 0px -4px 0px 0px red;
transition: all 0.4s ease-in-out;
}
<div class="one">
Hover
</div>
This is because you have the transition in the 'a:hover' declaration and not the 'a' declaration. The 'a:hover' is only in effect whilst you are hovering over the element, once you move the mouse off, it doesn't apply anymore, hence why the transition doesn't have any effect then. If you move the transition to the 'a', it will work correctly as shown in this codepen
a {
color: getColor(night);
transition: all 0.4s ease-in-out;
}
a:hover, a:focus {
background: getColor(snow) !important;
color: red;
box-shadow: inset 0px -4px 0px 0px red;
margin: 0px;
}
Remove the transition in a:hover, a:focus and add this
a
{
transition: all 0.4s ease-in-out;
}
I am working here http://tinyurl.com/a74ko2o , this is an ecommerce store , powered by wordpress and my issue is in single product page , css designing in this link page , you guys can see thumbnails under the big image on hover thumbnails shows solid red border
I add this effect, but now, the problem is when it hovered , the image's moving down , and not fixed. i need it to be fixed , exact as this website http://emporium.premiumcoding.com/demo.php
css here for thumbnails
.leftcontentsp .thumbnails img {
border: 4px solid #343434;
height: 92px;
margin: 5px 4px 8px 0;
width: 92px;
}
on hover
.leftcontentsp .thumbnails img:hover, .product_list_widget li img:hover {
border: 5px solid #d00000;
}
please help to fix up this css issue , thanks in advance
The problem is because adding a 5px wide border after a 4px wide you get a 1px difference that moves the image down. We can fix this my adding and removing a padding, so the image stays in place:
.leftcontentsp .thumbnails img {
border: 4px solid #343434;
height: 92px;
margin: 5px 4px 8px 0;
width: 92px;
padding: 1px;
}
.leftcontentsp .thumbnails img:hover, .product_list_widget li img:hover {
border: 5px solid #d00000;
padding: 0;
}
Or if it's a mistake, just make the border the same wide on :hover as on the normal.
.leftcontentsp .thumbnails img:hover, .product_list_widget li img:hover {
border: 4px solid #d00000;
}
see the difference men
give same border width
.leftcontentsp .thumbnails img:hover, .product_list_widget li img:hover {
border: 4px solid #d00000;
}
as in natural state
1px disturbing
and this is for
transition on hover
.leftcontentsp .thumbnails img:hover, .product_list_widget li img:hover {
border: 4px solid #d00000;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
}
I tested the below code but gain no success:
input[type="text"]:focus, input[type="password"]:focus {
outline:none;
-moz-transition: box-shadow 0.3s ease-out 0s;
background-clip: padding-box;
border: 1px solid #B6B6B6;
border-radius: 3px 3px 3px 3px;
color: #404040;
font-size: 16px;
height: auto;
line-height: 16px;
padding: 10px;
}
Is there something here I'm missing?
Opera applies a yellow outline to form inputs that have saved login information. I don't think it is possible to override it with CSS.
Instead of using outline:none; try using border:0; given outline:none ll create cross-browser problem...
add this in your css which u are using
textarea:focus {
outline-width: 0;
}
for me it worked with that addition on Opera/Safari/Chrome
input:focus {
outline: 0 none;
}