For some reason, all of my buttons are receiving a grey outline and I'm completely unsure of the source of it. It is not a hover or active thing, it is an always kind of thing. I can also note that it is not the on-click border that a browser adds to buttons, as I've removed that with a :focus value.
This is in Google Chrome. I'm not sure if the issue is present in other browsers.
.button_default {
display: inline-block;
background: #1188f0;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2e8cff), color-stop(100%,#1188f0));
background: -moz-linear-gradient(center top, #2e8cff 0%, #1188f0 100%);
-webkit-box-shadow: 0px 5px 0px 0px #006391, 0px -1px 0px 0px #1c95ff inset;
-moz-box-shadow: 0px 5px 0px 0px #006391, 0px -1px 0px 0px #1c95ff inset;
box-shadow: 0px 5px 0px 0px #006391, 0px -1px 0px 0px #1c95ff inset;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-transition: background-color 0.2s linear;
-moz-transition: background-color 0.2s linear;
-o-transition: background-color 0.2s linear;
transition: background-color 0.2s linear;
text-shadow: 0px 1px 0px #006ac7;
padding: 5px 15px;
text-transform: uppercase;
text-align: center;
color: #ffffff;
font-weight: bold;
}
.button_default:hover {
background: #1995fa;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2e8cff), color-stop(100%,#2e8cff));
background: -moz-linear-gradient(center top, #2e8cff 0%, #2e8cff 100%);
}
.button_default:active {
cursor: wait;
-webkit-box-shadow: 0px 2px 0px 0px #006391, 0px -1px 0px 0px #1491ff inset;
-moz-box-shadow: 0px 2px 0px 0px #006391, 0px -1px 0px 0px #1491ff inset;
box-shadow: 0px 2px 0px 0px #006391, 0px -1px 0px 0px #1491ff inset;
-webkit-transition: background-position 0.3s linear;
-moz-transition: background-position 0.3s linear;
-o-transition: background-position 0.3s linear;
transition: background-position 0.3s linear;
-webkit-transform: translateY(3px);
-moz-transform: translateY(3px);
transform: translateY(3px);
}
.button_default:focus {
outline:0;
}
<form method="link" action="create/create.php">
<input class="button_default" type="submit" value="CREATE NEW">
</form>
Remove the default border from the buttons: border: none.
.button_default {
display: inline-block;
background: #1188f0;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2e8cff), color-stop(100%,#1188f0));
background: -moz-linear-gradient(center top, #2e8cff 0%, #1188f0 100%);
-webkit-box-shadow: 0px 5px 0px 0px #006391, 0px -1px 0px 0px #1c95ff inset;
-moz-box-shadow: 0px 5px 0px 0px #006391, 0px -1px 0px 0px #1c95ff inset;
box-shadow: 0px 5px 0px 0px #006391, 0px -1px 0px 0px #1c95ff inset;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-transition: background-color 0.2s linear;
-moz-transition: background-color 0.2s linear;
-o-transition: background-color 0.2s linear;
transition: background-color 0.2s linear;
text-shadow: 0px 1px 0px #006ac7;
padding: 5px 15px;
text-transform: uppercase;
text-align: center;
color: #ffffff;
font-weight: bold;
}
.button_default:hover {
background: #1995fa;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2e8cff), color-stop(100%,#2e8cff));
background: -moz-linear-gradient(center top, #2e8cff 0%, #2e8cff 100%);
}
.button_default:active {
cursor: wait;
-webkit-box-shadow: 0px 2px 0px 0px #006391, 0px -1px 0px 0px #1491ff inset;
-moz-box-shadow: 0px 2px 0px 0px #006391, 0px -1px 0px 0px #1491ff inset;
box-shadow: 0px 2px 0px 0px #006391, 0px -1px 0px 0px #1491ff inset;
-webkit-transition: background-position 0.3s linear;
-moz-transition: background-position 0.3s linear;
-o-transition: background-position 0.3s linear;
transition: background-position 0.3s linear;
-webkit-transform: translateY(3px);
-moz-transform: translateY(3px);
transform: translateY(3px);
}
.button_default:focus {
outline:0;
}
input[type="submit"].button_default { border: none;}
<form method="link" action="create/create.php">
<input class="button_default" type="submit" value="CREATE NEW">
</form>
The button has a default border, add border: 0 to your CSS
.button_default {
display: inline-block;
background: #1188f0;
...
...
color: #ffffff;
font-weight: bold;
border: 0;
}
You could simply remove the border:
.button_default {
border:none;
}
This question was previously posed here: Button border & background
Related
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 add image to my text box
here is the code
<form id="findPromo">
<input type="text" name="find" placeholder="I'm Looking For...">
<input type="button" value="Search">
</form>
css
#findPromo input[type="text"] {
background: url(image/find.png) no-repeat 10px 6px #444;
background: #444;
border: 0 none;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #d7d7d7;
width:150px;
padding: 6px 15px 6px 35px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
}
#findPromo input[type="text"]:focus {
background: url(image/find.png) no-repeat 10px 6px #444;
color: #6a6f75;
width: 200px;
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
}
but the image does not come out
anyone know how to do it?
thanks
It is because you are overriding the background prorepty with background: #444; if you remove that line, the image is displayed :
DEMO
In the first CSS ruleset, you first set the background to your image but then overwrite it with the background: #444 rule. You don’t just overwrite the background color, but the whole background statement.
Since you already have the #444 in the first statement, you can safely remove the second one.
Here is the form HTML:
<form method="post" action="/cgi-bin/Contact.pl" id="contact-form">
<div id="wrapping" class="clearfix">
<section id="aligned">
<input type="text" name="name" id="name" placeholder="Name..." autocomplete="off" tabindex="1" class="txtinput" data-validate="validate(required)">
<input type="email" name="email" id="email" placeholder="Email..." autocomplete="off" tabindex="2" class="txtinput" data-validate="validate(required, email)">
<textarea name="message" type="text" id="message" placeholder="Message..." tabindex="3" class="txtblock" data-validate="validate(minlength(20))"></textarea>
<div id="buttons">
<input type="reset" name="reset" class="button" tabindex="4" value="Clear">
<input type="submit" name="submit" class="button" tabindex="5" value="Send">
<br style="clear:both;">
</div>
</section>
Here is the corresponding css:
#contact-form {
-moz-box-sizing: border-box; /*Firefox 1-3*/
-webkit-box-sizing: border-box; /* Safari */
box-sizing: border-box;
}
#contact-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: 1em;
padding: 11px 25px;
padding-left: 55px;
width: 90%;
color: #777;
-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;
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;
}
#contact-form .txtinput:focus {
color: #999;
border-color: rgb(255, 102, 0);
border-color: rgba(255, 102, 0, 0.2);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(153, 153, 153, 0.6);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(153, 153, 153, 0.6);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(153, 153, 153, 0.6);
outline: 0 none;
}
#contact-form #name {
background: #FFF url('../images/contact/user.png') 5px 4px no-repeat;
}
#contact-form #email {
background: #FFF url('../images/contact/email.png') 5px 4px no-repeat;
}
#contact-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: 1em;
padding: 11px 25px;
padding-left: 55px;
width: 90%;
height: 180px;
color: #777;
-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;
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;
}
#contact-form textarea:focus {
color: #999;
border-color: rgb(255, 102, 0);
border-color: rgba(255, 102, 0, 0.2);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(153, 153, 153, 1);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(153, 153, 153, 1);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(153, 153, 153, 1);
outline: 0 none;
}
#contact-form .txtblock {
background: #FFF url('../images/contact/speech.png') 5px 4px no-repeat;
}
#contact-form #slider { width: 60%; }
#contact-form #aligned {
box-sizing: border-box;
float: left;
width: 450px;
}
#wrapping { width: 100%; box-sizing: border-box; }
Everything works fine until I display on a smaller device/screen then the fields don't act responsively and kind of overflow out of the box and onto the background as can be seen in the image provided in the link. Any help would be much appreciated. Thanks.
Link to example: http://www.livepurposely.net/image.png
In your css you are restricting width of #aligned to 450px and using px in padding, its better to use % in padding for responsive design
Info: px constraints the width to specified unit and is not good for responsive design, use % instead
Update CSS
#contact-form .txtinput {
padding: 3% 5%; // earlier 11px 25px
padding-left: 2%;
}
#contact-form textarea {
padding: 3% 5%;
padding-left: 2%;
}
#contact-form #aligned {
box-sizing: border-box;
float: left;
width: 90%; // earlier it was 450px update % as per your need
}
http://jsfiddle.net/raunakkathuria/nh5aZ/2/
The forms in bootstrap have a box shadow that leaves a very light shadow on the right side of the form. I need to remove that shadow on the right only so that the icon looks apart of the form.
JSFiddle: http://jsfiddle.net/MgcDU/6296/
Here's the CSS:
textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
.uneditable-input {
background-color: #ffffff;
border: 1px solid #cccccc;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
-moz-transition: border linear 0.2s, box-shadow linear 0.2s;
-o-transition: border linear 0.2s, box-shadow linear 0.2s;
transition: border linear 0.2s, box-shadow linear 0.2s;
}
HTML:
<a href="#">
<div class="input-append">
<input class="span4" id="appendedInput" type="text" placeholder="Search..." style="border-right:0;">
<span class="add-on" style="background:white;border-left:0;"><i class="icon-search" style="color:#a3a3a3"></i></span>
</div>
</a>
Please help!
Here's how I fixed it: http://jsfiddle.net/MgcDU/6305/
CSS:
.input-append {
position: relative;
}
.input-append .add-on {
padding: 4px 8px;
background: white;
border-left: 0;
position: absolute;
right: -32px;
}
You can relatively position .add-on and give it a positive z-index value so that it appears over the right-edge of the <input> - it's not 100% seamless but with some minor changes you can probably make it work for you.
.input-append .add-on:last-child {
position: relative;
z-index: 5;
}
http://jsfiddle.net/MgcDU/6302/
Assign a spread-radius value of -1px to the box shadow and add an extra pixel to the y-offset.
<spread-radius>
This is a fourth <length> value. Positive values will
cause the shadow to expand and grow bigger, negative values will cause
the shadow to shrink. If not specified, it will be 0 (the shadow will
be the same size as the element).
MDN: box-shadow (source)
http://jsfiddle.net/MgcDU/6307/
CSS
input[type="text"] {
-webkit-box-shadow: inset 0 2px 1px -1px rgba(0, 0, 0, 0.075);
-moz-box-shadow: inset 0 2px 1px -1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 2px 1px -1px rgba(0, 0, 0, 0.075);
}
Try border-left:0px; becouse now yu dont have a px in element style
The best way is using box-shadow for "DIV.input-append" and make transparent background to input[type=text], example of using:
CSS:
.input-append{
position: relative;
padding: 2px;
width: 200px;
background-color: #ffffff;
border: 1px solid #cccccc;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
-moz-transition: border linear 0.2s, box-shadow linear 0.2s;
-o-transition: border linear 0.2s, box-shadow linear 0.2s;
transition: border linear 0.2s, box-shadow linear 0.2s;
}
.input-append:before {
content: '';
position: absolute;
right: 8px;
width: 16px;
height: 16px;
background: url('https://cdn3.iconfinder.com/data/icons/eightyshades/512/11_Search-16.png') no-repeat;
}
.input-append input[type=text]{
background: none;
border:none;
}
HTML:
<div class="input-append">
<input class="span4" id="appendedInput" type="text" placeholder="Search...">
</div>
Demo: http://jsfiddle.net/EDLs7/
I am trying to do someting like this http://designshack.net/tutorialexamples/HoverEffects/Ex5.html, where the reflection of the image shows under , however it doesnt work on IE or FireFox. here is my code that I have http://jsfiddle.net/srvcm/1/ Is there any trick to make firefox to do this?
.ex img {
<!--margin: 25px;-->
opacity: 0.9;
border: 1px solid #eee;
/*Transition*/
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
/*Reflection*/
-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.1)));
}
.ex img:hover {
opacity: 1;
/*Reflection*/
-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.7)));
/*Glow*/
-webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
-moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
}
Thank you in advance
http://caniuse.com/#search=box-ref <- cross-browsers compatability's seem to be lacking for that property