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;
  }

                                    
input file récupérer le nom du fichier

input file récupérer le nom du fichier

Timeline style01

Timeline style01

Social Media Icons

Social Media Icons

Input range slider HTML style04

Input range slider HTML style04

Input range slider HTML style03

Input range slider HTML style03

Image hover effects style

Image hover effects style

Image hover 03

Image hover 03

Comment intégrer yamli dans une input

Comment intégrer yamli dans une input

Chercher un mot sur la liste

Chercher un mot sur la liste

ChartJS style01

ChartJS style01

Calculer la some des colones avec jquery

Calculer la some des colones avec jquery

Buttons Styles Inspirations

Buttons Styles Inspirations