Demo
hover
<p>Text here</p>
I want the <p> to fade in and slide in when the <a> is hovered. Problem is, with the CSS in the demo, the <p> just "pops" in rather than animating.
The transition shorthand doesn’t support multiple properties in the same place:
transition: max-height .5s ease, opacity .5s ease;
You also need overflow: hidden to make it look like it’s sliding. Updated demo
You need to comma seperate the properties you want to transition:
p {
opacity: 0;
max-height: 0;
transition: max-height .5s ease, opacity .5s ease;
}
http://jsfiddle.net/pZngX/
Related
I'm trying to have a css transition take place on a link upon hover. The text of the link should change color as well as a child span's color. It's happening except the span transition appears to start only when the first transition completed. Any ideas?
<div class="transition">
<a href="#">
Click here
<span class="glyphicon glyphicon-play pull-right"></span>
</a>
</div>
.transition a,
.transition span {
-webkit-transition:color .2s linear;
-moz-transition: color .2s linear;
-o-transition: color .2s linear;
transition: color .2s linear;
}
I tried separating the classes into two which made no difference.
EXAMPLE: JSFIDDLE
The transition will cause the color to change for its children, so they will begin the transition again and again. Try to not transition inside a transition with the same property. If you want the color of the span to change with the parent, use color: inherit; without transition on the span.
Just a fiddle as an example: JSFIDDLE
.transition a {
-webkit-transition:color .2s linear;
-moz-transition: color .2s linear;
-o-transition: color .2s linear;
transition: color .2s linear;
}
I just got into learning CSS3 and HTML5 and right now I'm trying to get my span text to transition into another color when the mouse hovers over the .link div with the following code. For some reason it is not working, I have tried a couple of things to get it to work but no luck so far.
Can anybody help me fix the issue or point me into the right direction?
Thank you!
--
HTML
<div id="celebrity-list">
<header>
<h2>Celebrities</h2>
</header>
<div id="a">
<span class="letter">A.</span>
<div class="links">
</div>
</div>
</div>
CSS
#celebrity-list > div span.letter{
position: relative;
font: 22px Arial;
color: #3a3a3a;
-webkit-transition: color .3s ease-out;
-moz-transition: color .3s ease-out;
-o-transition: color .3s ease-out;
-ms-transition: color .3s ease-out;
transition: color .3s ease-out;
}
#celebrity-list > div .links:hover #celebrity-list > div span.letter{
color: #b43838;
}
#celebrity-list > div .links{
position: relative;
width: 190px;
height: 342px;
background: #f2f2f2;
-webkit-transition: border .3s ease-out;
-moz-transition: border .3s ease-out;
-o-transition: border .3s ease-out;
-ms-transition: border .3s ease-out;
transition: border .3s ease-out;
}
At first, your CSS selectors are incorrect. The x > y selector only selects direct children. Both span.letter and div.links are no direct children of #celebrity-list so will not be selected by these selectors. The ">" may be removed in this situation. Next to that, an ID should always be unique.
This is not working at all:
#celebrity-list > div .links:hover #celebrity-list > div span.letter{
color: #b43838;
}
You are trying to select span.letter, as a child of a div, as a direct child of #celebrity-list, as a child of .links:hover, as child of a div, as direct child of #celebrity-list.
If you want to change span.links text color you should put this element after the div#links and select it as follows:
div.links:hover + span.letter { /* your CSS */ }
Another option is to put span.letter inside div.links (as a direct child) and use the following selector:
div.links:hover > span.letter { /* your CSS */ }
If you really want to leave span.letter before div.links in your HTML you should use javascript to accomplish the result wanted.
it is because div.links is a sibling of the span.letter
your selector must be a parent of the markup you might want to apply a style.
I have the following demo: http://jsfiddle.net/EHrk4/2/
Is it possible that #main remains opacity 1 until I hover over the hyperlink, then it goes to 0.3?
HTML:
<div id="main">
hover me to fade out main
</div>
CSS:
#main {
-webkit-transition: opacity 0.3s;
-moz-transition: opacity 0.3s;
-ms-transition: opacity 0.3s;
-o-transition: opacity 0.3s;
transition: opacity 0.3s;
height:400px;
width:400px;
background:red
}
#main:not(:hover) {
opacity: 0.3;
}
Many thanks for any pointers.
No - your link is inside the element you want to affect, and currently there is no parent selector in CSS2 or in CSS3.
If your anchor was a sibling element of the div, you could affect the div's opacity as you wish - like in this quick jsFiddle example.
Example of affecting sibling in pure CSS:
HTML:
hover me to fade out main
<div id="main">
</div>
CSS:
a:hover + #main {
opacity:0.5;
}
If it has to be inside, I'd recomend using a Javascript library such as jQuery to achieve it.
Or, take a look at the the following answer, which explains a workaround for opacity affecting child elements.
I would do it via jquery personally.
http://jsfiddle.net/EHrk4/5/
JQ
$('#link').hover(function(){
$('#main').addClass('hover');
}, function(){
$('#main').removeClass('hover');
})
CSS
#main {
-webkit-transition: opacity 0.3s;
-moz-transition: opacity 0.3s;
-ms-transition: opacity 0.3s;
-o-transition: opacity 0.3s;
transition: opacity 0.3s;
height:400px;
width:400px;
background:red
}
.hover {
opacity: 0.3;
}
EDIT:
From our comments, here is how to do it while still preserving the child elements opacity of 1.
http://jsfiddle.net/EHrk4/11/
Yes this is posible for example:
#main,a{
display:block;
height:100px;
width:100px;
}
Make the height,width of the anchor tag same as #main. So when you hover the link it will give you the affect all over the #main. Other wise you can use jquery for this.
I'm trying to get tabs (as a menu) to be offset the screen and when somebody hovers over it, it transitions downwards revealing more of the tab. My code is this:
.tab:hover {
position: relative;
top: 45px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
When I hover over the image, it does the transitioning downwards correctly. However, when I leave the tab, it snaps back into place. What I'd like it to do is transition back into its original place, not snap. What am I missing from the code to make this happen?
UPDATE:
I figured out the problem. I made a new CSS style set for just .tab and I put in the transitioning AND top: 0px.
Instead of putting it on the :hover, put the transition on .tab.
I'm having a issue with the background-image transition using CSS3. The problem is that it occasionally flickers the first time you roll over it. If you roll-over it the second time it's no problem makes a smooth fade-in/fade-out from one to the other.
I've searched google about this issue found a bunch of people having the same problem. But they resolved the issue by using 1 background image and then using background-position to hide it till you roll over it.
I can't do that with mine because I need the smooth fade-in/fade-out animation from 1 image to the other (it's 2 images of the same button with different colors and thingies.) If I use background-position it'll come from underneath the button on it's place. I need a fade-in fade-out animation.
So I'm guessing this issue happens because of the image not being loaded that, and that it needs a fraction of a second to load.
Here's the code:
.btn-denken{
background:url(../images/btn-denken.png);
width:219px;
height:40px;
float:left;
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-ms-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.btn-denken:hover{
background:url(../images/btn-denken-hover.png);
}
Help is very much appriciated! Thank you!
The trick is to make sure that the images you want to do transition on are already loaded by CSS, that's why putting them in the document as dummy's and loading them through CSS is the solution.
In the example below I have 4 images (0.jpg - 3.jpg), and if I would now set the class '.landing-1' on my document (html), the images transition properly.
In my CSS:
body {
-webkit-transition: background 1s;
background: url(0.jpg) no-repeat center center / cover fixed;
}
.dummy-image {
position: absolute;
left: -100%; /* to hide the dummy */
}
Simple javascript to cache the images:
var images = [],
load = function() {
$('head').append('<style>html.landing-'.concat(this.index, ' body.landing, .dummy-image-', this.index, ' { background: url(', this.src, ') no-repeat center center / cover fixed; }</style>'));
$('body').append('<div class="dummy-image dummy-image-'.concat(this.index, '">'));
};
for(var i=0; i<4; i++) {
var image = document.createElement('img');
image.src = i + '.jpg');
image.index = i;
image.onload = load;
images.push(image);
}
Perhaps you can use two separate containers in the same area using absolute positioning and z-index. Set the two different background images one per container, and then when you hover just make the opacity of the top container to be fully transparent.
I had the same problem: I wanted to use transitioning to fade between images. Using a 2-in-1 image (or a sprite) and using css to change it's position on hover doesn't work because you end up seeing the image scrolling side-side or up-down.
(FYI, you're correct - the blink occurs because it takes a moment to load your image but the transition has already begun from the moment you hover. After you've hovered once, the image has loaded so it won't happen again until you reload the page.)
Here is a purely HTML and CSS solution:
Create a containing div
Place an anchor tag and image tag within this container
Set a background image on the anchor tag (this should be the image you want displayed on page-load)
The image tag should be the image you want to display on hover and needs a z-index applied to bring it behind your anchor tag
After much experimentation, I arrived at the following solution:
(Demo here: http://jsfiddle.net/jmtFK/)
HTML:
<div class="button" id="specific">
<img>
</div>
CSS:
.button {
position: relative;
}
.button a {
display: block;
width: px;
height: px;
background: url() no-repeat;
-webkit-opacity: 1;
-moz-opacity: 1;
opacity: 1;
-webkit-transition: opacity 0.2s ease;
-moz-transition: opacity 0.2s ease;
-ms-transition: opacity 0.2s ease;
-o-transition: opacity 0.2s ease;
transition: opacity 0.2s ease;
}
.button a:hover {
-webkit-opacity: 0;
-moz-opacity: 0;
opacity: 0;
-webkit-transition: opacity 0.3s ease;
-moz-transition: opacity 0.3s ease;
-ms-transition: opacity 0.3s ease;
-o-transition: opacity 0.3s ease;
transition: opacity 0.3s ease;
}
.button img {
position: absolute;
top: 0px;
left: 0px;
z-index: -1;
-webkit-opacity: 0;
-moz-opacity: 0;
opacity: 0;
-webkit-transition: opacity 0.3s ease;
-moz-transition: opacity 0.3s ease;
-ms-transition: opacity 0.3s ease;
-o-transition: opacity 0.3s ease;
transition: opacity 0.3s ease;
}
.button a:hover + img {
-webkit-opacity: 1;
-moz-opacity: 1;
opacity: 1;
-webkit-transition: opacity 0.3s ease;
-moz-transition: opacity 0.3s ease;
-ms-transition: opacity 0.3s ease;
-o-transition: opacity 0.3s ease;
transition: opacity 0.3s ease;
}
I initially didn't have my z-indexed image set to transparent and found that the edges of it appeared around the outside of the link image. This was ugly so I applied opacity: 0.
I also added CSS transitions for "hover in" and "hover out". (Basically, the transition settings applied to a certain CSS state dictate how it transitions to that state. eg the transition settings applied to .button a take effect when button a:hover is no longer applicable.
I hope that helps.