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

Ваш ответ

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

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