Q:

keep css hover effects after selection

I  am working on a rails form where users can select a category using radiobutton. With some css i managed to make some changes to the radiobutton by adding an image and text. I have managed to get an effect on hover. But how can i keep that same hover effect once its selected so that people know the option they selected?      
This is what i come so far
** Here is the code in**  fiddle**
Html
      
        <div style="width:120px; float:left; text-align:center;", class="hvr-shutter-out-horizontal">
          <label for="category1">
            <input type="radio" name="category_type" id="category1" value="1">
            <img src="<%= asset_path('category1.png') %>" style="width: 60px;height: 60px;"/>
            <br/>
            <span>category1</span>
          </label>
        </div>

        <div style="width:120px; float:left; text-align:center;", class="hvr-shutter-out-horizontal">
          <label for="category2">
            <input type="radio" name="category_type" id="category2" value="2">
            <img src="<%= asset_path('category2.png') %>" style="width: 60px;height: 60px;"/>
            <br/>
            <span>category2</span>
          </label>
        </div>

      </fieldset>

css
label > input{ /* HIDE RADIO */
visibility: hidden; /* Makes input not-clickable */
position: absolute; /* Remove input from document flow */
}

/* Shutter Out Horizontal */
.hvr-shutter-out-horizontal {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
position: relative;
background: #e1e1e1;
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.hvr-shutter-out-horizontal:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: #2098d1;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: 50%;
transform-origin: 50%;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.hvr-shutter-out-horizontal:hover, .hvr-shutter-out-horizontal:focus,                       .hvr-shutter-out-horizontal:active {
color: white;
}
.hvr-shutter-out-horizontal:hover:before, 
.hvr-shutter-out-     horizontal:focus:before, 
.hvr-shutter-out-  horizontal:active:before {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}

Thank you for trying to help

A:

I'd suggest using the css pseudo-selector :checked
Here's the fiddle: http://jsfiddle.net/jy2z9nkw/5/
input:checked ~ img ~ br ~ span:before{
    background:#2098d1;
    position:absolute;
    top:0;
    content:'';
    left:0;
    top:0;
    bottom:0;
    display:block;
    width:100%;
    z-index:-1;
}

