How to create toggle switch with an image in html css?

Issue

How to do a toggle switch with images as in example below? Is there any clear way to achieve this?

Example

Thanks for any help

Solution

ok, I’ve created this quick toggle, just change the images.

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  width: 100%;
}

.container {
  height: 100%;
  width: 100%;
  display: grid;
  place-items: center;
}
#checkbox {
  display: none;
}
.toggle {
  height: 80px;
  width: 200px;
  border-radius: 9999px;
  background-image: url(https://images.unsplash.com/photo-1469474968028-56623f02e42e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=874&q=80);
  background-size: cover;
  position: relative;
  cursor: pointer;
  transition: all 0.5s ease-in-out;
  box-shadow: 6px 6px 10px #0000003d;
}

#checkbox:checked + .toggle {
  background-image: url(https://images.unsplash.com/photo-1475924156734-496f6cac6ec1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80);
  background-size: cover;
}

.toggle::before {
  content: "";
  height: 80px;
  width: 80px;
  position: absolute;
  left: 0;
  border-radius: 50%;
  background-color: #f4f4f4;
  transition: all 0.5s ease-in-out;
}

#checkbox:checked + .toggle::before {
  position: absolute;
  left: calc(100% - 80px);
}
<body>
 <div class="container">
   <div class="daynight">
     <label  for="checkbox">
      <input type="checkbox" name="" id="checkbox">
       <div class="toggle">
         <div class="star1"></div>
         <div class="star2"></div>
       </div>
     </label>
   </div>
 </div>
</body>

Answered By – Steve Walson

Answer Checked By – Mildred Charles (AngularFixing Admin)

Leave a Reply

Your email address will not be published.