I would like to have a html5 number input field containing the EUR sign, and no matter what editing occurs to the field, for the sign to be persistent. I tried to do that, but the EUR sign won't appear inside the field, I want to move this sign at the end of the input but for some reason, I can't do it. I don't want to remove class form-control. Any help?
My snippet:
.input-symbol-euro {
position: relative;
}
.input-symbol-euro input {
padding-right: 15px;
}
.input-symbol-euro:after {
position: absolute;
top: 0;
content: "€";
right: 0px;
}
.form-control {
display: block;
width: 50%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
.form-control:focus {
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
}
.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
cursor: not-allowed;
background-color: #eee;
opacity: 1;
}
<span class="input-symbol-euro">
<input type="number" value="0" min="0" step="1" class="form-control" />
</span>
You need to give the <span> some sort of useful display property so that it will wrap the <input>. By default this element has a value of inline. In the example below I've used inline-block, but block would do just fine.
See updated fiddle.
.input-symbol-euro {
position: relative;
display: inline-block;
width: 50%;
}
.input-symbol-euro input {
padding-right: 15px;
width: 100%;
}
.input-symbol-euro:after {
position: absolute;
top: 50%;
transform: translateY(-50%);
margin: auto;
content: "€";
right: 20px;
}
.form-control {
display: block;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
.form-control:focus {
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
}
.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
cursor: not-allowed;
background-color: #eee;
opacity: 1;
}
<span class="input-symbol-euro">
<input type="number" value="0" min="0" step="1" class="form-control" />
</span>
Related
I would like to put social media icons under the image beside the title of the photo. I.E facebook, twitter, Soundcloud and Instagram. I would like the social media icons to rotate with the image when the image is hovered over.
HTML
<div class="polaroid-images">
<a href="" title="Alex" ><img height="200" src="Alexandra.jpg" alt="Island" title="Alex" class=fishes /></a>
<i class="fa fa-facebook fa-3x"></i>
</div>
CSS
.polaroid-images a
{
background: white;
display: inline;
float: left;
margin: 0 15px 70px;
padding: 10px 10px 25px;
text-align: center;
text-decoration: none;
-webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, .3);
-moz-box-shadow: 0 4px 6px rgba(0,0,0,.3);
box-shadow: 0 4px 6px rgba(0,0,0,.3);
-webkit-transition: all .15s linear;
-moz-transition: all .15s linear;
transition: all .15s linear;
z-index:0;
position:relative;
}
.polaroid-images a, :after {
color: #333;
font-size: 20px;
content: attr(title);
position: relative;
top:15px;
}
.polaroid-images img {
display: block;
width: inherit;
}
.polaroid-images a, i:nth-child(3n) {
-webkit-transform: rotate(-24deg);
-moz-transform: rotate(-24deg);
transform: rotate(-24deg);
}
.polaroid-images a:hover{
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
transform: scale(1.2);
z-index:10;
-webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, .7);
-moz-box-shadow: 0 10px 20px rgba(0,0,0,.7);
box-shadow: 0 10px 20px rgba(0,0,0,.7);
}
.polaroid-images i {
z-index: 11;
padding 30px 25px 15px;
margin-right: 10px 22px 30px ;
position: absolute;
top: 25%;
left: 25%;
transform: translate(1%, 1%);
overflow: hidden;
}
Just add the same transition on hover to the i. Like this:
.polaroid-images:hover i {
-webkit-transition: all .15s linear;
-moz-transition: all .15s linear;
transition: all .15s linear;
}
Put it in the a and style it similarly to how you styled the :after that holds the image a title
.polaroid-images a {
background: white;
display: inline;
float: left;
margin: 0 15px 70px;
padding: 10px 10px 25px;
text-align: center;
text-decoration: none;
-webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, .3);
-moz-box-shadow: 0 4px 6px rgba(0, 0, 0, .3);
box-shadow: 0 4px 6px rgba(0, 0, 0, .3);
-webkit-transition: all .15s linear;
-moz-transition: all .15s linear;
transition: all .15s linear;
z-index: 0;
position: relative;
}
.polaroid-images a,
:after {
color: #333;
font-size: 20px;
content: attr(title);
position: relative;
top: 15px;
}
.polaroid-images img {
display: block;
width: inherit;
}
.polaroid-images a,
i:nth-child(3n) {
-webkit-transform: rotate(-24deg);
-moz-transform: rotate(-24deg);
transform: rotate(-24deg);
}
.polaroid-images a:hover {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
transform: scale(1.2);
z-index: 10;
-webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, .7);
-moz-box-shadow: 0 10px 20px rgba(0, 0, 0, .7);
box-shadow: 0 10px 20px rgba(0, 0, 0, .7);
}
.polaroid-images i {
position: relative;
font-size: 1em;
top: 15px;
margin-right: .5em;
color: #3b5998;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="polaroid-images">
<img height="200" src="http://kenwheeler.github.io/slick/img/fonz1.png" alt="Island" title="Alex" class=fishes /><i class="fa fa-facebook fa-3x"></i>
</div>
I have the following pure html and css implementation of a radio slider. What is a good way of creating a javascript event based on the toggle function? I can see a few approaches to poll the component and get it's position, however, I am not sure how to get the change to trigger a callback etc. Thanks.
html,
body,
div,
span,
label {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
body {
line-height: 1;
}
body {
color: #404040;
font-family: 'Lucida Grande', Verdana, sans-serif;
font-size: 13px;
font-weight: normal;
line-height: 20px;
background: #3b3f46;
}
.container {
margin: 0 auto;
padding: 90px 0;
width: 400px;
background-color: false;
background-image: -webkit-gradient(radial, center center, 0, center center, 460, color-stop(0%, rgba(255, 255, 255, 0.1)), color-stop(100%, transparent));
background-image: -webkit-radial-gradient(center, cover, rgba(255, 255, 255, 0.1), transparent);
background-image: -moz-radial-gradient(center, cover, rgba(255, 255, 255, 0.1), transparent);
background-image: -ms-radial-gradient(center, cover, rgba(255, 255, 255, 0.1), transparent);
background-image: -o-radial-gradient(center, cover, rgba(255, 255, 255, 0.1), transparent);
background-image: radial-gradient(center, cover, rgba(255, 255, 255, 0.1), transparent);
}
.switch {
position: relative;
height: 26px;
width: 120px;
margin: 20px auto;
background: rgba(0, 0, 0, 0.25);
border-radius: 3px;
-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
}
.switch-label {
position: relative;
z-index: 2;
float: left;
width: 58px;
line-height: 26px;
font-size: 11px;
color: rgba(255, 255, 255, 0.35);
text-align: center;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
cursor: pointer;
}
.switch-label:active {
font-weight: bold;
}
.switch-label-off {
padding-left: 2px;
}
.switch-label-on {
padding-right: 2px;
}
.switch-input {
display: none;
}
.switch-input:checked + .switch-label {
font-weight: bold;
color: rgba(0, 0, 0, 0.65);
text-shadow: 0 1px rgba(255, 255, 255, 0.25);
-webkit-transition: 0.15s ease-out;
-moz-transition: 0.15s ease-out;
-ms-transition: 0.15s ease-out;
-o-transition: 0.15s ease-out;
transition: 0.15s ease-out;
-webkit-transition-property: color, text-shadow;
-moz-transition-property: color, text-shadow;
-ms-transition-property: color, text-shadow;
-o-transition-property: color, text-shadow;
transition-property: color, text-shadow;
}
.switch-input:checked + .switch-label-on ~ .switch-selection {
left: 60px;
/* Note: left: 50%; doesn't transition in WebKit */
}
.switch-selection {
position: absolute;
z-index: 1;
top: 2px;
left: 2px;
display: block;
width: 58px;
height: 22px;
border-radius: 3px;
background-color: #65bd63;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #9dd993), color-stop(100%, #65bd63));
background-image: -webkit-linear-gradient(top, #9dd993, #65bd63);
background-image: -moz-linear-gradient(top, #9dd993, #65bd63);
background-image: -ms-linear-gradient(top, #9dd993, #65bd63);
background-image: -o-linear-gradient(top, #9dd993, #65bd63);
background-image: linear-gradient(top, #9dd993, #65bd63);
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
-webkit-transition: left 0.15s ease-out;
-moz-transition: left 0.15s ease-out;
-ms-transition: left 0.15s ease-out;
-o-transition: left 0.15s ease-out;
transition: left 0.15s ease-out;
}
<div class="container">
<div class="switch">
<input type="radio" class="switch-input" name="view" value="week" id="week" checked>
<label for="week" class="switch-label switch-label-off">ON</label>
<input type="radio" class="switch-input" name="view" value="month" id="month">
<label for="month" class="switch-label switch-label-on">OFF</label>
<span class="switch-selection"></span>
</div>
</div>
You can simply use
if (document.getElementById('week').checked) {
//task to perform when "ON"
}
else
{
//task to perform when "OFF"
}
I had a problem when using alertify JS confirm.
when I click the button, alertify confirm does not appear, but immediately redirects to the link. The following script link button and alertify confirm script.
function CheckDelete(){
alertify.confirm("This is a confirm dialog.",
function(){
alertify.success('Ok');
},
function(){
alertify.error('Cancel');
});}
<button type="button" class="btn btn-danger" onClick="return CheckDelete();"><i class="fa fa-remove"></i> Delete</button>
check in : https://jsfiddle.net/r2fs0p45/
Supposedly when I clicked the button, confirm dialog should appears and then go to the link. but according to my code above, when I click the button, It directly redirect to the link, so confirm dialog does not appear.
Does anyone know how to overcome it?
CheckDelete() needs to return false to prevent the default action
function CheckDelete(){
alertify.confirm("This is a confirm dialog.",
function(){
alertify.success('Ok');
},
function(){
alertify.error('Cancel');
});
return false;
}
Do not have button in a tag in your markup.
To navigate user, on OK button callback, use window.location.href to redirect user.
Try this:
function CheckDelete() {
alertify.confirm("This is a confirm dialog.",
function(input) {
if (input) {
alertify.success('Ok');
window.location.href = 'http://google.com';
} else {
alertify.error('Cancel');
}
});
}
.alertify,
.alertify-show,
.alertify-log {
-webkit-transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
-moz-transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
-ms-transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
-o-transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
/* easeOutBack */
}
.alertify-hide {
-webkit-transition: all 250ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
-moz-transition: all 250ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
-ms-transition: all 250ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
-o-transition: all 250ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
transition: all 250ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
/* easeInBack */
}
.alertify-log-hide {
-webkit-transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
-moz-transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
-ms-transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
-o-transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
/* easeInBack */
}
.alertify-cover {
position: fixed;
z-index: 99999;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #f5f5f5;
opacity: 0.5;
}
.alertify-cover-hidden {
display: none;
}
.alertify {
position: fixed;
z-index: 99999;
top: 150px;
left: 50%;
width: 400px;
margin-left: -215px;
opacity: 1;
}
.alertify-hidden {
-webkit-transform: translate(0, -150px);
-moz-transform: translate(0, -150px);
-ms-transform: translate(0, -150px);
-o-transform: translate(0, -150px);
transform: translate(0, -150px);
opacity: 0;
display: none;
}
/* overwrite display: none; for everything except IE6-8 */
:root *> .alertify-hidden {
display: block;
}
.alertify-logs {
position: fixed;
z-index: 5000;
bottom: 10px;
right: 10px;
width: 300px;
}
.alertify-logs-hidden {
display: none;
}
.alertify-log {
display: block;
margin-top: 10px;
position: relative;
right: -300px;
opacity: 0;
}
.alertify-log-show {
right: 0;
opacity: 1;
}
.alertify-log-hide {
-webkit-transform: translate(300px, 0);
-moz-transform: translate(300px, 0);
-ms-transform: translate(300px, 0);
-o-transform: translate(300px, 0);
transform: translate(300px, 0);
opacity: 0;
}
.alertify-dialog {
padding: 25px;
}
.alertify-resetFocus {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.alertify-inner {
text-align: center;
}
.alertify-text {
margin-bottom: 15px;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
font-size: 100%;
}
.alertify-buttons {} .alertify-button,
.alertify-button:hover,
.alertify-button:active,
.alertify-button:visited {
background: none;
text-decoration: none;
border: none;
/* line-height and font-size for input button */
line-height: 1.5;
font-size: 100%;
display: inline-block;
cursor: pointer;
margin-left: 5px;
}
.alertify-isHidden {
display: none;
}
#media only screen and (max-width: 680px) {
.alertify,
.alertify-logs {
width: 90%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.alertify {
left: 5%;
margin: 0;
}
}
/**
* Twitter Bootstrap Look and Feel
* Based on http://twitter.github.com/bootstrap/
*/
.alertify,
.alertify-log {
font-family: sans-serif;
}
.alertify {
background: #FFF;
border: 1px solid #8E8E8E;
/* browsers that don't support rgba */
border: 1px solid rgba(0, 0, 0, .3);
border-radius: 6px;
box-shadow: 0 3px 7px rgba(0, 0, 0, .3);
-webkit-background-clip: padding;
/* Safari 4? Chrome 6? */
-moz-background-clip: padding;
/* Firefox 3.6 */
background-clip: padding-box;
/* Firefox 4, Safari 5, Opera 10, IE 9 */
}
.alertify-dialog {
padding: 0;
}
.alertify-inner {
text-align: left;
}
.alertify-message {
padding: 15px;
margin: 0;
color: Black;
}
.alertify-text-wrapper {
padding: 0 15px;
}
.alertify-text {
color: #555;
border-radius: 4px;
padding: 8px;
background-color: #FFF;
border: 1px solid #CCC;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
}
.alertify-text:focus {
border-color: rgba(82, 168, 236, .8);
outline: 0;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(82, 168, 236, .6);
}
.alertify-buttons {
padding: 8px 15px 8px;
background: #F5F5F5;
border-top: 1px solid #DDD;
border-radius: 0 0 6px 6px;
box-shadow: inset 0 1px 0 #FFF;
text-align: right;
}
.alertify-button,
.alertify-button:hover,
.alertify-button:focus,
.alertify-button:active {
margin-left: 10px;
border-radius: 4px;
font-weight: normal;
padding: 4px 12px;
text-decoration: none;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05);
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
background-image: -ms-linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
background-image: -o-linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
background-image: linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
}
.alertify-button:focus {
outline: none;
box-shadow: 0 0 5px #2B72D5;
}
.alertify-button:active {
position: relative;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, .15), 0 1px 2px rgba(0, 0, 0, .05);
}
.alertify-button-cancel,
.alertify-button-cancel:hover,
.alertify-button-cancel:focus,
.alertify-button-cancel:active {
text-shadow: 0 -1px 0 rgba(255, 255, 255, .75);
background-color: #E6E6E6;
border: 1px solid #BBB;
color: #333;
background-image: -webkit-linear-gradient(top, #FFF, #E6E6E6);
background-image: -moz-linear-gradient(top, #FFF, #E6E6E6);
background-image: -ms-linear-gradient(top, #FFF, #E6E6E6);
background-image: -o-linear-gradient(top, #FFF, #E6E6E6);
background-image: linear-gradient(top, #FFF, #E6E6E6);
}
.alertify-button-cancel:hover,
.alertify-button-cancel:focus,
.alertify-button-cancel:active {
background: #E6E6E6;
}
.alertify-button-ok,
.alertify-button-ok:hover,
.alertify-button-ok:focus,
.alertify-button-ok:active {
text-shadow: 0 -1px 0 rgba(0, 0, 0, .25);
background-color: #04C;
border: 1px solid #04C;
border-color: #04C #04C #002A80;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
color: #FFF;
}
.alertify-button-ok:hover,
.alertify-button-ok:focus,
.alertify-button-ok:active {
background: #04C;
}
.alertify-log {
background: #D9EDF7;
padding: 8px 14px;
border-radius: 4px;
color: #3A8ABF;
text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
border: 1px solid #BCE8F1;
}
.alertify-log-error {
color: #B94A48;
background: #F2DEDE;
border: 1px solid #EED3D7;
}
.alertify-log-success {
color: #468847;
background: #DFF0D8;
border: 1px solid #D6E9C6;
}
<script src="http://fabien-d.github.io/alertify.js/assets/js/lib/alertify/alertify.min.js"></script>
<button type="button" class="btn btn-danger" onClick="CheckDelete();"><i class="fa fa-remove"></i> Delete</button>
I'm trying to implement Checkbox Four as demonstrated on this site: http://www.paulund.co.uk/playground/demo/css-style-checkboxes/
I want to modify this checkbox by adding the red colored text 'N' when unchecked, and blue colored text 'Y' when checked.
The code I have so far is:
input[type=checkbox]
{
visibility: hidden;
}
.checkboxFour
{
width: 40px;
height: 40px;
background: #ddd;
margin: -30px 160px;
border-radius: 100%;
position: relative;
-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
}
.checkboxFour label
{
display: block;
width: 30px;
height: 30px;
border-radius: 100px;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
-ms-transition: all .5s ease;
transition: all .5s ease;
cursor: pointer;
position: absolute;
top: 5px;
left: 5px;
z-index: 1;
background: #333;
-webkit-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5);
-moz-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5);
box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5);
}
.checkboxFour input[type=checkbox]:checked + label {
background: #CC0000;
}
You can easily do it via psuedo-elements
may be like this :))
.checkboxFour label:before {
content:'N';
color:red;
display: block;
padding: 5px;
text-align: center;
}
.checkboxFour input[type="checkbox"]:checked + label:before {
content:'Y';
color:blue;
}
http://jsfiddle.net/E67n6/8/
Hey guys Iam trying 2 use light box at the moment and every thing is working fine. However what iam trying 2 figure out is how do i get a border like http://lokeshdhakar.com/projects/lightbox2/ the ones which they got in the examples to change colour. Any help on this would be great.
html:
<div class = "image1">
<img src="images/image1t.jpg" />
</div>
Try the below code
.image1 a {
background: none repeat scroll 0 0 rgba(255, 255, 255, 0.1);
border-radius: 4px 4px 4px 4px;
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);
display: block;
float: left;
line-height: 1em;
margin-right: 40px;
padding: 7px;
transition: all 0.2s ease-out 0s;
}
.image1 a:hover {
background-color: #8AD459;
}
Set a css3 transition property on your anchors, then on :hover property, the effects will "animate".
.image1 a {
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
.image1 a:hover {
background-color: #8ad459;
-webkit-box-shadow: 0 -1px 0 0 rgba(255, 255, 255, 0.2), 0 1px 4px 0 rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 -1px 0 0 rgba(255, 255, 255, 0.2), 0 1px 4px 0 rgba(0, 0, 0, 0.5);
box-shadow: 0 -1px 0 0 rgba(255, 255, 255, 0.2), 0 1px 4px 0 rgba(0, 0, 0, 0.5);
}