БЛОГ НА HUSL


подскажите как сделать чтоб при выборе формы, другой объект уменьшался в тексте, заголовок и основной текст разного размера чтоб был

Автор вопроса: Abs Will

пример

    <div class="slider">
            <input type="radio" name="testimonial" id="t-1" />
            <input type="radio" name="testimonial" id="t-2" checked />
            <input type="radio" name="testimonial" id="t-3" />
     
    <div class="testimonials">
              <label class="item" for="t-1">
                <div class="titleMin">Александра Дмитриева</div>
                <div class="text__itemMin">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                  Consectetur nulla viverra egestas tellus. Cursus scelerisque
                  phasellus netus proin. Etiam mauris maecenas facilisis faucibus
                  mauris eleifend purus. Purus dictum vulputate elementum mauris
                  amet.<br /><br />
                  Hendrerit sit cras ullamcorper morbi quam vitae ante nibh. Ornare
                  ipsum mi nisl augue placerat lacus. Dolor ipsum fermentum viverra`код`
                  bibendum faucibus urna. Arcu, ut sed tellus lacus quisque diam.
                  Semper sed aenean in etiam mus praesent diam semper in. Pretium id
                  a amet, massa ligula nibh faucibus ornare. Ut aenean rhoncus sed
                  nam ut diam dapibus. Risus nibh faucibus eu vestibulum tempor,
                  quis ultrices mauris. Porta enim, donec odio sagittis, eget velit
                  at.
                </div>
              </label>
              <label class="item__2" for="t-2">
                <div class="titleMax">Кира Иванова</div>
                <div class="text__itemMax">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Netus
                  diam risus morbi nulla dictum. Urna mi orci gravida placerat amet,
                  eu, aliquet facilisis aliquet. Dolor praesent nam ornare fringilla
                  enim nibh donec sit imperdiet. Amet, diam duis eu sit et. Volutpat
                  vestibulum a lectus sed blandit.<br /><br />
                  Venenatis urna mattis eu enim molestie iaculis et aliquet. Velit
                  in pellentesque vestibulum phasellus orci. Fermentum sed phasellus
                  aliquam nulla non aenean. Quisque id nunc, mauris potenti a massa.
                  Fermentum at elit, convallis leo dolor aliquet id elementum.
                  Ullamcorper sociis et cum bibendum in egestas. Diam, urna, sed
                  tempus mollis aliquam elit. Facilisi nam nulla pulvinar mauris vel
                  lacinia venenatis.
                </div>
              </label>
              <label class="item__3" for="t-3">
                <div class="titleMin">Яна Жернова</div>
                <div class="text__itemMin">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lacinia
                  eget mattis orci aliquam enim tincidunt gravida aliquet ut. Ipsum
                  vulputate morbi felis, lobortis tincidunt. Pretium dictum odio
                  feugiat auctor diam sit viverra gravida. Lobortis arcu rhoncus, mi
                  mi vitae feugiat amet, vitae ac. Cursus diam turpis iaculis nisi
                  sit. Vel blandit et sit elit vestibulum feugiat proin tempor,
                  justo. Diam commodo, pellentesque at porttitor tristique faucibus
                  faucibus morbi. Bibendum pretium lacus, tempus viverra vitae odio
                  nunc eget.<br /><br />
                  Tortor fermentum orci neque sed. Mauris faucibus diam lorem erat
                  ullamcorper donec egestas neque. Maecenas malesuada mauris magnis
                  sed id. Luctus vitae justo, in consectetur arcu. Nulla feugiat at
                  eu in aliquet. Diam nunc, libero mauris tellus suspendisse morbi
                  sagittis semper.
                </div>
              </label>
            </div>
            <div class="dots">
              <label for="t-1"></label>
              <label for="t-2"></label>
              <label for="t-3"></label>
            </div>
          </div>
        </div>

    .slider {
      width: 100%;
    }
    .slider input {
      display: none;
    }
    .testimonials {
      display: flex;
      justify-content: space-evenly;
    
      min-height: 350px;
      margin-top: 100px;
    
      overflow: hidden;
    }
    .testimonials .item {
      box-sizing: border-box;
      padding: 30px;
      height: 276px;
      width: 500px;
      text-align: left;
      transition: transform 0.4s;
      background-color: #018abe;
      opacity: 0.3;
    
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
      user-select: none;
      cursor: pointer;
    
      border-radius: 10px;
      color: #fff;
    }
    .testimonials .item__2 {
      box-sizing: border-box;
      background-color: #018abe;
      padding: 30px;
      height: 350px;
      width: 636px;
      text-align: left;
      transition: transform 0.4s;
    
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
      user-select: none;
      cursor: pointer;
      border-radius: 10px;
      color: #fff;
    }
    .testimonials .item__3 {
      box-sizing: border-box;
      padding: 30px;
      height: 276px;
      width: 500px;
      text-align: left;
      transition: transform 0.4s;
      background-color: #018abe;
      opacity: 0.3;
    
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
      user-select: none;
      cursor: pointer;
    
      border-radius: 10px;
      color: #fff;
    }
    .titleMin {
      font-size: 16px;
    }
    .text__itemMin {
      font-size: 10px;
      line-height: 14px;
      margin-top: 15px;
    }
    .titleMax {
      font-size: 20px;
    }
    .text__itemMax {
      font-size: 14px;
      line-height: 20px;
      margin-top: 20px;
    }
    .dots {
      display: flex;
      justify-content: center;
      align-items: center;
    
      margin-top: 76px;
    }
    .dots label {
      display: block;
      height: 7px;
      width: 7px;
      border-radius: 25%;
      cursor: pointer;
      background-color: #413b52;
      margin: 7px;
      transition: transform 0.2s, color 0.2s;
    }
    
    
    }
    /* First */
    #t-1:checked ~ .dots label[for="t-1"] {
      transform: scale(2);
      background-color: #fff;
    }
    #t-1:checked ~ .dots label[for="t-2"] {
      transform: scale(1.5);
    }
    
    #t-1:checked ~ .testimonials label[for="t-1"] {
      z-index: 4;
      background-color: #018abe;
      padding: 30px;
      height: 350px;
      width: 636px;
      text-align: left;
      transition: transform 0.5s;
    
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
      user-select: none;
      cursor: pointer;
      opacity: unset;
      border-radius: 10px;
      color: #fff;
    }
    #t-1:checked ~ .testimonials label[for="t-2"] {
      z-index: 4;
      
      padding: 30px;
      height: 276px;
      width: 500px;
      text-align: left;
      transition: transform 0.5s;
      background-color: #018abe;
      opacity: 0.3;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
      user-select: none;
      cursor: pointer;
    
      border-radius: 10px;
      color: #fff;
      align-self: center;
    }
    
    #t-1:checked ~ .testimonials label[for="t-2"] {
      transform: translateX(50px);
      z-index: 3;
    }
    #t-1:checked ~ .titleMin label[for="t-2"] {
      transform: translateX(50px);
      z-index: 3;
      font-size: 16px;
    }
    #t-1:checked ~ .testimonials label[for="t-3"] {
      transform: translateX(100px);
      z-index: 2;
      align-self: center;
    }
    
    /* Second */
    #t-2:checked ~ .dots label[for="t-1"] {
      transform: scale(1.5);
    }
    #t-2:checked ~ .dots label[for="t-2"] {
      transform: scale(2);
      background-color: #fff;
    }
    #t-2:checked ~ .dots label[for="t-3"] {
      transform: scale(1.5);
    }
    #t-2:checked ~ .testimonials label[for="t-1"] {
      transform: translateX(0px) translateZ(-100px);
      align-self: center;
    }
    #t-2:checked ~ .testimonials label[for="t-2"] {
      z-index: 3;
    }
    #t-2:checked ~ .testimonials label[for="t-3"] {
      transform: translateX(0px);
      align-self: center;
      z-index: 2;
    }
    
    /* Third */
    #t-3:checked ~ .dots label[for="t-2"] {
      transform: scale(1.5);
    }
    #t-3:checked ~ .dots label[for="t-3"] {
      transform: scale(2);
      background-color: #fff;
    }
    #t-3:checked ~ .testimonials label[for="t-1"] {
      transform: translateX(-100px);
      align-self: center;
    }
    
    #t-3:checked ~ .testimonials label[for="t-2"] {
      transform: translateX(-50px);
    
      padding: 30px;
      height: 276px;
      width: 500px;
      text-align: left;
      transition: transform 0.5s;
      opacity: 0.3;
      align-self: center;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
      user-select: none;
      cursor: pointer;
      border-radius: 10px;
      color: #fff;
    }
    
    #t-3:checked ~ .testimonials label[for="t-3"] {
      z-index: 3;
      background-color: #018abe;
      padding: 30px;
      height: 350px;
      width: 636px;
      text-align: left;
      transition: transform 0.5s;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
      user-select: none;
      cursor: pointer;
      border-radius: 10px;
      color: #fff;
      opacity: unset;
    }

Источник

Ответы (1 шт):

Автор решения: De.Minov

Я бы предложил не парится и использовать для этого готовый слайдер.

Рекомендую Swiper:

const swiper = new Swiper('.slider', {
  slidesPerView: 3,
  spaceBetween: 10,
  loop: true,
  centeredSlides: true,
  centeredSlidesBounds: true,
  pagination: {
    el: '.swiper-pagination',
  },
});
.slider {
  width: 100%;
  max-width: 600px;
}

.slider__slide {
  display: block;
  width: 100%;
  height: 200px;
  background-color: #ccc;
  
  line-height: 200px;
  text-align: center;
}

.slider .swiper-slide {
  transition: .3s ease;
  transition-property: opacity, transform;
}

.slider .swiper-slide:not(.swiper-slide-active) {
  opacity: .65;
  transform: scale(.9);
}
<link href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>

<div class="swiper slider">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <div class="slider__slide">Slide 1</div>
    </div>
    <div class="swiper-slide">
      <div class="slider__slide">Slide 2</div>
    </div>
    <div class="swiper-slide">
      <div class="slider__slide">Slide 3</div>
    </div>
    <div class="swiper-slide">
      <div class="slider__slide">Slide 4</div>
    </div>
    <div class="swiper-slide">
      <div class="slider__slide">Slide 5</div>
    </div>
  </div>
  <div class="swiper-pagination"></div>
</div>

Похожий вариант на инпутах:

.cards {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

.cards > input {
  display: none;
}

.cards > label {
  display: block;
  width: 100%;
  transition: .3s ease;
  transition-property: transform, opacity;
  cursor: pointer;
}

.cards > label:not(:last-child) {
  margin-right: 10px;
}

.cards > input:not(:checked) + label {
  transform: scale(.9);
  opacity: .65;
}

.cards .card {
  display: block;
  width: 100%;
  height: 200px;
  background-color: #ccc;
  
  line-height: 200px;
  text-align: center;
}
<div class="cards">
  <input id="select-1" type="radio" name="radio-group">
  <label for="select-1">
    <div class="card">Card 1</div>
  </label>
  
  <input id="select-2" type="radio" name="radio-group" checked>
  <label for="select-2">
    <div class="card">Card 2</div>
  </label>
  
  <input id="select-3" type="radio" name="radio-group">
  <label for="select-3">
    <div class="card">Card 3</div>
  </label>
</div>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.