Can I use input checked to initiate CSS which highlight an image? - php

Question

I have a safety form that I'd like to highlight part of an image when an input is checked. I was able to make part of the image highlight with a hover but I can't seem to do it with CSS using Checked. Any ideas what I'm missing? If I switch the css tropic:checked to hover then it will highlight my selection. The problem is I can't get the same functionality via checked. Is it possible?
Thanks!
<style>
.check-with-label:checked ~ .product-add-image-preview {
position: absolute;
content: '';
background: rgba(0,0,0,0.5);
width: 100px;
height: 100px;
pointer-events: none;
}
.circle-with-label:checked ~ .add-head {
width: 200px;
height: 200px;
border: 1px solid #aaa; /*To show the boundaries of the element*/
}
.circle-with-label:checked ~ .add-head {
position: absolute;
content: '';
background: rgba(0,0,0,0.5);
width: 100px;
height: 100px;
pointer-events: none;
}
.trPic{
width:320px;
height:700px;
background: url(<?php echo base_url('uploads/front_body.png'); ?>) no-repeat;
border:5px solid #000000; }
.trPic .head{
position:relative;
top:10px;
left:100px;
width:60px;
height:30px;
background:#FF2400;
opacity:0; }
.trPic:checked .head {
opacity:0.7; }
</style>
<div align="center">
<?php if( !function_exists('form_open')): ?>
<?php $this->load->helper('form'); ?>
<?php endif;?>
<?php echo form_open(current_url(),array('id'=>'form')); ?>
<?php echo form_label('Head','head'); ?>
<input type="checkbox" name ="head" id="head" class="head" value="1"/>
<?php echo form_label('Face','face'); ?>
<input type="checkbox" name ="face" id="check_1" class="check-with-label" value="1" />
<?php echo form_fieldset_close(); ?>
<br />
<br />
<br />
<br />
<?php echo form_button(array('name'=>'submit','type'=>'submit','value'=>1,'content'=>'Submit')); ?>
</div>
<div class ="trPic">
<div class="head">
</div>
</div>

Answer 1

You could use jQuery and call addClass () adding the class that contains the styling you want on the event where the box gets checked.