1

День добрый. Нужна помощь в деле по созданию увеличивающегося при клике, желательно без js, но, наверное, без него создать такую тему нельзя вовсе.

Делал через input, но столкнулся с проблемой, что текст и картинку туда запихнуть я навряд ли смогу:

.block {
  width: 150px;
  height: 150px;
  background: #f30;
  display: block;
  opacity: 1;
  transform: scale(1, 1);
  transition-duration: 50ms;
  border: 0;
  padding: 0;
}

.block:focus {
  transform: scale(1.2, 1.2);
  transition-duration: 50ms;
  outline: none;
}
<div style="position:relative; left:210px; top:100px;">
  <input type="button" class="block">
</div>

Подскажите, как это можно реализовать по другому да еще и так, чтобы туда можно было вместить текст и он появлялся лишь в тот момент, когда блок увеличен?

3 ответа 3

1

Все проще, добавьте атрибут tabindex в div и он сможет принимать фокус

div.block {
  width: 100px;
  height: 100px;
  background: #f30;
  transition-duration: 250ms;
  margin:30px;
}

div.block:focus {
  transform: scale(1.2, 1.2);
  outline: none;
}
<div class="block" tabindex="1"></div>

или воспользуйтесь псевдо классом :active если нужно увеличение при нажатии и обратное уменьшение при отпускании

div.block {
  width: 100px;
  height: 100px;
  background: #f30;
  transition-duration: 250ms;
  margin:30px;
}

div.block:active {
  transform: scale(1.2, 1.2);
  outline: none;
}
<div class="block"></div>

6
  • Как туда удобно можно запихнуть текст? Я изначально поставил так, что у цвета текста прозрачность нулевая, а уже опосля фокуса 1. Но текст довольно объемный и при нулевой прозрачности, пускай его не видно, но с ним можно взаимодействовать и если на него нажать, то весь блок открывается. Я опять что-то делаю не так... 7 мая 2019 в 17:43
  • @НикитаБорискевич вы хотите поместить в блок какой-то текст чтобы он.. дальше не понял =) 7 мая 2019 в 17:49
  • Вот песочница, нажмите на "пустоту" под блоком. jsfiddle.net/Fyuuri/zqmk5swj/4 7 мая 2019 в 17:56
  • @НикитаБорискевич Вам не нравится что текст появляется на долю секунды? 7 мая 2019 в 18:10
  • Что под блоком (там где пустое пространство) текст продолжается и при нажатии на него блок показывается. 7 мая 2019 в 18:11
1

Ну в самом простом случае, это может выглядеть так:

(добавить .check {display: none}. Здесь он оставлен, чтобы было видно, что происходит)

.text {display: none;}
.small {width: 140px;}

.check:checked ~ .text {display: block;}
.check:checked ~ .small {width: 280px;}
<label>
  <input class="check" type="checkbox">
  <p class="text">Cheburashikus Majoris</p>
  <img class="small" src="https://i.gyazo.com/34a5722e08245a0904418ea46a041457.png">
</label>

Решение может меняться в зависимости от необходимости добавить еще чего-то сверху)

1

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

body {
  font-family: "Roboto", sans-serif;
}

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.block {
  position: relative;
}

.block__input {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0;
}

.block__input:checked + .block__item {
  transform: scale(1.2, 1.2);
}

.block__item {
  width: 180px;
  height: 180px;
  background: pink;
  transform: scale(1, 1);
}

.block__text {
  pointer-events: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
<div class="container">
  <div class="block">
    <input type="checkbox" class="block__input">
    <div class="block__item">
      <div class="block__text">Click on me</div>
    </div>
  </div>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.