CODEWITHSUNDEEP
csscss-transitionstransition
Mockingbird
Mockingbird

Reputation: 29

Use CSS transitions to fade in 2 elements while hovering over a third

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/

Upvotes: 0

Views: 1471

Answers (3)

Mockingbird
Mockingbird

Reputation: 29

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.

Upvotes: 0

brouxhaha
brouxhaha

Reputation: 4093

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

Upvotes: 0

Kabie
Kabie

Reputation: 10663

The problem is you didn't change opacity when hover.

Either use transition: background 0.5s ease; or set opacity when hover.

Upvotes: 1

Related Questions