CODEWITHSUNDEEP
javascriptcsscss-transitions
sitilge
sitilge

Reputation: 3737

Toggle divs with pure JS

The scenario: one main container, a child img with opacity 1 and a child span with opacity 0, both absolute positioned against the relative positioned parent div. Decrease the opacity of img and simultaneously increase the opacity of span. When the opacity exceeds some threshold, e.g. 0.01 and 0.99 hide/show (display: none; display: inline-block) the img/span respectively. And then the reverse process to show the img and hide the span. What would be the best solution (probably using CSS3) to achieve that?

<div id="post-cont">
    <img id="post-img-1" class="post-img" src="small.jpg"/>
    <span id="post-txt-1" class="post-txt">Some text</span>
</div>

Had some workaround with JS, but it is laggy so I would like to solve this using CSS3 and as minimal JS as possible.

Upvotes: 0

Views: 138

Answers (2)

Christopher Marshall
Christopher Marshall

Reputation: 10736

CSS3 only

http://jsfiddle.net/SPmj5/7/

<div id="post-cont">
    <img id="post-img-1" class="post-img" src="http://placehold.it/250x250"/>
    <span id="post-txt-1" class="post-txt">Some text</span>
</div>


#post-cont {
    position: relative;
}

#post-cont img,
#post-cont span {
    display:block;
-o-transition: opacity .7s ease;
    -ms-transition: opacity .7s ease;
    -moz-transition: opacity .7s ease;
    -webkit-transition: opacity .7s ease;
    transition: opacity .7s ease;    
}

#post-cont img {
    position: absolute;
    top: 0;
    left: 0;
   opacity: 1;
}

#post-cont span {
    position: absolute;
    top: 100px;
    left: 80px;
   opacity: 0; 
}

#post-cont:hover img {
    opacity: 0;
}

#post-cont:hover span {
    opacity: 1;
}

Be aware transition is not supported in IE8/9 http://caniuse.com/#search=transition

Upvotes: 3

httpgio
httpgio

Reputation: 127

Sounds like some fadeToggle to me! I don't think you can use pure CSS3 for this..

https://api.jquery.com/fadeToggle/

Upvotes: -1

Related Questions