CODEWITHSUNDEEP
csscss-transitions
Kim
Kim

Reputation: 1175

CSS3 transition

I have this page here (work in progress) http://kimwilddesigns.com/index_new.htm

In this section, I want to be able to hover on the li, have the background image fade out and the h2 to fade in. Is this possible with transitions? I might not be setting it up correctly but I wanted to see if this kind of effect is even possible.

<div id="categories-wrapper">
    <ul>
        <li class="fine-art"><a href="#"><img src="pics/hp_icon_fine-art.jpg" alt="fine art" width="290" height="240" border="0"></a>
            <h2>fine art work</h2>
        </li>
        <li class="gd">graphic design work</li>
        <li class="students">my students' work</li>
    </ul>
</div>

Upvotes: 0

Views: 250

Answers (1)

kremalicious
kremalicious

Reputation: 1371

Yes, this works nicely with CSS transitions, something like that:

#categories-wrapper li a {
    position:relative;
    display: block
}

#categories-wrapper li h2 {
    position: absolute;
    left: 20px;
    top: 20px;
    opacity: 0;
}

#categories-wrapper li h2,
#categories-wrapper li img {
    -webkit-transition: opacity .3s ease-in-out;
    -moz-transition: opacity .3s ease-in-out;
    -o-transition: opacity .3s ease-in-out;
    transition: opacity .3s ease-in-out;
}

#categories-wrapper li:hover h2 {
    opacity: 1
}

#categories-wrapper li:hover img {
    opacity: 0
}

See the Fiddle for this, slightly changed your markup by putting the h2 inside of the a tag.

Upvotes: 2

Related Questions