CODEWITHSUNDEEP
htmlanimationcsshover
Laszlo Parazs
Laszlo Parazs

Reputation: 57

Css3 picture animation with appearing text

I'm trying to make a picture over picture fading with some text appearing on them purely with CSS3. I took the basic fading from here: http://css3.bradshawenterprises.com/cfimg1/ Now what I'm trying to do is, that when I hover the picture, then not only an other picture fades in, but some text too what contains a clickable link (for ie. a download link). The first problem was that the text appeared outside the div, which I could fix by adding this:

.crossfade h1 {
position: absolute;
}

I use h1, because paragraphs don't appear at all. So after this, I got the fading right, and even the text is in it's place, but it's not selectable and not clickable, it appears like it's a part of the image.

Here's my code so far (the html and the css part too):

<div class="crossfade">
    <img class="bottom" src="pics\hover.jpg" />
    <h1>Title</h1>
    <img class="top" src="pics\23.jpg" />
</div>

.crossfade {
    position:relative;
    height:200px;
    width:200px;
    margin:0 auto;  
}
.crossfade img {
    position:absolute;
    left: 0;
    -webkit-transition: opacity 0.2s ease-in-out;
    -moz-transition: opacity 0.2s ease-in-out;
    -o-transition: opacity 0.2s ease-in-out;
    -ms-transition: opacity 0.2s ease-in-out;   
    transition: opacity 0.2s ease-in-out;
}

.crossfade img.top:hover {
    opacity: 0;
}

.crossfade h1 {
    position: absolute;
}

Any help or ideas on it would be greatly appreciated. Thanks in advance.

Upvotes: 1

Views: 1696

Answers (1)

mddw
mddw

Reputation: 5590

http://jsfiddle.net/3tkWj/5/

I just added another :hover and z-index.

.crossfade img.top:hover, .crossfade p:hover+img {
    opacity: 0;
}

edit : Here's a working exemple of what you want (see comments)

http://jsfiddle.net/3tkWj/12/

Beware, I trimed the CSS.

Upvotes: 2

Related Questions