How to adjust the opacity of CSS background image instead of radio button with an icon overlay


Tags: html,twitter-bootstrap,css3,radio-button,opacity

Problem :

I need advice with a code I am writing in CSS.

Basically, I am replacing/hiding three radio buttons with background images. When one of the images is selected a check icon appears on top of it. I used parts of this code here to make this happen.

Code works ok, except one little thing - I want to reduce the opacity of the background image once the check icon appears on top of it, without reducing the opacity of the check icon in the same time. So far I have not been able to achieve that so need some expert advice.

HTML HERE:

<div class="radio-check-switch">    

    <div class="form-item">
        <label for="farm_type_agri">
            <input type="radio" name="farm_type" id="farm_type_agri" value="One"/>
            <div class="radio-switch-state" style="background-image:url('http://lorempixel.com/output/food-q-c-400-400-10.jpg');">
                <span class="icon-on"></span>
            </div>
            <div class="radio_lbl">One</div>
        </label>
    </div>

    <div class="form-item">
        <label for="farm_type_fore">
            <input type="radio" name="farm_type" id="farm_type_fore" value="Two"/>
            <div class="radio-switch-state" style="background-image:url('http://lorempixel.com/output/food-q-c-400-400-10.jpg');">
                <span class="icon-on"></span>
            </div>
            <div class="radio_lbl">Two</div>
        </label>
    </div>       

</div>

CSS HERE:

.form-item{
    display:inline-block;
}
.radio-check-switch{
    margin-bottom:10px;
}
.radio-check-switch input[type="radio"]{
    display: none;
}
.radio-check-switch .radio-switch-state{
    background-color:#FFF;
    display: inline-block;
    border-radius:3px;
    color:#fff;
    transition:all .5s ease;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    width:120px;
    height:70px;
    position: relative;
    overflow:hidden;
    vertical-align:middle;
    /*overflow:hidden;*/
}
.radio-check-switch .radio-switch-state .icon-on,
.radio-check-switch .radio-switch-state .icon-off{
    display: inline-block;
    text-align:center;
    position: absolute;
    width:100%;
        top:0;
}
.radio-check-switch .radio-switch-state .icon-on:after,
.radio-check-switch .radio-switch-state .icon-off:after{
    font-family:"FontAwesome";
    width:100%;
    display: block;
    line-height:50px;
    position: absolute;
    transition:all .5s ease;
}
.radio-check-switch .radio-switch-state .icon-on:after{
    content: "\f00c";
    margin-left:100;
    left:100%;
}

.radio-check-switch .radio-switch-state:hover{
    background-color:#FFEAC1;
    cursor:pointer;
}

.radio-check-switch input[type="radio"]:checked + .radio-switch-state .icon-on:after{
    content: "\f00c";
    margin-left:100;
    left:0;
    font-size:2em;
    color:#F90;
    opacity:0.4;

}

JSFIDDLE HERE



Solution :

You can create an after pseudo-element and then give it a background image

.form-item{
	display:inline-block;
}
.radio-check-switch{
	margin-bottom:10px;
}
.radio-check-switch input[type="radio"]{
	display: none;
}
.radio-check-switch .radio-switch-state{
    position:relative;
	background-color:#FFF;
	display: inline-block;
	border-radius:3px;
	color:#fff;
	transition:all .5s ease;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	width:120px;
	height:70px;
	position: relative;
	overflow:hidden;
	vertical-align:middle;
	/*overflow:hidden;*/
}

.radio-switch-state:after{
    position:absolute;
    content:"";
    width:100%;
    height:100%;
    top:0;
    left:0;
    background-image:url('http://lorempixel.com/output/food-q-c-400-400-10.jpg');
    z-index:1
}
.radio-check-switch .radio-switch-state .icon-on,
.radio-check-switch .radio-switch-state .icon-off{
	display: inline-block;
	text-align:center;
	position: absolute;
	width:100%;
	top:0;
}
.radio-check-switch input[type="radio"]:checked + .radio-switch-state:after{
    opacity:.5;
}

.radio-check-switch .radio-switch-state .icon-on:after,
.radio-check-switch .radio-switch-state .icon-off:after{
	font-family:"FontAwesome";
	width:100%;
	display: block;
	line-height:50px;
	position: absolute;
	transition:all .5s ease;
}
.radio-check-switch .radio-switch-state .icon-on:after{
	content: "\f00c";
	margin-left:100;
	left:100%;
    z-index:2;
}
				
.radio-check-switch .radio-switch-state:hover{
	background-color:#FFEAC1;
	cursor:pointer;
}
			
.radio-check-switch input[type="radio"]:checked + .radio-switch-state .icon-on:after{
	content: "\f00c";
	margin-left:100;
	left:0;
	font-size:2em;
	color:#F90;
	opacity:0.4;
					
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="radio-check-switch">	
										
	<div class="form-item">
		<label for="farm_type_agri">
			<input type="radio" name="farm_type" id="farm_type_agri" value="One"/>
			<div class="radio-switch-state" >
				<span class="icon-on"></span>
			</div>
            <div class="radio_lbl">One</div>
		</label>
	</div>
	
    <div class="form-item">
		<label for="farm_type_fore">
			<input type="radio" name="farm_type" id="farm_type_fore" value="Two"/>
			<div class="radio-switch-state" >
				<span class="icon-on"></span>
			</div>
            <div class="radio_lbl">Two</div>
		</label>
	</div>
	
    <div class="form-item">
		<label for="farm_type_grou" >
			<input type="radio" name="farm_type" id="farm_type_grou" value="Three"/>
			<div class="radio-switch-state" >
				<span class="icon-on"></span>
			</div>
        	<div class="radio_lbl">Three</div>
		</label>
	</div>
                    
                
</div>


    CSS Howto..

    How to animate an unknown number of items in sequence using css animations?

    How to get a reference to id=“xxx.yyy” in CSS?

    How can i put random values to css properties using JQuery?

    how to design a search panel like in mashable with css only

    How to animate all except one feature with CSS

    How to re-use .less and generated CSS across projects?

    How to change a vertical css menu to a horizontal one

    Show Loading gif on hover

    How to align/move Vaadin buttons

    How to make LESS combine CSS rules with a comma

    How to count total number of divs with in a div using CSS

    How to save(download) HTML page with all images, css etc in Android?

    How can I use CSS borders to visually group my sections?

    How to resize QR code?

    How to attach an element on the dynamically created div

    How to program an
      image gallery, where the hover effect impacts more than 1 element? [closed]

    How i can display the output of a rss feed in HTML format in a TWebBrowser?

    How to edit and see live CSS effect in IE8 like we see in Firefox > Web developer toolbar > Edit CSS function?

    Jquery: how to get menu to expand towards the right instead of the left

    How to locate element on a map by xpath or css selector

    How to replace css using jquery after user agent detection

    How do I overwrite certain conditions when you have two CSS files?

    How to fix the Wordpress (Twenty Eleven) CSS Menu Alignment?

    How add symbol in CSS for element?

    How to assign css for prettify(syntax highlighter)

    How to make text disappear when HTML5 Video has finished loading?

    How to position absolute in scrollable area? (Css)

    How to change the mouse pointer?

    How to get odd/even coloring for IE and Firefox using CSS alone?

    How do you control CSS styles from within the CMS interface in Zotonic?