Radio Input Image Checkbox 01

<!DOCTYPE html>
<html>
<head>
  <title>RADIO INPUT IMAGE CHECKBOX 01 | Par NGLESSON</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="keyword" content="RADIO INPUT IMAGE CHECKBOX 01 ">
	<meta name="author" content="Mezgani said">
	<meta name="copyright" content="NGLESSON">
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
  <link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
  <div class="container">
    <div class="row mt-5 text-center mx-auto">
    <ul>
    <li><input type="radio" id="cb1" name="inputradio" />
      <label for="cb1"><img src="https://source.unsplash.com/random/" /></label>
    </li>
    <li><input type="radio" id="cb2" name="inputradio" />
      <label for="cb2"><img src="https://source.unsplash.com/random/" /></label>
    </li>
    <li><input type="radio" id="cb4" name="inputradio" />
      <label for="cb4"><img src="https://source.unsplash.com/random/" /></label>
    </li>
  </ul>
    </div>
  </div>
</body>
</html>
ul {
    list-style-type: none;
  }
  
  li {
    display: inline-block;
  }
  
  input[type="radio"][id^="cb"] {
    display: none;
  }
  
  label {
    border: 1px solid #fff;
    padding: 10px;
    border-radius: 50%;
    display: block;
    position: relative;
    margin: 10px;
    cursor: pointer;
  }
  
  label:before {
    background-color: rgba(16, 65, 99, 0.32 );
    text-align:center;
    color: white;
    content: " ";
    display: block;
    border-radius: 50%;
  /*   border: 1px solid grey; */
    position: absolute;
    top:10px;
    left: 10px;
    z-index:1;
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    transition-duration: 0.4s;
    transform: scale(0);
  }
  
  label img {
    height: 100px;
    width: 100px;
    transition-duration: 0.1s;
    transform-origin: 50% 50%;
    border-radius: 50%;
  }
  
  :checked + label {
    border-color: #eee;
  }
  
  :checked + label:before {
    content: "✓";
    transform: scale(1.1);
  }
  
  :checked + label img {
    transform: scale(1.2);
    box-shadow: 0 0 3px #333;
    z-index: -1;
  }

                                    
Timeline style07

Timeline style07

Page 404 exemple 01

Page 404 exemple 01

Menu aside style01 slide out

Menu aside style01 slide out

Input valid invalid HTML CSS

Input valid invalid HTML CSS

Input range slider HTML style05

Input range slider HTML style05

Input file style01

Input file style01

Form login et créer un compte style01

Form login et créer un compte style01

Drag and drop or upload input file

Drag and drop or upload input file

Calculatrice style01

Calculatrice style01

Asidebar Bootstrap4 style01

Asidebar Bootstrap4 style01

Arrows Defense Game

Arrows Defense Game

Ajouter une pagination1

Ajouter une pagination1