Как плавно изменить размер картинки в блоке?

216

08 июля 2018, 23:10

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

Изначально на миниатюре показывается только уголок картинки. Нужно чтобы при наведении блок плавно увеличивался и показывался весь размер картинки. Пробовал как-то делать через 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>

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

Answer 1

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

.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>