Image opacity rollover text

[ttmt]

Hi all

I have a jsfiddle here - http://jsfiddle.net/7bjxtm36/3/

I need a simple rollover where the image has a colored opacity and the text shows on rollover.

I need to use this structure where the image is in a div above the text.

This is working here but I need the text to be white.

How can I do this so the text is white.

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

[PaulOB]

Change the hover rule to something like this:

.card-container:hover .back{
    z-index:2;
   background:rgba(240,0,0,0.3);
}

rgba changes the opacity of the background color only and not the text. It’s supported in IE9+.

If you need to support IE8 then you can use CCs and use opacity instead (usually applying position:relative to the child element in IE8 and below stops the opacity affecting the text but does need a certain structure).

There are other more complicated methods but I would just stick to rgba these days.

[antonella]

Hi ttmt,

I’ve expanded on your code and on Paul’s suggestion by extending the overlay to the entire image and adding a transition effect so the animation looks less choppy:

       .card-container{
            height: 300px;
            position: relative;
            width: 400px;
        }

        .block{
            position: absolute;
            
            -webkit-transition: all 1s ease;
            -moz-transition: all 1s ease;
            -o-transition: all 1s ease;
            transition: all 1s ease;
        }

        .back{
            color: white;
            padding: 20px;
            background: transparent;
            height: 100%;
            opacity: 0;
        }
        
        h3{
            font-size: 2em;
        }
        h4{
            font-size: 1.7em;
        }

        .card-container:hover .back {
            opacity: 1;
            background-color: rgba(240, 0, 0, .3);
            z-index: 2;
        }