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

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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