I have a small problem on a Wordpress site, I had to make an animation to go from the left to the right for buttons. So I use "linear-gradient", the problem is that, on Chrome ONLY, there are times (not on all buttons (?????)) a small line of color to the right or left of the button (sometimes you only see it when you hover the mouse)
Here is the code of one of the buttons that bug for example on the site :
a {
text-decoration: none;
display: inline-block;
font-size: 12px;
line-height: 12px;
color: #FFF;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.5px;
padding: 12px 35px;
-webkit-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
background: -webkit-gradient(linear, left top, right top, color-stop(50%, #515050), color-stop(50%, #ddc39f));
background: -webkit-linear-gradient(left, #515050 50%, #ddc39f 50%);
background: -o-linear-gradient(left, #515050 50%, #ddc39f 50%);
background: linear-gradient(to right, #515050 50%, #ddc39f 50%);
background-size: 200% 100%;
background-position: left bottom;
}
a:hover {
background-position: -100% 0;
}
En savoir plus
Here, you can see it don't bug for some reason, but in the website (when I hover it) :
Chrome button bug
So, I tried to do the animation an other way, with pseudo element, like that :
a {
text-decoration: none;
color: #ffffff;
font-size: 13px;
font-weight: 500;
background-color: #ddc39f;
font-family: 'Roboto', sans-serif;
letter-spacing: 0.5px;
padding: 8px 20px 8px 11px;
-webkit-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
position: relative;
}
a:after {
content: '';
position: absolute;
background: #515050;
top: 0;
bottom: 0;
left: 0;
right: 100%;
transition: all 0.3s ease 0s;
z-index: -1;
}
a:hover {
background: transparent;
}
a:hover:after {
right: 0;
}
En savoir plus
But the problem of this animation is that the background must pass transparent, otherwise the animation (the pseudo element) cannot be shown.
So I ask you if possible, is there a way to debug the first solution, the one that only bugs on chrome or is there a way to reproduce exactly the same effect as the first one with pseudo element? Knowing that I can't add text in the because I'm on a WordPress and that would complicate everything for not much.
Thanks for your help
For those who one day have the same problem. Apparently the problem is with the display, try putting :
display: inline-table;
and it should do the trick.
Related
This question already has answers here:
Can I use a :before or :after pseudo-element on an input field?
(22 answers)
Closed 3 years ago.
I'm using a submit button with a gradient color for the background. I would like to animate that color on hover, though gradient color is not an animatable property. I found a good CSS trick to make this work on an anchor tag using the ::before element, but it doesn't seem to work on the submit button. Below is example code for animating with the anchor. Why does this same code not work when the anchor is replaced with a submit? I think the issue is related to the height and width of the ::before element on the submit button, but can't understand why it doesn't pick up the size of the button. Thoughts?
a {
background: linear-gradient(to bottom, #3ccf2c 40%, #185400 100%);
color: white;
display: inline-block;
padding: 5px;
position: relative;
z-index: 5;
}
a::before {
background: linear-gradient(to bottom, #2d9b21 40%, #123f00 100%);
content: '';
display: block;
height: 100%;
left: 0;
position: absolute;
transition: opacity 0.4s;
top: 0;
opacity: 0;
width: 100%;
z-index: -5;
}
a:hover::before {
opacity: 1;
}
<body>
<a>submit</a>
</body>
You are able to animate the gradient background on hover. I've created a fiddle for you, so you can see: https://codepen.io/mrmathewc/pen/oNNzeJr.
<a id="DemoGradient">Button</a>
#DemoGradient{
background: -webkit-linear-gradient(#C7D3DC,#5B798E);
background: -moz-linear-gradient(#C7D3DC,#5B798E);
background: -o-linear-gradient(#C7D3DC,#5B798E);
background: linear-gradient(#C7D3DC,#5B798E);
-webkit-transition: background 1s ease-out;
-moz-transition: background 1s ease-out;
-o-transition: background 1s ease-out;
transition: background 1s ease-out;
background-size:1px 200px;
border-radius: 10px;
border: 1px solid #839DB0;
cursor:pointer;
width: 150px;
height: 100px;
padding: 10px;
margin: 10px;
}
#DemoGradient:Hover{
background-position:100px;
}
I hope this helps.
I have faced a wired issue in chrome browser with button css. When I hover this button in chrome(not in firefox) its give unexpected effect.
here is current css:
input[type="button"], .button, button {
font-size: 100%;
transition: none !important;
text-transform: uppercase;
padding: 5px 15px;
line-height: 17px;
border-radius: 0px;
border: 3px solid #DDD;
background: transparent none repeat scroll 0% 0%;
color: #666;
font-weight: bold;
display: inline-block;
vertical-align: middle;
position: relative;
}
input[type="button"]:hover, .button:hover, button:hover {
border-color: #8E7EBF;
color: #FFF;
background: #8E7EBF none repeat scroll 0% 0%;
}
a, span, i {
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
}
I think you must take a look on theses properties of CSS (line 1058 of theme.css) :
a:hover, span:hover, i:hover
You must used this synthax for better compatibility :
a:hover, button:hover span, button:hover i
You can see the similar problem here : Button:hover not working in Firefox
Hi Write this css in your css file it will fix the problem
a:hover, span:hover, i:hover {
-webkit-transition: initial;
transition: initial;
}
i had same issue on chrome on hover btn class i fixed that adding this class to button
.btn-reset-transform:hover {
-webkit-transition: none !important;
-moz-transition: none !important;
-ms-transition: none !important;
-o-transition: none !important;
transition: none !important;
-webkit-transform: none !important;
-moz-transform: none !important;
-ms-transform: none !important;
-o-transform: none !important;
transform: none !important;
}
I have a picture that when you hover over it, a fading caption would appear
Here is the jfiddle
https://jsfiddle.net/e9dwbdyn/4/
I want it to look like this however:
I think it has to do with this part but I'm not sure how to exactly format it. Any advice/help would be appreciated. Thanks!
figcaption {
position: absolute;
top:35%;
width: 80%;
height:50%;
left:10%;
font-size: 14px;
color: white;
background-color: #9F8F53;
opacity: 0;
-webkit-transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-o-transition: opacity .5s ease-in-out;
transition: opacity .5s ease-in-out;
}
Try this one https://jsfiddle.net/e9dwbdyn/6/
figure {
position: relative;
display: block;
margin: 5px 0 10px 0;
width:350px;
}
figcaption {
position: absolute;
top:30%;
width: 80%;
height:40%;
left:10%;
font-size: 20px;
font-family: "Arial, Helvetica, sans-serif";
text-align: center;
color: white;
background-color: #000;
opacity: 0;
-webkit-transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-o-transition: opacity .5s ease-in-out;
transition: opacity .5s ease-in-out;
}
figure:hover figcaption {
opacity: 0.5;
}
.product-name a {
color: #fff;
}
.product-name a:hover {
color: #fff
}
.product-name, .desc_grid, .price {
padding: 0px;
margin: 0px;
}
}
You would still need to play around with some margins, text fonts and sizes to get the exact match.
you may use figcaption as flex container
https://jsfiddle.net/e9dwbdyn/5/
figure {
position: relative;
display: block;
margin: 5px 0 10px 0;
width:350px;
}
figcaption {
position: absolute;
top:0;
left:0;
bottom:0;
right:0;
display:flex;
font-size: 14px;
color: white;
}
figcaption>div {
background-color: #9F8F53;
opacity: 0;
-webkit-transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-o-transition: opacity .5s ease-in-out;
transition: opacity .5s ease-in-out;
margin:auto;
text-align:center;
width:80%;
}
figure:hover figcaption div {
opacity: 0.7;
}
.product-name
<figure>
<img src="https://goodnessofgodministries.files.wordpress.com/2012/03/bugia_candlestick_.jpg" alt="Candlesticks" style="width:350px" />
</a>
<figcaption>
<div class="product-shop">
<h3 class="product-name">Candlesticks<span class="over"></span></h3>
<p class="desc_grid">lorem ipsum</p>
<div class="price-box">
<span class="regular-price" id="product-price-3-new">
<span class="price">$50.00</span></span>
</div>
</div>
</figcaption>
</figure>
When positioning elements absolutely it is always a good idea to incorporate a bit of flexibility. The issue with your code, is that you try to vertically center the element by estimating the top and left value in percentages, which isn't that flexible: What if the images inside the figure element have different sizes and aspect ratios? If so, these estimated percentages will not work in every instance and would potentially require you to manually change the value with each image.
In the example you present, it looks as if the height of the transitioned element is determined by its own content, rather than having set a specific height as in your code.
Example 1 (height determined by the content inside) works with browsers from IE9 and up:
figcaption {
position: absolute;
top: 50%; /* Always 50% from the top */
transform: translateY(-50%); /* Extracting half of the content height to vertically center */
width: 80%;
left: 0;
right: 0;
opacity: 0;
margin: 0 auto;
font-size: 14px;
padding: 1em;
color: white;
background: rgba(194, 145, 57, 0.7); /* Use semitransparent background instead of opacity for readability reasons */
transition: opacity .5s;
}
figure:hover figcaption {
opacity: 1;
}
Example 2 (fixed height) should work in all browsers:
figcaption {
position: absolute;
height: 50%; /* Fixed height */
width: 80%;
top: 0; /* Filling the whole space with top, left, bottom, right */
left: 0;
right: 0;
bottom: 0;
opacity: 0;
margin: auto; /* Using margin: auto; the space around is distributed evenly */
font-size: 14px;
padding: 1em;
color: white;
background: rgba(194, 145, 57, 0.7);
transition: opacity .5s;
}
In the not-too-distant future Flexbox has to be the preferred method, as it does all the calculations for you.
Here part of my css sprite code
#IconSet a {
width: 36px;
height: 36px;
display: inline-block;
}
#DeviantArtIcon {
border-width: 0px;
border-style: none;
background-image: url(http://static.monstermmorpg.com/images/csssprites/SocialIcons.png);
background-color: transparent;
background-repeat: repeat-x;
background-position: -144px -0px;
width: 36px;
height: 36px;
}
#DeviantArtIcon:hover {
border-width: 0px;
border-style: none;
background-image: url(http://static.monstermmorpg.com/images/csssprites/SocialIcons.png);
background-color: transparent;
background-repeat: repeat-x;
background-position: -144px -36px;
width: 36px;
height: 36px;
}
<a id="DeviantArtIcon" href="http://monstermmorpg.deviantart.com" rel="nofollow" target="_blank" title="Monster MMORPG On Deviant Art - Please Watch Our Channel"></a>
Now when this icon hovered i want to have transition effect. How can i do that ?
I tried here but no luck
CSS Fade Between Background Images on Hover
Fade Image Into Another:
HTML:
<a id="deviant-art-icon" href="http://monstermmorpg.deviantart.com"><span></span></a>
CSS:
#deviant-art-icon {
background:url(http://static.monstermmorpg.com/images/csssprites/SocialIcons.png) no-repeat;
display: inline-block;
position: relative;
text-indent: -9999px;
width: 36px;
height: 36px;
background-position: -144px -0px;
}
#deviant-art-icon span {
position: absolute;
top:0;
left:0;
bottom:0;
right:0; background:url(http://static.monstermmorpg.com/images/csssprites/SocialIcons.png) no-repeat;
background-position: -144px -36px;
opacity: 0;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
}
#deviant-art-icon:hover span {
opacity: 1;
}
Demo: http://jsfiddle.net/hxJyw/2/
1) You haven't applied any transition effects in your CSS.
2) No need to add transition effects in :hover effect.
#DeviantArtIcon {
-o-transition:2s ease-out, background 2s ease-in;
-ms-transition:2s ease-out, background 2s ease-in;
-moz-transition:2s ease-out, background 2s ease-in;
-webkit-transition:2s ease-out, background 2s ease-in;
transition:2s ease-out, background 2s ease-in;
}
Check this in jSFiddle
Hope this is what you're trying.
The CSS transition on my a tag isn't fading in and out, its just like there's no transition at all! I tried using transition: background 300ms ease-in-out; too but still no luck
CSS:
.FeatureRow a{
padding: 10px;
display: block;
width: 260px;
height: auto;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-webkit-box-shadow: 0px 4px 8px #f5f5f5;
-moz-box-shadow: 0px 4px 8px #f5f5f5;
box-shadow: 0px 4px 8px #f5f5f5;
background-image: -moz-linear-gradient(top,#fbfbfb,#ffffff);
background-image: -webkit-gradient(linear,0 0,0 100%,from(#fbfbfb),to(#ffffff));
background-image: -webkit-linear-gradient(top,#fbfbfb,#ffffff);
background-image: -o-linear-gradient(top,#fbfbfb,#ffffff);
background-image: linear-gradient(to bottom,#fbfbfb,#ffffff);
background-repeat: repeat-x;
transition: all 300ms ease-in-out;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-ms-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
}
.FeatureRow a:hover{
background-image: -moz-linear-gradient(top,#C00,#C0F);
background-image: -webkit-gradient(linear,0 0,0 100%,from(#C00),to(#C0F));
background-image: -webkit-linear-gradient(top,#C00,#C0F);
background-image: -o-linear-gradient(top,#C00,#C0F);
background-image: linear-gradient(to bottom,#C00,#C0F);
}
As Adrift says, this is not supported; you have to simulate it.
This is the CSS
.FeatureRow {
padding: 10px;
display: block;
position: relative;
width: 260px;
height: 70px;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
background-image: linear-gradient(0deg,white,gray);
}
.FeatureRow:after {
content: '';
position: absolute;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
background-image: linear-gradient(0deg,red,magenta);
opacity: 0;
transition: all 3s ease-in-out;
}
.FeatureRow:hover:after {
opacity: 1;
}
We are overlaying your div with a pseudo element. Each one has a gradient. The pseudo element has opacity set to 0; when you hover it you change the opacity to 1; and this property can be transitioned.
demo
As noted in other answers, it is not possible to animate a gradient. It is however possible to animate background-color. Knowing this, you can layer a transparent gradient on top of a background color, which will allow you to animate one of the colors in your gradient.
To do this, choose the color you want to animate, set it as the background-color, and put rgba(0,0,0,0) (transparent) in its place.
Then all you have to do is on :hover or with javascript change background-color to your desired value
This will only work to transition one color of your gradient. But I think it's still a decent option to transition a gradient
.squareTile {
background: radial-gradient(#203244eb, rgba(0,0,0,0), #203244eb);
background-color: #3596ff;
border-radius: 10px;
width: 100px;
height: 100px;
border: 1px solid black;
cursor: pointer;
transition: 1s;
}
.squareTile:hover {
background-color: #77c577;
}
<div class="squareTile">
</div>
Using gradients for animations (or transitions) is unfortunately not supported by any browser at the moment. Take a look at this list in the Transitions module for a list of all current animatible properties
animating a background gradient is possible, as mentioned, and there's a quite good tool currently up to let you play with the feature:
https://www.gradient-animator.com/
example output:
.css-selector {
background: linear-gradient(270deg, #8ccebd, #146e57);
background-size: 400% 400%;
animation: AnimationName 5s ease infinite;
}
#keyframes AnimationName {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}