I'm using CSS hover and opacity to make one image change into another when you hover over it, By placing one on top and setting the opacity so that it disappears on hover and the bottom image is left. Code is as follows:
#fade {
overflow:hidden;
margin:0 auto;
}
#fade img {
position:absolute;
left:0;
top:0;
right:0;
bottom:0;
width:100%;
height:100%;
-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;
}
#fade img.topfade:hover {
opacity:0;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=5)";
filter:alpha(opacity=.5);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
}
This works fine in ie8,ie9 and firefox but in ie7 the second image is not there when the first image is made invisible. Anyone know how to fix this?
I have made a demo which seems to work for me in Chrome, Firefox and IE7.
It works in IE8+ as the -ms-filter rule is correct, however opacity in IE7 is the filter:alpha(opacity=xx) rule and the value should be between 0 and 100. Your current value .5 is making the hovered image almost totally opaque (and I'm not sure it's even valid).
quirksmode has a good summary of the different opacity CSS rules for IE.
Note: In your example structure you are missing a <ul> or <ol> before the <li> which I have added in the demo.
Related
I'm using the next CSS rules for a div
transition-property: width;
transition-duration: 0.2s;
transition-timing-function: linear;
The thing is that currently the behavior is that the transition direction is going from right to left.
Is there anyway to make the transition go the other way around, meaning from left to right?
Thanks for any kind of help
The transition works only for elements that are selected by the query. So if you have this html:
<div>sdlfkj</div>
And this css (WRONG):
div{
width:100px;
}
div:hover{
width:200px;
transition: width 2s;
}
The transition will work only if you hover the element. Not if you unhover the element, because there is no :unhover! If you like to have the transition while unhovering the element too, you need to put the transition to the element that will be selected in the unhovered state then.
Use this (RIGHT):
div{
width:100px;
transition: width 2s;
}
div:hover{
width:200px;
}
I want to animate an element's position change with CSS transition, but it is not working even when I use the transition on all properties, as in the example here: http://jsfiddle.net/yFy5n/3/
However, I don't want my final solution to apply transition to all properties, but instead only on the position change. So the color change should be instant, only the position change from left to right should be animated (the opposite of what is happening now).
You forgot to define the default value for left so it doesn't know how to animate.
.test {
left: 0;
transition:left 1s linear;
}
See here: http://jsfiddle.net/shomz/yFy5n/5/
Please Try this code margin-left:60px instead of left:60px
please take a look: http://jsfiddle.net/hbirjand/2LtBh/2/
as #Shomz said,transition must be changed to transition:margin 1s linear; instead of transition:all 1s linear;
try this:
.test {
position:absolute;
background:blue;
width:200px;
height:200px;
top:40px;
transition:left 1s linear;
left: 0;
}
I'm afraid I'd drown everyone in code if I tried to include every relevant detail so for the sake of simplicity I made this so you can get your head around what I'm trying to do:
edited:
http://jsfiddle.net/LcsJL/6/
and the actual code I'm using:
.box-4 .box-subtitle {
position:absolute;
display:block;
border-radius:0 4px 0 0px;
-moz-border-radius:0 4px 0 0px;
-webkit-border-radius:0 4px 0 0px;
background:#403f3f;
height:60px;
width:199px;
padding: 11px 23px 0 12px;
max-height: 1000px;
-webkit-transition: opacity 0.5s ease;
-moz-transition: opacity 0.5s ease;
-o-transition: opacity 0.5s ease;
transition: opacity 0.5s ease;
}
.box-4:hover .box-subtitle {
background:url(images/bg-box.gif) 0 0 repeat;
}
.box-subtitle span {
font-size:15px;
line-height:23px;
color:#fff;
text-transform:uppercase;
font-family: 'Maven Pro', sans-serif;
font-weight:700;
background:url(images/bg-subtitle.png) 0 2px no-repeat;
padding:0 0 0 32px;
display:inline-block;
-webkit-transition: opacity 0.5s ease;
-moz-transition: opacity 0.5s ease;
-o-transition: opacity 0.5s ease;
transition: opacity 0.5s ease;
}
.box-4:hover .box-subtitle span {
color:#a6e7f0;
background:url(images/bg-subtitle1.png) 0 2px no-repeat;
}
What I want to happen is that when you hover over the larger box, both the div and the span contained within that div should fade in separate property changes.
The obvious question is, "is this even possible?" I know transitions are relatively new and there might be some bugs still, but I'd very much appreciate it if there is a way to do this, even if it's not through this method, if you could enlighten me as to how to implement it.
edit:
Okay, I managed to get the <span> to fade in the right way by using transition: background 1s ease, color 1s ease; since those were the only properties I wanted to change. The background is still posing a challenge as I have just discovered that background-image is not yet a supported property for transitions. Although I am using background: url(URL) 0 0 repeat; but it's still essentially a background image, which I why I think it's giving me trouble. Does anyone know any work-arounds for fading in background images? (opacity doesn't work since it fades out the whole div instead of just changing the background)
I've played around with the idea of having a normal state div nested on top of the hover state div and making the opacity of the normal state div transition out on mouse-over. I'm having trouble wrapping my head around how that would work though. If someone is capable of accomplishing such a feat, please jsfriddle me this, batman.
more edit:
Here's an updated jsfiddle of my problem, I can't get the divs to stack right even though I have them absolutely positioned over each other with z-index inside a relatively positioned wrap. Am I missing something?
http://jsfiddle.net/Ep2xa/1/
The problem is you didn't change opacity when hover.
Either use transition: background 0.5s ease; or set opacity when hover.
edit for comment:
background-image cannot be transitioned according to the spec: http://www.w3.org/TR/css3-transitions/#animatable-css
If you can use slightly altered html, you could use another div absolutely positioned over the image, then fade the background of that div. The problem with the way your html is structured, you'd have to know the exact height of the div with the background-image in order to cover only that and not the span. I've also moved the span outside .content1: http://jsfiddle.net/LcsJL/8/
original answer
Yes. There is no span inside .content1, so change this: .box:hover .content1 span to .box:hover span
I don't even know what I did, just started moving snippets around and removing some things and suddenly magic happened:
http://jsfiddle.net/LcsJL/9/
But, thanks a lot to brouxhaha for suggesting that background:rgba transition, it really helped.
i am wondering if it is possible to set the height of a div with css animation.
I have a div that when you hover over it opens up but i want it to stay that height not shrink back to the original height.
Is this possible?
it needs to be done in pure css not javascript as its a website for college
You can do something like this:-
HTML:
<div class="divAnimate" onmouseout="this.className='setHeight'">Div Height Animation</div>
CSS:
.divAnimate {
border: 1px solid;
}
.divAnimate:hover {
height: 200px;
}
.setHeight {
height: 200px;
border: 1px solid;
}
Refer LIVE DEMO
You should use jQuery. CSS3 is not supported in all browsers. However, it is possible to use CSS3 to achieve this.
CSS:
#myDiv {
height:20px;/* initial height */
width:100px;
background:#aaa;
-webkit-transition: height .4s linear; /* you can replace 'height' with the attribute you are changing (eg: color, width...)*/
-moz-transition: height .4s linear;
-o-transition: height .4s linear;
-ms-transition: height .4s linear;
transition: height .4s linear;
}
#myDiv:hover {
height:100px; /* desired height */
}
HTML:
<div id="myDiv">
Hello World!
</div>
Hope this helps.
EDIT: Sorry, I didn't see that you needed it to stay that height. In order to do that, you would need to use something like onmouseout (or another event listener), which in the end would use Javascript anyway.
Yes, this is possible with just CSS3, but will only work in Safari/Chrome and recent versions of Opera, Mozilla Firefox, and IE10 as you need CSS3 animation keyframes to preserve the end-state of the transition.
http://jsfiddle.net/rPc88/3/
Is there a way to use -webkit-transition with display?
I'm using CSS display to hide and show a navigations second level … but only display: none and display: block on :hover is a little un-sexy… a ease would be great (like -webkit-transition: display 300ms ease-in;)
I know that's fairly easy to do this with jQuery, but I'm currently trying to setup everything with CSS3 (i know: not all browsers do support it, but that's irrelevant for this one project I'm currently working on)
here's some code & structure: (the li.menu1 has a :hover with section.nav-menu1 {display: block;})
<ul>
<li class="menu1">Menu 1
<section class="nav-menu1">
<h1 class="none">Level 2 Overlay</h1>
<nav>
<h2 class="none">Menu 1 Navigation</h2>
<ul>
<li>Menu 1 Level 2-1</li>
<li>Menu 1 Level 2-2</li>
<li>Menu 1 Level 2-3</li>
</ul>
</nav>
</section>
</li>
</ul>
So I'm not sure I see all the pieces put together here. You want to animate opacity and visibility, with visibility having a delay so opacity is done before it triggers;
opacity: 0;
-moz-transition: opacity .25s linear, visibility .1s linear .5s;
-webkit-transition: opacity .25s linear, visibility .1s linear .5s;
-o-transition: opacity .25s linear, visibility .1s linear .5s;
transition: opacity .25s linear, visibility .1s linear .5s;
visibility: hidden;
to
opacity: 1;
visibility: visible;
visibility will wait .5s and then switch over to hidden. You can even turn off the visibility transition on one side if you want it to fade both ways. (So that when fading in, the element is instantly visible instead of waiting .5s and transitioning.)
You should use height or width transition in order to show and hide second level menu. Display property is not supported by transitions.
There is an article at ODC with something similar to your needs. Also, I've modified it a bit in order to look more like menu item. Works perfect in Opera 10.7, without transitions in Firefox 3.6.12 and doesn't at all in Chrome 7.0.517.41.
I hope this will be useful as start point for your own animated menu.
Update 1:
Your menu with ease-in transitions. Probably, I've got something wrong about it's structure. The problem is that transitions do not work with auto, so you have to manually specify final height.
Update 2:
Use opacity as transition property. On invisible element set visibility:hidden and visibility:visible on visible. That will prevent from invisible clickable links. Also, visible-invisible transition doesn't work, don't know why. Have to work more om it.
Example.
You should use an opacity transition, not a display transition for this. Display:none removes an element from the layout entirely - I think you want it there, but invisible.
Use overflow:hidden > overflow:visible , works better, I use like this:
example {
#menu ul li ul {
background-color:#fe1c1c;
width:85px;
height:0px;
opacity:0;
box-shadow:1px 3px 10px #000000;
border-radius:3px;
z-index:1;
-webkit-transition:all 0.5s ease;
-moz-transition:all 0.6s ease;
}
#menu ul li:hover ul {
overflow:visible;
opacity:1;
height:140px;
}
is better than visible because overflow:hidden act exactly like a display:none,