Image opacity rollover text

Hi all

I have a jsfiddle here -

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="" class="img-responsive"/>
		        <div class="back block">
		           <p>Dummy text Dummy text Dummy text Dummy text 
		                Dummy text Dummy text Dummy text Dummy text Dummy text 

Change the hover rule to something like this:

.card-container:hover .back{

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.

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:

            height: 300px;
            position: relative;
            width: 400px;

            position: absolute;
            -webkit-transition: all 1s ease;
            -moz-transition: all 1s ease;
            -o-transition: all 1s ease;
            transition: all 1s ease;

            color: white;
            padding: 20px;
            background: transparent;
            height: 100%;
            opacity: 0;
            font-size: 2em;
            font-size: 1.7em;

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

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.