CSS3 - label and checkbox

Question

HTML

 <div class="select">
      <div>
        <label for="kitty" class="kitty-label kitty-label-1 l-center">
        </label>
        <input type="checkbox" name="cats" value="1">
        <label>Kitty One</label>
      </div>
      <div class="cly-pam" style="width:50%; float: left">
        <label for="kitty" class="kitty-label kitty-label-2 l-center">
        </label>
        <input type="checkbox" name="cats" value="2">
        <label>Kitty Two</label>
      </div>
    </div>
    <div>

css

label{
  cursor: pointer;
}

    .kitty-label{
      position: relative;
      width: 100%;
      &:hover,
      &:focus,
      &:active{
        border-radius: 6px solid #fff;
      }
    }
    .kitty-label-1{
          display: inline-block;
          background: url(../img/kitty1.png) no-repeat 0 0;
          height: 142px;
          width: 142px;
    }

    .kitty-label-2{
          display: inline-block;
          background: url(../img/kitty2.png) no-repeat 0 0;
          height: 144px;
          width: 144px;
    }

    .select input[type="checkbox"]{
      display: none;
      &:checked + label:before{
        background: url(../img/tick.png) no-repeat;
      }
    }

The labels would have background image but the issue is that when focus, active or hover, the border-radius does not appear behind the images. Also the kitty images do not have border-radius edges. Wonder if should have image in circle shape or css3 can do that?

Also checkbox seems not to show the tick or anything. Tried to click on label (as in kitty image), tick doesn't appear?

Not sure where I might go wrong. Help will be very much appreciated.

Updated

<div>
    <input type="radio" name="type" value="designer" id="designer">
    <label for="designer" id="designer" class="inline-block testsign" style="background: url(../img/face.png) no-repeat center;">
    </label></div>

CSS

.testsign{
  width: 170px;
  height: 170px;
  border-radius: 100%;
  &:hover,
  &:focus,
  &:active{
     border: 15px solid #f3f3f3;

  }
}

// [type="radio"]:not(:checked),
// [type="radio"]:checked {
//   visibility: hidden;

input[type="radio"]:checked + label:after {
    content:"";
    display: block;
    position: absolute;
    height: 60px;
    width: 60px;
    background: #f0f1f1 url(../img/tick.png) no-repeat center center;
    border-radius: 100%;
    border: 10px solid #fff;
}

Attempted the example from @misterMan

Couldn't get the label:after to be positioned at the right bottom - tried top and left to position the tick circle, but the problem is that when checked, it will appear in the position which followed top and left. So if check extra element or image, tick circle will appear in the same place which is not right. Removed the top and left. There is no way to have tick circle positioned in right bottom appearing in each label whenever radio is checked?

Also another problem is that when border radius on the label is hovered on background image, and if checked radio, the tick circle (label:after) will appear, the tick circle will be "jumpy" whenever hovered on label. How to stop the jump? I tried to add absolute center and position relative but the labels will be out of the container.

Help or insight will be appreciated.

Answer 1

I love this type of stuff so I made this for you, if you are still looking for a solution. I have added the images with <img> as they are not decoration, they are primary content :)

It's nice and simple, and I think does what you want. Let me know!

Updated

Have an updated fiddle!

HTML

<form>
    <input type="checkbox" id="pic1" />
    <label for="pic1">
        <img src="http://www.placehold.it/200" />
    </label>

    <input type="checkbox" id="pic2" />
    <label for="pic2">
        <img src="http://www.placehold.it/200" />
    </label>
</form>

CSS

body {
    margin: 0;
}
input[type=checkbox] {
    display: none;
}
label {
    position: relative;
    display: block;
    width: 200px;
    cursor: pointer;
    float: left;
    margin: 10px 0 10px 10px;
}
input[type=checkbox] + label img:hover {
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
}
input[type=checkbox]:checked + label img {
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
}
input[type=checkbox]:checked + label img:hover {
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
}
input[type=checkbox]:checked + label:after {
    content:"";
    display: block;
    position: absolute;
    bottom: 10px;
    right: 10px;
    height: 50px;
    width: 50px;
    background: url(http://i.imgur.com/i7379jf.png) no-repeat right bottom;
    background-size: 50px;
}
input[type=checkbox]:checked + label:hover:after {


}