Develop Reference

Hover button with delay

In my agency's website, the buttons on the homepage have a small delay between hovering and I don't know what's causing this behaviour. Could you guys take a look?
Aparticula
This is the code applied to it
.btn span {
position: absolute;
top: 2px;
left: 2px;
width: 196px;
height: 34px;
background: #fff;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
Please help!

That because you have applied transition to all
Remove this from your css
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;

Transition properties allow elements to change values over a specified duration, animating the property changes, rather than having them occur immediately.
For better understanding, check this out :
.box {
width: 150px;
height: 150px;
background: #914969;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
-webkit-transition: background-color 2s ease-out;
-moz-transition: background-color 2s ease-out;
-o-transition: background-color 2s ease-out;
transition: background-color 2s ease-out;
}
.box:hover {
background-color: #ff9999;
cursor: pointer;
<div class="box">Transition effects</div>
For the most part, the order of the values does not matter -- unless a delay is specified. If you specify a delay, you must first specify a duration. The first value that the browser recognizes as a valid time value will always represent the duration. Any subsequent valid time value will be parsed as the delay.
Some properties cannot be transitioned because they are not animatable properties. See the spec for a full list of which properties are animatable.
Hope this helps..!

how to show the effect of the focus with the border radius..i have tried . i want it to zoom out

insert an image inside the tag
and run it it may be help full to understand
clearly
.focus {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
}
.focus:hover {
border: 70px solid #000;
border-radius: 50%;
}
<div class="focus pic"><img src=" " ></div>

First set the default values of the element on which it should be when zooming out.
Second set transition effect to 0 in :hover condition.
.focus {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
border: 0px solid #000;
border-radius: 0;
}
.focus:hover {
-webkit-transition: all 0s ease;
-moz-transition: all 0s ease;
-o-transition: all 0s ease;
-ms-transition: all 0s ease;
border: 70px solid #000;
border-radius: 50%;
}
<div class="focus pic">
<img src="http://www.w3schools.com/html/pic_mountain.jpg">
</div>

Add a border that has no width, that way it will zoom out. Right now you remove the border if you lose focus, that does not transition.
.focus {
-webkit-transition: all 9999999s ease;
-moz-transition: all 9999999s ease;
-o-transition: all 9999999s ease;
-ms-transition: all 9999999s ease;
border: 0px solid #000;
}
.focus:hover {
border: 70px solid #000;
border-radius: 50%;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
}
<div class="focus pic"><img src="http://placehold.it/500x20" ></div>

SVG css background image fade in different color svg on hover

I want to only use one div for the icon and one css selector.
Currently I have it working with two different background images being loaded.
fiddle: http://jsfiddle.net/6r0x4npd/
html
<h1>Hover over the icon</h1>
<div class="icon bell"></div>
css
body {
padding: 50px;
}
.icon {
background-image: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyINCiB3aWR0aD0iMjEzLjAwMDAwMHB0IiBoZWlnaHQ9IjE5Ni4wMDAwMDBwdCIgdmlld0JveD0iMCAwIDIxMy4wMDAwMDAgMTk2LjAwMDAwMCINCiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBtZWV0Ij4NCjxtZXRhZGF0YT4NCkNyZWF0ZWQgYnkgcG90cmFjZSAxLjExLCB3cml0dGVuIGJ5IFBldGVyIFNlbGluZ2VyIDIwMDEtMjAxMw0KPC9tZXRhZGF0YT4NCjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAuMDAwMDAwLDE5Ni4wMDAwMDApIHNjYWxlKDAuMTAwMDAwLC0wLjEwMDAwMCkiDQpmaWxsPSIjOTk5OTk5IiBzdHJva2U9Im5vbmUiPg0KPHBhdGggZD0iTTEwMTAgMTkwNiBsMCAtNTMgLTY3IC02IGMtMzM1IC0zMiAtNTk1IC0yNzAgLTY1OSAtNjA1IC0xMSAtNTYgLTE0DQotMTcxIC0xNCAtNDczIGwwIC0zOTkgLTExOCAwIGMtNzggMCAtMTIyIC00IC0xMzAgLTEyIC0xNyAtMTcgLTE1IC02MyAzIC03OA0KMTIgLTEwIDE1NyAtMTQgNjYwIC0xOCBsNjQ1IC01IDAgLTExMiBjMCAtMTAwIDIgLTExNCAyMCAtMTMwIDE2IC0xNSAyNiAtMTcNCjQ4IC05IGwyNyA5IDMgMTIxIDMgMTIxIDMzMiA3IGMyMDcgNSAzMzYgMTEgMzQ0IDE4IDE2IDEzIDE3IDYwIDEgNzYgLTggOA0KLTUxIDEyIC0xMjkgMTIgbC0xMTcgMCAtNCA0MjcgYy00IDQwOCAtNSA0MzEgLTI3IDUwMyAtOTEgMzAzIC0zMzggNTEwIC02NTINCjU0NiBsLTU5IDcgMCA1MyAwIDU0IC01NSAwIC01NSAwIDAgLTU0eiBtMjM2IC0xODIgYzEyMyAtMjYgMjI2IC04MyAzMTkgLTE3Nw0KOTEgLTkyIDEzMyAtMTY2IDE2NSAtMjkzIDE4IC03MSAyMCAtMTExIDIwIC00ODEgbDAgLTQwMyAtNjg2IDAgLTY4NSAwIDMgNDM3DQpjNCA0MjYgNCA0NDAgMjcgNTAzIDg1IDI0MiAyOTggNDEwIDU1MSA0MzIgNzAgNiAyMTcgLTMgMjg2IC0xOHoiLz4NCjwvZz4NCjwvc3ZnPg==');
background-size: 40px 40px;
height: 40px;
width: 40px;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
.icon:hover {
background-image: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyINCiB3aWR0aD0iMjEzLjAwMDAwMHB0IiBoZWlnaHQ9IjE5Ni4wMDAwMDBwdCIgdmlld0JveD0iMCAwIDIxMy4wMDAwMDAgMTk2LjAwMDAwMCINCiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBtZWV0Ij4NCjxtZXRhZGF0YT4NCkNyZWF0ZWQgYnkgcG90cmFjZSAxLjExLCB3cml0dGVuIGJ5IFBldGVyIFNlbGluZ2VyIDIwMDEtMjAxMw0KPC9tZXRhZGF0YT4NCjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAuMDAwMDAwLDE5Ni4wMDAwMDApIHNjYWxlKDAuMTAwMDAwLC0wLjEwMDAwMCkiDQpmaWxsPSIjNzk3OGU3IiBzdHJva2U9Im5vbmUiPg0KPHBhdGggZD0iTTEwMTAgMTkwNiBsMCAtNTMgLTY3IC02IGMtMzM1IC0zMiAtNTk1IC0yNzAgLTY1OSAtNjA1IC0xMSAtNTYgLTE0DQotMTcxIC0xNCAtNDczIGwwIC0zOTkgLTExOCAwIGMtNzggMCAtMTIyIC00IC0xMzAgLTEyIC0xNyAtMTcgLTE1IC02MyAzIC03OA0KMTIgLTEwIDE1NyAtMTQgNjYwIC0xOCBsNjQ1IC01IDAgLTExMiBjMCAtMTAwIDIgLTExNCAyMCAtMTMwIDE2IC0xNSAyNiAtMTcNCjQ4IC05IGwyNyA5IDMgMTIxIDMgMTIxIDMzMiA3IGMyMDcgNSAzMzYgMTEgMzQ0IDE4IDE2IDEzIDE3IDYwIDEgNzYgLTggOA0KLTUxIDEyIC0xMjkgMTIgbC0xMTcgMCAtNCA0MjcgYy00IDQwOCAtNSA0MzEgLTI3IDUwMyAtOTEgMzAzIC0zMzggNTEwIC02NTINCjU0NiBsLTU5IDcgMCA1MyAwIDU0IC01NSAwIC01NSAwIDAgLTU0eiBtMjM2IC0xODIgYzEyMyAtMjYgMjI2IC04MyAzMTkgLTE3Nw0KOTEgLTkyIDEzMyAtMTY2IDE2NSAtMjkzIDE4IC03MSAyMCAtMTExIDIwIC00ODEgbDAgLTQwMyAtNjg2IDAgLTY4NSAwIDMgNDM3DQpjNCA0MjYgNCA0NDAgMjcgNTAzIDg1IDI0MiAyOTggNDEwIDU1MSA0MzIgNzAgNiAyMTcgLTMgMjg2IC0xOHoiLz4NCjwvZz4NCjwvc3ZnPg==');
background-size: 40px 40px;
height: 40px;
width: 40px;
opacity: 1;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}

Animate div content with div's animation in CSS3 or JS

Here is the jsfiddle: http://jsfiddle.net/kimimsc/LEjBR/
<section id="portfolioContent" class="blueTheme">
<div class="container mmContainer">
<div class="pullLeft portfolioVignette">
<div class="portfolioVignetteFilter">
<p>Test1</p>
</div>
</div>
</div>
#portfolioContent {}
.portfolioVignette {background-color: gold; width: 500px; height: 300px; border-radius: 20px; margin: 20px;}
.portfolioVignette > .portfolioVignetteFilter {height: 300px; width:0px; border-radius: 20px; background-color: rgba(204,204,204,0.5); -webkit-transition: width 0.5s ease-out; -moz-transition: width 0.5s ease-out; -o-transition: width 0.5s ease-out; transition: width 0.5s ease-out;}
.portfolioVignette:hover > .portfolioVignetteFilter {height: 300px; width: 500px; border-radius: 20px; background-color: rgba(204,204,204,0.5); -webkit-transition: width 0.5s ease-out; -moz-transition: width 0.5s ease-out; -o-transition: width 0.5s ease-out; transition: width 0.5s ease-out;}
So first of all, if you look at the jsfiddle that I provided you will see what I've done.
Bascily I have a div (in yellow) and I am using css3 transition to animate the width change on another div (grey with 0.5 alpha). The grey div appears over the yellow on hover and disappears when the hover action is over. You can also see that there is a text element 'Test1' that is always displayed.
So what I want to do is when there is no hover I would like to have only the yellow element without anything else (so no text aswell) and on hover I would like the text to come with the grey element.
I don't think this is the right way to do it but I couldn't find anything that could help me.
If I haven't been clear enough. tell me if you have any questions.
Thank you for your help guys,

I did something similar, but interpreted your problem a little differently:
.portfolioVignette p {
width:0;
margin-left:0;
overflow: hidden;
transition: width .5s ease-out;
transition: margin-left .5s ease-out;
}
.portfolioVignette:hover p {
width:100%;
margin-left:90%;
}

Something like this should do it:
.portfolioVignette p {
width: 0;
overflow: hidden;
transition: width 0.5s ease-out;
}
.portfolioVignette:hover p {
width: 100%;
}
See it here: http://jsfiddle.net/shomz/LEjBR/6/

Javascript/CSS3 Transition

When 'image-strip' is hovered it opens to the height of it's contents. However, it's supposed to also have a smooth transition when doing so. What am I doing wrong? The CSS3 doesn't seem to be affecting it.
The Javascript:
<script type="text/javascript">
function hover(id) {
document.getElementById(id).style.height="100%";
}
</script>
The Styles:
#image-strip{
width: 100%;
height: 300px;
float: left;
overflow: hidden;
transition: all 0.3s ease-in;
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-ms-transition: all 0.3s ease-in;
cursor: pointer;
}
#image-strip img{
width: 100%;
}
The HTML:
<div id="image-strip" onmouseover="hover('image-strip')"><img src="images/content/1.jpg"></div>

A couple things, first one:
You can actually pass 'this' in to your function call because then you have access to it and do not need to access the DOM again saving time and memory, not a noticeable amount, but its a better practice.
onmouseover="hover(this)"
function hover(el) {
el.style.height="100%";
}
Second thing:
CSS transitions are meant to be used without Javascript, the point is to not need JS to manipulate the DOM so to get a transition to work you would do:
#image-strip{
width: 100%;
height: 300px;
float: left;
overflow: hidden;
transition: height 0.3s ease-in;
-webkit-transition: height 0.3s ease-in;
-moz-transition: height 0.3s ease-in;
-ms-transition: height 0.3s ease-in;
cursor: pointer;
}
#image-strip:hover {
height: 100%;
}
You only need to call transition on the properties you want to affect and then when the element gets a state change, such as hover, the transition will kick in. Just to be clear you don't need any Javascript to use transitions unless you maybe add or remove an element to kick of a transition but you don't need any JS for what you are doing. Hope this is helpful.

<div id="image-strip" onmouseover="hover(this.id)"><img src="images/content/1.jpg"></div>
STEP 2-->Your css(modified you id to class --># becomes .)
.image-strip{
width: 100%;
height: 300px;
float: left;
overflow: hidden;
transition: all 0.3s ease-in;
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-ms-transition: all 0.3s ease-in;
cursor: pointer;
}
STEP 3-->JavaScript(just add you css class )
function hover(id) {
document.getElementById(id).classList.add('image-strip');
}
Just make sure you do the above changes,Your code will work.100%
I had the same problem,LINK-->css bounce and add class in javascript
UPDATE 1-->
Apply your css with javascript,
document.getElementById(id).style.webkitTransitionDuration="0.6s";
document.getElementById(id).style.webkitTransitionTimingFunction="linear";
document.getElementById(id).style.cursor="pointer";