Переключить divs с чистым JS

Question

Сценарий: один главный контейнер, дочерний img с непрозрачностью 1 и дочерний диапазон с непрозрачностью 0, оба абсолютные расположены относительно относительного позиционного родительского div. Уменьшите непрозрачность img и одновременно увеличьте непрозрачность пролета. Когда непрозрачность превышает некоторый порог, например. 0.01 и 0.99 hide/show (display: none; display: inline-block) соответственно img/span. А затем обратный процесс, чтобы показать img и скрыть пробел. Что было бы лучшим решением (возможно, с использованием CSS3) для достижения этого?

<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> 

Если бы некоторые workaround with JS, но это лага, так что я хотел бы решить это с помощью CSS3 и как минимальный JS, как это возможно.

Answer 1

CSS3 только

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; 
} 

Имейте в виду переход не поддерживается в IE8/9 http://caniuse.com/#search=transition

Answer 2

Звучит как какой-то fadeToggle для меня! Я не думаю, что вы можете использовать чистый CSS3 для этого ..

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