Develop Reference

Is there any way to customize the css transition?

As far as I understand, if I'm trying to modify the style of an element which has the transition property, the modification will be executed in a gradual way. So is there any way to listen the change of the style, prevent the immediate modification and replace it with a custom animation?

that is transion If you want change the color using css transition
click more details
.box {
width: 150px;
height: 150px;
background: red;
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: green;
cursor: pointer;
}
<div class="box"></div>

Gradient Button to background-color blinks on hover [duplicate]

This question already has answers here:
How to Animate Gradients using CSS
(5 answers)
Closed 4 years ago.
As you can see in the following snippet I have a button with a linear gradient background. In the hover I want change it to a single color. When I try this effect I am getting like a blink effect which the background disappears and then the background color appears. Is there any workarounds to prevent this blinking effect?
a {
text-transform: uppercase;
background-color: transparent;
border-radius: 3px;
padding: 5px 20px;
-ms-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
background-image: linear-gradient(to bottom, rgb(69, 225, 243), rgb(1, 201, 223));
border: none;
outline: none;
}
a:hover {
background-image: none;
background-color: #33afbd;
}
Button

I used only background for those. And used background:linear-gradient(#33afbd,#33afbd); instead of background-color:#33afbd;
a {
text-transform: uppercase;
border-radius: 3px;
padding: 5px 20px;
-ms-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
background: linear-gradient(to bottom, rgb(69, 225, 243), rgb(1, 201, 223));
border: none;
outline: none;
}
a:hover {
background:linear-gradient(#33afbd,#33afbd);
}
Button

Just set the original background-color to the one you want.
The problem is that in the transition it sets first the back to transparent, then to the hover desired color.
Solution:
a {
text-transform: uppercase;
background-color: #33afbd;
border-radius: 3px;
padding: 5px 20px;
-ms-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
background-image: linear-gradient(to bottom, rgb(69, 225, 243), rgb(1, 201, 223));
border: none;
outline: none;
}
a:hover {
background-image: none;
}
Button Here

Css animation to put a color layer over a background image while hovered

I am trying to achieve the effect shown here:
https://css-tricks.com/almanac/properties/t/transition/
Where the color changes when the user hovers over the element. But I want this to occur overtop a background image I set and for the animation to reverse when the user moves their cursor away from the element.
An example of which can be found here:
http://thefoxwp.com/portfolio-packery-4-columns/
I can get the transition part working with:
.box {
width: 150px;
height: 150px;
background: blue;
<!--background-image: url("http://lorempixel.com/380/222/nature");-->
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: black;
cursor: pointer;
}
<div class="box"></div>
But I am having trouble achieving it with a background image and making the white animation transparent over top of it.

The better way to do it would be to use an overlay over the image and apply transition on its opacity.
See this FIDDLE
Use a wrapper div for both .box and .overlay. Since we want overlay to placed exactly top of the box, we absolute positioned overlay on the top of box.
<div class="wrapper">
<div class="box">
</div>
<div class="overlay">
</div>
</div>
You Css
.wrapper {
position: relative;
width: 150px;
height: 150px;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
}
.box {
position: absolute;
//background: blue;
width: 100%;
height: 100%;
background-image: url("http://lorempixel.com/380/222/nature");
}
.overlay {
position: absolute;
z-index: 1;
opacity: 0;
width: 100%;
height: 100%;
background: white;
-webkit-transition: opacity 2s ease-out;
-moz-transition: opacity 2s ease-out;
-o-transition: opacity 2s ease-out;
transition: opacity 2s ease-out;
}
.overlay:hover {
opacity: 0.7;
}

You can add background-image:none on .box:hover. It will remove the background-image and you can get the background-color work. As soon as, you move out of the div.box, image will appear again.
.box {
width: 150px;
height: 150px;
background-image: url("http://lorempixel.com/380/222/nature");
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: black;
cursor: pointer;
background-image:none;
}
<div class="box"></div>

the problem is that background and background-image cannot both exist at the same time. try using nested div tags: one with the background color nested inside the background-image.

How do I make content derived from css clickable?

What should I do such that when i mouse over the '+' , the add to my playlist appear and i'm ABLE to click on the "add to my playlist" and make it linkable. Right now, everytime i try to hover onto add to my playlist, it disappears. :(
(http://i62.tinypic.com/16bhbit.jpg)
Current jfiddle: http://jsfiddle.net/gmraK/
The add to my playlist is generated by
.addtoplaylist-video:hover:after{
background-color: #ffffff;
background:rgba(30,120,160,0.8);
border-color: rgba(30,120,160,0.8);
border-right-color: #ffffff;
border-radius: 5px;
top: -32px;
color: #ffffff;
content: 'Add To My Playlist!';
left: -100px;
padding: 5px 5px;
position: absolute;
z-index: 98;
width: 120px;
height:15px;
text-align:center;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#1e78a0', endColorstr='#1e78a0');
box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
cursor:pointer;
}
html
<div id="video1" class="toggle">
<span class="addtoplaylist-video">
<img src="images/addicon.png" width="12" height="11" alt="add" class="addplaylisticonimg"></span>
<span class="viewplaylist-video">
<img src="images/viewicon.png" width="17" height="9" alt="viewicon" class="viewplaylisticonimg"> </span>
</div>
js
<script type="text/javascript">
$('.addtoplaylist-video').on('click', function(){
$(this).css({'display':'none'});
$(this).parent('.toggle,.toggle2')
.find('.viewplaylist-video')
.css({'display':'block'});
});
$('.viewplaylist-video').on('click', function(){
$(this).css({'display':'none'});
$(this).parent('.toggle, .toggle2')
.find('.addtoplaylist-video')
.css({'display':'block'});
});
</script>

Try this: http://jsfiddle.net/gmraK/2/
I removed the dynamic css div/link and add a div that is only displayed when the parent has the class of active. A class which is added on hover of the toggle element.
So to begin, I removed your :hover:after
.addtoplaylist-video:hover:after {
background-color: #ffffff;
background:rgba(30, 120, 160, 0.8);
border-color: rgba(30, 120, 160, 0.8);
border-right-color: #ffffff;
border-radius: 5px;
top: -32px;
color: #ffffff;
content:'Add To My Playlist!';
left: -100px;
padding: 5px 5px;
position: absolute;
z-index: 98;
width: 120px;
height:15px;
text-align:center;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#1e78a0', endColorstr='#1e78a0');
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
cursor:pointer;
}
Well, to clarify, I modified it to be a standalone element.
CSS
.addtoplaylist-video-link {
position: absolute;
display: none;
background-color: #ffffff;
background:rgba(30, 120, 160, 0.8);
border-color: rgba(30, 120, 160, 0.8);
border-right-color: #ffffff;
border-radius: 5px;
bottom: 15px;
color: #ffffff;
right: 10px;
padding: 5px 5px;
position: absolute;
z-index: 98;
text-align:center;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#1e78a0', endColorstr='#1e78a0');
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
cursor:pointer;
}
Then added the element to the HTML.
HTML
Add To My Playlist!
Finally, I modified the JavaScript. Originally, you were displaying the content on hover as part of the :after pseudo definition. No true interaction within the JavaScript. When you hover over the .toggle class, the .active class is added to the parent element - .frame. The CSS also includes a style to display the new element when the parent has the .active class. When mousing out of the parent element the .active class is removed and the new div is removed.
JS
$('.toggle').mouseover(function(){
$(this).parents('.frame').addClass('active');
});
$('.frame').mouseout(function(){
$(this).removeClass('active');
});
Additional CSS from the fiddle includes adjusted positioning of the .toggle class elements, etc. Here is the portion to show the hidden element on hover:
.active .addtoplaylist-video-link,
.addtoplaylist-video-link:hover{
display: block;
}

Instead of displaying your text using css, write that in jQuery. Just give hover method for that '+' and inside that hover method try to display the text and give the link for that it will work. Because jQuery will give you facility to add HTML elements dynamically.

How to animate border drawing with jQuery?

I want to draw a border around my links on hover, with animation smth like this http://d2fhka9tf2vaj2.cloudfront.net/tuts/152_QTiPad/Milestones/JavaScriptWebsite.html
Please give me some snippets or links.
Thank you
This is how i tried to animate it with jquery
$('a').on('hover', function() {
$(this).animate({ border: '1px' }, 'slow', 'linear');
$(this).animate({ border: 'solid' }, 'slow');
$(this).animate({ border: '#ccc' }, 'slow');
});

If you Have no Idea To like this:)
$("#block").mouseenter(function(){
$("#span1,#span2,#span3,#span4").show();
$("#span1").animate({
height: "50px"
}, 1500 );
$("#span2").animate({
width: "110px"
}, 1500 );
$("#span3").animate({
height: "55px",
top:"-5px"
}, 1500 );
$("#span4").animate({
width: "105px",
left:"-5px"
}, 1500 );
});
$("#block").mouseleave(function(){
$("#span1").animate({
height: "5px"
}, 1500 );
$("#span2").animate({
width: "5px"
}, 1500 );
$("#span3").animate({
height: "5px",
top:"50px"
}, 1500 );
$("#span4").animate({
width: "5px",
left:"100px"
}, 1500,function(){
$("#span1,#span2,#span3,#span4").hide();
});
});
See fiddle:Click me

OK, So i checked out the site, seems they are using a custom animation handler.
Here, this is the external js file that handles all the custom animation.
Custom Handler
Now what you have to do is create multiple divs for each line. Then customize it the way you want. If you want to have the exact same look-
For the horizontal divs,
position:absolute;
border-bottom: 1px;
width: 0px;
height: 0px;
border-bottom-color:#000;
border-bottom-style:solid;
For the vertical divs, just change border-bottom to border-left.
Now the jquery,I'll try to explain how the custom handler works, if you directly wan to copy paste,
Here you go .
First you define the div you want to animate, $fx('#theHeader1') then you add the parameters for making the animation work .fxAdd({type: 'width', from: 0, to: 770, step: 10, delay: 10}), here-
type: Can be with,height,left,top that you want to change
from: Value to start from
to: Value up to
step: Describes speed (should be negative if going from greater value to smaller value)
delay: I guess its for smoothness.Without delay it appears buggy.
Just to say: Making that kind of animation will require a lot of time.

you can check this pen.the technique used is css transitions, no jquery involved
what you do need is like tannerjohn said, a div for each side of button
http://codepen.io/ASidlinskiy/pen/xeBiq?editors=110
html:
<div class="main">
<div class="button">
enter
<div class="line-top"> </div>
<div class="line-right"> </div>
<div class="line-bottom"> </div>
<div class="line-left"> </div>
</div>
</div>
css:
.button{
position: absolute;
top: 50%;
left: 50%;
width: 120px;
height: 40px;
margin: 70px 0 0 -60px;
border: 1px solid rgba(255,255,255,0.25);
}
.button .line-top{
position: absolute;
top: -1px;
left: -1px;
width: 0;
height: 1px;
background: rgba(255,255,255,1);
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.button .line-right{
position: absolute;
bottom: 0;
right: -1px;
width: 1px;
height: 0;
background: rgba(255,255,255,1);
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.button .line-bottom{
position: absolute;
bottom: -1px;
right: -1px;
width: 0;
height: 1px;
background: rgba(255,255,255,1);
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.button .line-left{
position: absolute;
top: 0;
left: -1px;
width: 1px;
height: 0;
background: rgba(255,255,255,1);
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.button:hover .line-top{
width: 122px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.button:hover .line-right{
height: 40px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.button:hover .line-bottom{
width: 122px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.button:hover .line-left{
height: 40px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}