section#lBox{
background-color: rgb(168, 0, 0);
border: 1px solid rgba(0,0,0,.15);
border-radius: 0px;
box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset, 0 0 4px rgba(0,0,0,0.2);
margin: 100px auto; /*aligns center*/
padding: 24px;
width: 500px;
opacity: 0.5;
-webkit-transition: all 5s linear;
transition: background-color 5s;
-moz-transition: all 5s linear;
}
section#lbox:hover {
/*background-color: rgba(168, 0, 0, 0.8);
box-shadow: 0px 0px 500px; */
opacity: 0.8;
}
I have been trying to fix it for half an hour and can't seem to find why the transition isn't working. It is supposed to make the translucent box more opaque when the mouse cursor is over it.
Look at this:
section#lBox {
That has a capital letter B in lBox.
Then look at this:
section#lbox:hover {
This has a lowercase b in lbox.
Assuming your box has an id="lBox", the hover opacity: 0.8 part will not work, as CSS is case-sensitive, and lbox and lBox are two different things.
So what you should do is just change this:
section#lbox:hover {
To this:
section#lBox:hover {
And it should work.
Related
I'm experiencing an odd bug.
Even with -webkit-transition included, color fades on safari aren't seeming to work for me. Works fine on chrome. Also, I'm using NextJS, hence the inside of the .
The color does change on hover, but only on chrome does it actually fade. On safari it's just a quick switch.
Heres a segment from my CSS
.socialThird{
#include flex-center();
height: 100%;
.iconA{ // anchor tag
height:50%;
width: 75px;
transition: all ease-in-out 0.25s;
padding: 10px 8px;
.emailSVG{ // svg
fill: #333;
filter: drop-shadow( 0 7px 3px rgba(0, 0, 0, .3));
-o-filter:drop-shadow( 0 7px 3px rgba(0, 0, 0, .3));
-ms-filter:drop-shadow( 0 7px 3px rgba(0, 0, 0, .3));
-moz-filter:drop-shadow( 0 7px 3px rgba(0, 0, 0, .3));
-webkit-filter: drop-shadow( 0 7px 3px rgba(0, 0, 0, .3));
-webkit-transition: all ease-in-out 0.25s;
-moz-transition: all ease-in-out 0.25s;
-o-transition: all ease-in-out 0.25s;
transition: all ease-in-out 0.25s;
height: 100%;
width: 100%;
&:hover{
fill: #00bcc5;
}
}
&:hover{
cursor: pointer;
transform: translate(0px, -6px);
}
}
}
Hopefully this was enough information, thanks!
This question already has answers here:
Use CSS3 transitions with gradient backgrounds
(19 answers)
Closed 1 year ago.
I'm trying to add a transition to a button I have that's background is made with css linear-gradient but it's not working.
This is the css for my button.
a.button
{
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#green), color-stop(100%,#a5c956));
-webkit-transition: background 5s linear;
}
a.button:hover
{
-webkit-gradient(linear, left top, left bottom, color-stop(0%,#greenhover), color-stop(100%,#89af37))
}
If you're wondering about #green and #greenhover, I'm using .less to make my css.
Anything wrong with this? Any ideas?
Sadly, you really can't transition gradients for now.
So, the only workable workaround is using an extra element with needed gradient and transition it's opacity:
a.button {
position: relative;
z-index: 9;
display: inline-block;
padding: 0 10px;
background: -webkit-gradient(linear, 0 0, 0 100%, from(green), to(#a5c956));
background: -webkit-linear-gradient(top, green, #a5c956);
background: -moz-linear-gradient(top, green, #a5c956);
background: -o-linear-gradient(top, green, #a5c956);
background: linear-gradient(top, green, #a5c956);
}
.button-helper {
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
background: -webkit-gradient(linear, 0 0, 0 100%, from(lime), to(#89af37));
background: -webkit-linear-gradient(top, lime, #89af37);
background: -moz-linear-gradient(top, lime, #89af37);
background: -o-linear-gradient(top, lime, #89af37);
background: linear-gradient(top, lime, #89af37);
-webkit-transition: opacity 1s linear;
-moz-transition: opacity 1s linear;
-o-transition: opacity 1s linear;
transition: opacity 1s linear;
}
a.button:hover .button-helper {
opacity: 1;
}
<span class="button-helper"></span>button
it's tricky.. and of course tricky is cool ;)
okay.. i got a solution. and it's basically done via amazing :before selector
#cool-hover{
width: 120px;
height: 120px;
display: block;
cursor: pointer;
border-radius: 10px;
box-shadow: 0 0 15px rgba(0,0,0,0.3);
margin: 0px auto 24px auto;
transition: all 0.5s;
position: relative;
overflow: hidden;
}
#cool-hover:before{
border-radius: inherit;
display: block;
width: 200%;
height: 200%;
content: '';
position: absolute;
top: 0;
left: 0;
background: linear-gradient(135deg, #21d4fd 25%, #b721ff 75%);
transition: all 0.5s;
transform: translate(-25%, -25%);
z-index: 0;
}
#cool-hover:after{
border-radius: 9px;
display: block;
width: 108px;
height: 108px;
margin: 6px;
background: url('https://i.imgur.com/w0BjFgr.png');
background-size: cover;
content: '';
position: absolute;
top: 0; left: 0;
z-index: 1;
}
#cool-hover:hover:before{
transform: translate(-25%, -25%) rotate(-180deg);
}
#cool-hover:hover{
box-shadow: 0 0 35px rgba(0,0,0,0.3);
}
<div id="cool-hover"></div>
NOTE : i just added the :after sudo class just for the small on top image placeholder purpose..
have a nice awesome styling ;)
I know this pretty old but I could not find any good solution yet. So here is my solution
First Make gradient on ":before and hide it with opacity then transition opacity 1 on hover.
https://jsfiddle.net/sumon380/osqLpboc/3/
.button {
text-decoration: none;
padding: 10px 25px;
font-size: 20px;
color: #333;
display: inline-block;
background: #d6e9eb;
position: relative;
z-index: 1;
transition: color 0.3s ease-out;
}
.button:before {
background: #91a5f4;
background: linear-gradient(135deg, #91a5f4 0%, #b08cf9 86%);
content: "";
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
z-index: -1;
opacity: 0;
transition: opacity 0.3s ease-out;
}
.button:hover:before {
opacity: 1;
}
.button:hover {
color: #fff;
}
<a class="button" href="#">Button</a>
You can fake gradient transitions using drop shadows!
For instance, from one of my pages:
c {
color: #FFF;
background: #000;
border-style:solid;
border-color:#CCC;
border-width: 0 0 0 1px;
box-shadow: 2px 2px 2px #555, inset 0 25px 20px -10px rgba(255, 255, 255, 0.3),
inset 0 -15px 20px -10px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 2px 2px 2px #555, inset 0 25px 20px -10px rgba(255, 255, 255, 0.3),
inset 0 -15px 20px -10px rgba(0, 0, 0, 0.15);
-o-box-shadow: 2px 2px 2px #555, inset 0 25px 20px -10px rgba(255, 255, 255, 0.3),
inset 0 -15px 20px -10px rgba(0, 0, 0, 0.15);
-webkit-box-shadow: 2px 2px 2px #555,
inset 0 25px 20px -10px rgba(255, 255, 255, 0.3),
inset 0 -15px 20px -10px rgba(0, 0, 0, 0.15);
-moz-transition: background-color .5s ease;
-o-transition: background-color .5s ease;
-webkit-transition: background-color .5s ease-in-out;
transition: background-color .5s ease;
}
Followed by:
c:hover {
color:#FFF;
background: #505;
position:relative;
top:1px;
box-shadow: -1px -1px -1px #555,inset 0 20px 20px -10px rgba(0, 0, 0, 0.15),
inset 0 -15px 20px -10px rgba(255, 255, 255, 0.3);
-moz-box-shadow: -1px -1px -1px #555,inset 0 20px 20px -10px rgba(0, 0, 0, 0.15),
inset 0 -15px 20px -10px rgba(255, 255, 255, 0.3);
-o-box-shadow: -1px -1px -1px #555, inset 0 20px 20px -10px rgba(0, 0, 0, 0.15),
inset 0 -15px 20px -10px rgba(255, 255, 255, 0.3);
-webkit-box-shadow: 1px -1px -1px #555, inset 0 20px 20px -10px rgba(0, 0, 0, 0.15),
inset 0 -15px 20px -10px rgba(255, 255, 255, 0.3);
}
Here, you are essentially using an inset shadow as a Photoshop-like mask, causing a gradient effect on the underlying element. On hover, you invert the effect.
If you're doing the slight highlight when hovering the button there is a much simpler solution. You can just nudge the gradient down a bit and have the background-color be the same as the top color of your gradient: http://cdpn.io/oaByI
It's pretty limited I know, but if works well for that use case.
I know this question is pretty old, but I found a good way to animate basic gradients that will work in some cases.
This method will let you animate a change in color of the gradient but not a change in the position of the color stops.
https://jsfiddle.net/62vzydeh/
HTML:
<div class="button">
Click Me!
</div>
CSS:
.button {
width: 200px;
height: 30px;
margin: 50px;
padding-top: 10px;
color: #C0C0C0;
background: linear-gradient(to left, #F8F8F8, transparent 30%);
background-color: #808080;
text-align: center;
font-family: sans-serif;
cursor: pointer;
transition: background-color 500ms;
}
.button:hover {
background-color: #A0A0A0;
}
a hacky way i tried was putting lots of <spans> to replicate "position", CSS only hack here: https://codepen.io/philipphilip/pen/OvXEaV
9 years, but this time, hope my styled-components can help someone:
import React, { ReactNode } from 'react'
import { Button as ButtonUI } from "#your-library-ui"
import styled from 'styled-components'
type Props = {
onClick?: () => void;
children?: ReactNode;
};
const Button = ({onClick, children}: Props) => (
<StyledButton onClick={onClick} >
{children}
<ButtonHelper />
</StyledButton>
)
export default Button
const ButtonHelper = styled.span`
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
border-radius: 5px;
background: linear-gradient(to right, #5ab0f4, #1273ea)!important;
transition: opacity 0.2s linear;
`;
const StyledButton = styled(ButtonUI)`
position: relative;
z-index: 1;
background: linear-gradient(to right, #1273ea, #1c94f4)!important;
color: #fff;
&:hover ${ButtonHelper} {
opacity: 1;
}
`;
And start using your new designed component with extra effect! Thanks to #kizu for the suggestion.
you must have same style in source and changed style in target.
like
a {
background: transparent;
background: linear-gradient(transparent,transparent);
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}
a:hover
{
background: #abc07c;
background: linear-gradient(#c5db95,#88a743);
}
I'm trying to align these input forms to one line. If I take them separately - it works. Just trying to make it responsive. I want them to be in one line for desktop and move one below another for mobile.
I'm using these styles to create to make forms responsive and they work separately. But when I add other styles of my page there is a conflict and it's not working anymore
/** basic default styles **/
html { margin: 0; padding: 0; }
span.chyron { font-size: 1.2em; padding-top: 10px; }
/** main blocks **/
#container {
display: block;
max-width: 800px;
margin: 0 auto;
margin-top: 5px;
margin-bottom: 66px;
padding: 20px 15px;
background: #fff;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
td {
width: 60%;
}
/** the form elements **/
#hongkiat-form { box-sizing: border-box; }
#hongkiat-form .txtinput {
display: block;
font-family: "Helvetica Neue", Arial, sans-serif;
border-style: solid;
border-width: 1px;
border-color: #dedede;
margin-bottom: 20px;
font-size: 1.55em;
padding: 11px 25px;
padding-left: 55px;
width: 90%;
color: #777;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
-webkit-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
-moz-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
-o-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
}
#hongkiat-form .txtinput:focus {
color: #333;
border-color: rgba(41, 92, 161, 0.4);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(41, 92, 161, 0.6);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(41, 92, 161, 0.6);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(41, 92, 161, 0.6);
outline: 0 none;
}
#hongkiat-form input#name {
background: #fff url('images/user.png') 5px 4px no-repeat;
}
#hongkiat-form input#email {
background: #fff url('images/email.png') 5px 4px no-repeat;
}
#hongkiat-form input#website {
background: #fff url('images/website.png') 5px 4px no-repeat;
}
#hongkiat-form input#telephone {
background: #fff url('images/phone.png') 5px 4px no-repeat;
}
#hongkiat-form textarea {
display: block;
font-family: "Helvetica Neue", Arial, sans-serif;
border-style: solid;
border-width: 1px;
border-color: #dedede;
margin-bottom: 15px;
font-size: 1.5em;
padding: 11px 25px;
padding-left: 55px;
width: 90%;
height: 180px;
color: #777;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
-webkit-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
-moz-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
-o-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
}
#hongkiat-form textarea:focus {
color: #333;
border-color: rgba(41, 92, 161, 0.4);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(40, 90, 160, 0.6);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(40, 90, 160, 0.6);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(40, 90, 160, 0.6);
outline: 0 none;
}
#hongkiat-form #slider { width: 70%; }
#hongkiat-form #aligned {
box-sizing: border-box;
float: left;
width: 300px;
margin-right: 50px;
}
#hongkiat-form #aside {
float: left;
width: 400px;
padding: 0;
box-sizing: border-box;
}
#wrapping { width: 100%; box-sizing: border-box; }
span.radiobadge { display: block; margin-bottom: 8px; }
span.radiobadge label { font-size: 1.2em; padding-bottom: 4px; }
/** #group clearfix **/
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }
Here is a jsfiddle for it:
jsFiddle
Thank you!
try it with flexbox:
<div class="container">
<div class="form1 flex-item">
form
</div>
<div class="form2 flex-item">
form2
</div>
</div>
css:
.container{
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
}
.flex-item{
width: 50%;
#media (max-width: 600px){
width: 100%;
}
}
Shadows work properly on all elements, on IE and Firefox, but not for the button element in Chrome and Safari:
http://jsfiddle.net/q8xaa/
<button class="btn-test">
<span class="btn">test</span>
</button>
.btn-test {
background-color: transparent;
border: 0;
padding: 0px;
}
.btn-test:hover .btn {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.btn-test .btn {
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
-webkit-box-shadow: 4px 4px 0px #000;
-moz-box-shadow: 4px 4px 0px #000;
box-shadow: 4px 4px 0px #000;
background-color: #f00;
margin: 0px;
padding: 10px;
height: 40px;
display: inline-block;
}
button {
margin: 0;
padding: 0;
border: 0;
overflow: visible;
}
Any ideas on how to solve?
Example http://jsfiddle.net/H23Jy/1/
I tried forcing a zero CSS3 transformation as shown below
CSS
button span {
-webkit-transform: translate3d(0,0,0);
}
and the shadow seems to work fine also on Chrome 35.
But as you can see, in that way the button is not vertically aligned with the other buttons, so you could use -webkit-transform: translateY(-3px); instead
Result
Ok, I have the following code: https://jsfiddle.net/7u1aLxaw/
So the issue is that when you hover over an image, it shows an overlay with a name specific to that image. But if the name is longer than the image width, the image immediately to the right is pushed away and the overlay isn't centered on the image. It expands just to the right, not on both sides.
I can't work out how to center the overlay and avoid it effecting divs on either side of it.
*I tried using display: none, but I want to preserve the CSS3 transitions. Using display: none to completely remove the element removes the CSS3 transition.
Any ideas?
Change your .item_overlay style to:
.item_overlay {
height: auto;
width: auto;
margin: 0 auto;
margin-top: -95px;
position: absolute;
z-index: 1;
background-color: #fff;
border: 1px solid rgba(0, 0, 0, 0.2);
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
Making the position absolute ignores the other elements position, then setting a negative top margin moves it back to the top. http://jsfiddle.net/q8SER/2/
Working jsFiddle: http://jsfiddle.net/q8SER/3/
I had to change a whole bunch of stuff to make it work.
First of all, I changed the HTML structure and placed the overlay div before the icon div.
Here is the new overlay CSS:
.item_overlay {
position: absolute;
z-index: 1;
background-color: #fff;
border: 1px solid rgba(0, 0, 0, 0.2);
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
Now, because the inner div (overlay) overflows the parent div, I couldn't center it conventionally with auto margins, so I implemented a jQuery solution.
JS code:
$(".item_overlay").each( function() {
var offset = ($(this).parent().width() - $(this).width()) / 2;
$(this).css("left", offset + "px");
});
Hope that helps.