(CSS) With transparent box overlays on images, how do I make text non-transparent?

Discussion in 'Web Design and Development' started by Doju, Oct 22, 2011.

  1. Doju macrumors 68000

    Joined:
    Jun 16, 2008
    #1
  2. Hansr macrumors 6502a

    Joined:
    Apr 1, 2007
    #2
    Only include the image in the div or end it prior to the text or set the text class to 100%?
     
  3. dellmerca macrumors newbie

    Joined:
    May 11, 2014
  4. godrifle macrumors regular

    godrifle

    Joined:
    Oct 20, 2003
    Location:
    Fort Thomas, KY
    #4
    Use rgba to set the background color of the inner div, and skip using opacity completely.

    Code:
    <style>
    	.outer {
    		background: url(http://ecx.images-amazon.com/images/I/41XcuhQ0M3L._SY450_.jpg) no-repeat;
    		width: 210px;
    		height: 450px;
    	}
    	.inner {
    		display: none;
    		color: #fff;
    		text-align: center;
    		height: 100%;
    	}
    	.outer:hover .inner {
    		display: block;
    		background-color: rgba(0,0,0,.7);
    	}
    </style>
    
    <div class="outer">
    	<div class="inner">My text here</div>
    </div>
    
    
     

Share This Page