This question already has answers here:
How can I delay a :hover effect in CSS?
(3 answers)
Closed 9 years ago.
I have an image with a button on it. The button will only be visible, if I hover over the image.
I change it from display:none to display:block and it appears instantly.
I would like to delay the appearance of this button by 1 sec or make it appear linear, so it's a smooth transition. I saw the CSS3 transition property and applied this, by using opacity, too (0.0 to 1.0).
It seems not to be working. What am I missing? I don't think the -webkit specific properties are the reason.
Check out my fiddle.js example:
Fiddle.js: Image hover over overlay transition example
Thank you!
Here is a working fiddle
I have use all instead of opacity, but either way you can change that too.
.image_controls{
position: absolute;
left: 0;
top:5px;
opacity:0.0;
}
.image_wrapper:hover .image_controls {
-webkit-transition: all 2s ease;
transition: all 2s ease;
display: block;
opacity:.9;
}
You could use jQuery's fadeIn() / fadeOut(). As you tagged javascript and jquery, I guess using JS would not be a concern for you, right?
Related
This question already has answers here:
Spin or rotate an image on hover
(5 answers)
Closed 8 months ago.
I'm making a folding menu for my simple website and I need to rotate a button 90° when the mouse is over it.
button {
transform: rotate(90deg);
}
button:hover{
transition: 0.70s;
transform: rotate(90deg);
}
Is the property that you're looking for.
This is not my codepen but it does show the steps needed
codepen.io
Without seeing how you're implementing it this is the barebones, but it's worth mentioning that I recommend rotating a div surrounding the button in order to give the mouse a more lenient area for the hover to take effect.
This question already has answers here:
How do I apply CSS3 transition to all properties except background-position?
(6 answers)
Closed 1 year ago.
I have an element with the transition property
// app.css
.myBtn{
width: 100px;
transition: all 6s ease-out;
background: blue;
}
.myBtn:hover{
width: 300px;
background-color: green;
}
Now, I want to set transition:none only for background-color property.
Note: I cannot change app.css file code, I have to write on some other file.
Any helpful answer will be appreciated.
I think you could override the transition property value leaving out background but you would have to specify each property you do want to transition.
.myBtn{
transition-property: width, height... etc;
}
Well im working on a small php script and i have an problem with it when using trantions css3 proprety.When i use transition i dont know why it works fine when the user hover the button and it takes 1s to change background but when the user move the mouse out of the button it doesnt take 1s it changes instantaly.
DEMO
.b{
width:100%;
}
.b:hover{
background:#fff;
transition: 1s;
}
<button class="b">HOVER ME</button>
Put the transition on the base state and it will work both ways.
EDIT: some browsers will require base values to transition to/from. Also, I wouldn't set a transition without defining what I was transitioning.
Also, I tend not to transition shortcut properties. Ideally, this should be transitioning background-color only.
.b{
width:100%;
transition:background-color 1s;
}
.b:hover{
background-color:#fff;
}
JSfiddle Demo - revised
This question already has an answer here:
Closed 10 years ago.
Possible Duplicate:
CSS keyframes only works in Chrome
My site uses css transitions to fade in new images on the three icons (facebook, twitter, email). The transitions work well on Chrome, but not in Firefox. Here's the css snipper:
.link-button > div{height:79px; width:79px; display:inline-block; zoom: 1; *display:inline;
transition: 0.5s;
-moz-transition: 0.5s;
-webkit-transition: 0.5s;
-o-transition: 0.5s;}
.link-button .facebook{background:url(../img/bt_facebook.png) center center no-repeat transparent;}
.link-button .facebook:hover{background-image:url(../img/bt_facebook_over.png);}
.link-button .twitter{background:url(../img/bt_twitter.png) center center no-repeat transparent;}
.link-button .twitter:hover{background-image:url(../img/bt_twitter_over.png);}
.link-button .email{background:url(../img/bt_email.png) center center no-repeat transparent;}
.link-button .email:hover{background-image:url(../img/bt_email_over.png);}
I'm assuming that my error is directly with the -moz-transition because the :hover state works, but not the transition. I've copied the transition code from w3 school, so I know it's not incorrect, but my Firefox correctly fires the css transitions found on the internet, so I know it's not my browser being faulty. It must be something fundamental I've overlooked.
Any ideas?
The CSS3 specification says background-image cannot be animated. The background-image transition in Chrome is nonstandard.
How to make images move automatically + on mouseover in CSS/HTML?
For example Ek Main Aur Ekk Tu Movie Site
It's actually really easy to do with CSS3:
.moveMe
{
width: 150px;
height: 40px;
background: #f01;
position: absolute;
top: 0;
-webkit-transition: top 2s;
-moz-transition: top 2s;
-o-transition: top 2s;
}
.moveMe:hover
{
top: 10px;
-webkit-transition: top 0.3s;
-moz-transition: top 0.3s;
-o-transition: top 0.3s;
}
This tells the element onHover to transition between the two states of top over a period of 2 seconds and 0.3 seconds when the mouse leaves.
Check it out here: http://jsfiddle.net/HGjQC/'
As this is a CSS3 technique, the code here will only work in webkit browsers (Chrome, Safari, any other browser using the Chromium engine [Rockmelt]), Opera and Mozilla browsers.
For IE, yoy'll probably need to use Javascript for now until MS decides to implement more CSS3.
It uses something called parallax effect. I found a jquery plugin that seems to help do this kind of effects. The plugin is called Plax, here is the demo
you could make an invisible div, and then use the query .attr() tag to change the image on hover. I'm not sure I get your question though, because I couldn't find the site that wanted to base yours off of.
Maybe you can use JavaScript, like this:
http://jsfiddle.net/HGjQC/2/