Где найти такой эффект css?

Question

[sergey]

Собственно интересует такой эффект: при наведении (hover) на карточку товара появляется другой блок с эффектом раскрытия, проблемы с появлением через opacity: 1 нет, проблема есть как сделать появление с раскрытием (как я это понимаю и вижу: блок с 0 вырастает до своих размеров)

Comments

[Ivan Bogachev]

А что такое "эффект раскрытия"?

[sergey]

это слова ТЗ: но я понимаю это как с нуля блок вырастает до нужного размера наверное, хотя и могу ошибаться

[Ankhena]

Увеличивать высоту/ширину?

[sergey]

Ankhena W: думаю да, ибо других вариантов не вижу

[Ankhena]

Sagan: Цель - сделать всеми возможными вариантами?

[sergey]

Ankhena W: да чтобы было красиво, там карточка, при hovere появляется как бы информация об этой карточке с возможностью редактировать, я сделал появление через увеличение высоты, но пока что глаз не радует:)

Answer 1

[Сергей Горячев]

.block {
    display: block;
    height: 0;
}
.block:hover {
    height: auto;
}

Comments

[Negwereth]

Нет.

Answer 2

[Negwereth]

В сторону transform посмотри.

Comments

[sergey]

как раз это и пытаюсь сделать

[Сергей Горячев]

С хрена тут трансформ?

[Negwereth]

Сергей Горячев: scale, например. Или тем же translate смещать в контейнере. Высоту в лоб анимировать - это уже дурной тон.

[Сергей Горячев]

Negwereth: Транслейт согласен, но вот со скейлом и трансформом ты явно перестарался.

[Negwereth]

Сергей Горячев: особенно если вспомнить, что transform это свойство, а translate - его значение.
А так да, перестарался.

[Сергей Горячев]

Negwereth: Тьфу. Я про transition подумал.

[Сергей Горячев]

Negwereth: Возможно, я чего-то не понял из вопроса автора.
Но мне кажется, ему нужно было что-то вроде такого https://jsfiddle.net/fwm69j73/
Каким образом это переписать на transform? Вот ума пока не приложу, честно.
И зачем он тут, тоже не совсем уловил.

[sergey]

Сергей Горячев: нет там иная задумка была, при наведении на один блок, появляется другой, так вот его способ появления я реализовал через opacity: 1 и transition: 0.5s и думаю более чем достаточно

[Сергей Горячев]

Sagan: Ну, у меня тоже самое. При наведении на item появляется descr.

[Сергей Горячев]

Sagan: Вообще, гадать тяжело, когда нет макета или кода :)))

[sergey]

код я выкладывал

.offers__card {
      display: inline-block;
      vertical-align: top;
      width: 420px;
      height: auto;
      min-height: 193px;
      max-height: 193px;
      border-radius: 5px;
      border: 1px solid rgb(235, 235, 235);
      background-color: rgb(255, 255, 255);
      margin: 10px;
      position: relative;
      padding: 28px 24px;
      cursor: pointer;
}
.popup{
      opacity: 0;
      visibility: hidden;
      height: 290px;
      width: 544px;
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
      border-radius: 5px;
      background-color: $stack-color;
      overflow: hidden;
}
.offers__card:hover .popup{
      opacity: 1;
      visibility: visible;
      position:absolute;
      top:-30px;
      left: -10px;
      z-index: 245;
      @include transition(all 0.5s);
    }

Answer 3

[Саша]

Sagan
появляющийся блок имеет фиксированный контент/высоту?
прикрепите скриншот макета блока который реализуете

Comments

[sergey]

.offers__card {
      display: inline-block;
      vertical-align: top;
      width: 420px;
      height: auto;
      min-height: 193px;
      max-height: 193px;
      border-radius: 5px;
      border: 1px solid rgb(235, 235, 235);
      background-color: rgb(255, 255, 255);
      margin: 10px;
      position: relative;
      padding: 28px 24px;
      cursor: pointer;
}
.popup{
      opacity: 0;
      visibility: hidden;
      height: 290px;
      width: 544px;
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
      border-radius: 5px;
      background-color: $stack-color;
      overflow: hidden;
}
.offers__card:hover .popup{
      opacity: 1;
      visibility: visible;
      position:absolute;
      top:-30px;
      left: -10px;
      z-index: 245;
      @include transition(all 0.5s);
    }

картинки под рукой сейчас нет

[Саша]

Sagan:
пробуйте так

.popup{
	opacity: 0;
	visibility: hidden;
	height: 290px;
	width: 544px;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
	border-radius: 5px;
	background-color: $stack-color;
	overflow: hidden;
	position:absolute;
	top:-30px;
	left: -10px;
	z-index: 245;
	@include transition(all 0.5s);
	transform:translateY(-100%);
	//transform:translateY(100%);//или это правило вместо верхнего
}
.offers__card:hover .popup{
	opacity: 1;
	visibility: visible;
	transform:translateY(0);
}