Как лучше сверстать элемент

187

05 декабря 2018, 21:20

друзья! Недавно появилась задачка. Нужно сверстать вот такой блок как на картинке. Это радиокнопки. Слева не выбрана, справа выбрана. Как можно сверстать так, чтобы одну сторона изображения выезжала за бордер, а другая нет (скрывалась)? Может кто сталкивался с подобными задачами.

Answer 1

Пример 1

input{ 
    display: none; 
} 
input + .image{ 
    display: block; 
    background-image: url(https://i.stack.imgur.com/iqwIV.jpg); 
    background-position: 0 0; 
    background-repeat: no-repeat; 
    height: 205px; 
    width: 264px; 
    transition: background-position .3s ease; 
} 
input:checked + .image{ 
    background-position: -264px 0; 
    border: 1px solid #f00; 
}

<label> 
    <input type="checkbox" name="c"> 
    <span class="image"></span> 
</label> 
<label> 
    <input type="checkbox" name="c"> 
    <span class="image"></span> 
</label>

Пример 2

label { 
  padding: 50px; 
  display: inline-block; 
} 
 
.block { 
  position: relative; 
  display: block; 
  width: 150px; 
  height: 150px; 
} 
 
.block__not-checked { 
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
  background: #999; 
} 
 
.block__checked { 
  position: absolute; 
  top: 0; 
  left: 0; 
  opacity: 0; 
  transition: opacity .3s ease; 
} 
 
input:checked+.block .block__not-checked { 
  opacity: 0; 
} 
 
input:checked+.block .block__checked { 
  opacity: 1; 
} 
 
.block__icon { 
  position: absolute; 
  bottom: 15px; 
  right: -15px; 
  width: 50px; 
  height: 50px; 
  line-height: 50px; 
  color: #fff; 
  text-align: center; 
  background: #01C92B; 
  border-radius: 50%; 
  z-index: 2; 
} 
 
.block__circle { 
  position: relative; 
  display: block; 
  width: 150px; 
  height: 150px; 
  border: 4px solid #01C92B; 
  border-radius: 50%; 
  overflow: hidden; 
} 
 
.block__box, 
.block__circle-box { 
  width: 100px; 
  height: 80px; 
  background: #ccc; 
  position: absolute; 
  top: 25px; 
  right: -10px; 
  box-shadow: 0 2px 7px rgba(0, 0, 0, .25); 
} 
 
.block__box { 
  right: auto; 
  left: -20px; 
  top: 45px; 
  background: #ddd; 
  z-index: 2; 
}

<label> 
    <input type="checkbox" name="c"> 
    <span class="block"> 
        <span class="block__not-checked"></span> 
        <span class="block__checked">     
            <span class="block__icon">icon</span> 
            <span class="block__box"></span> 
            <span class="block__circle">  
                <span class="block__circle-box"></span>  
            </span> 
        </span> 
    </span>     
</label>