0

Продолжаю учиться верстке и хочу сделать такую штуку: введите сюда описание изображения

Изначально на миниатюре показывается только уголок картинки. Нужно чтобы при наведении блок плавно увеличивался и показывался весь размер картинки. Пробовал как-то делать через background-position, но в моем случае картинка должна лежать в Html, поэтому такой вариант не подходит.

Сейчас моя демка выглядит вот так. https://codepen.io/anon/pen/QxEYxe

.product {
  height: 300px;
  background: orange;
  width: 100%;
  text-align: center;
  transition: 1s all;
  overflow: hidden;
}

.img-hide {
  opacity: 0;
  transition: 1s all;
}
.text-hide {
  opacity: 0;
  transition: 1s all;
  font-size: 40px;
  color: red;
}
.product:hover {
  transform: scale(1.2);
}
.product:hover .img-hide {
  opacity: 1;
}

.product:hover .text-hide {
  opacity: 1;
}
<div class="container">
  <div class="row">
    <div class="col-md-3">
      <div class="product">
        <div class="text">
          text text text
        </div>

        <div class="img-hide">
          <img src="http://via.placeholder.com/350x150" alt="">
        </div>
         <div class="text-hide">
          this is text hide
        </div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="product">
        <div class="text">
          text text text
        </div>
        <div class="img-hide">
          <img src="http://via.placeholder.com/350x150" alt="">
        </div>
        <div class="text-hide">
          this is text hide
        </div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="product">
        <div class="text">
          text text text
        </div>
        <div class="text-hide">
          this is text hide
        </div>
        <div class="img-hide">
          <img src="http://via.placeholder.com/350x150" alt="">
        </div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="product">
        <div class="text">
          text text text
        </div>
        <div class="text-hide">
          this is text hide
        </div>
        <div class="img-hide">
          <img src="http://via.placeholder.com/350x150" alt="">
        </div>
      </div>
    </div>
  </div>
</div>

Подскажите, как реализовать такое?

1 ответ 1

0

Если я правильно понял задачу

.product {
  width: 500px;
}
.product img {
  border: 0;
  max-width: 100%;
  max-height: 150px;
  object-fit: cover;
  transition: width 1s ease;
}
.product img {
  width: 30px;
  height: auto;
}
.product:hover img {
  width: 100%;
}
<link href="http://fiddle.jshell.net/css/normalize.css" rel="stylesheet"/>
<div class="product">
  <img src="https://via.placeholder.com/350x150" alt="">
  <p>text text text</p>
</div>

2
  • Но тогда здесь увеличение происходит, слева направо. мне же нужно, чтобы оно равномерно увеличивалось с двух сторон Commented 10 июн. 2018 в 7:31
  • @ДмитрийКачуринец я дал направление, способ, если хотите. Центрируйте картинку. Не знаю, по какой религии вы отказались от background-image, но это самое лучшее решение было бы. И при этом, картинка так же бы лежала в html. Выставили бы для неё display: none Commented 11 июн. 2018 в 17:02

Ваш ответ

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

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