图像不透明度翻转文本

Question

我这里有一个jsfiddle - http://jsfiddle.net/7bjxtm36/3/

我需要一个简单的翻转，其中图像具有彩色不透明度，文本显示翻转。

我需要使用这种结构，其中图像位于文本上方的div中。

这是在这里工作，但我需要文本为白色。

我该怎么做才能使文字变白。

        <div class="card-container">
            <div class="card">
                <div class="front block">
                    <img src="http://lorempixel.com/g/400/300/" class="img-responsive"/>
                </div> 
                <div class="back block">
                   <h3>Heading</h3>
                   <h4>Sub-Heading</h4>
                   <p>Dummy text Dummy text Dummy text Dummy text 
                        Dummy text Dummy text Dummy text Dummy text Dummy text 
                   </p>
                </div> 
            </div> 
        </div>