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

                                    
Vidéo background en html5 style02

Vidéo background en html5 style02

Titre section avec une anmation style01

Titre section avec une anmation style01

Timeline style01

Timeline style01

SwiperJS style01

SwiperJS style01

Nav Menu style02

Nav Menu style02

Login Bootstrap3

Login Bootstrap3

Image hover style border top

Image hover style border top

Header with background animate 01

Header with background animate 01

Header Aside Footer Admin

Header Aside Footer Admin

Compteur avec b4

Compteur avec b4

Chercher un mot sur la liste

Chercher un mot sur la liste

Changer le style du scroll bar in html

Changer le style du scroll bar in html