CSS объект-положение или подобное свойство для сетки фотографий - PullRequest
Новая
       13

CSS объект-положение или подобное свойство для сетки фотографий

1 голос
/ 04 февраля 2020

Надеюсь получить некоторую информацию. Я проходил некоторые онлайн-курсы по веб-разработке и в настоящее время я играю вокруг добавления изображений на страницу html (сетка изображений 3x3).

Сначала я использовал свойство transform, чтобы я мог масштабировать изображение с переходом .5s к 1,5-кратному размеру после наведения на него с задержкой 0,5 секунды.

Существует проблема с изображениями на левой и правой сторонах как часть их go из экран после масштабирования.

Чтобы исправить это, я сначала попытался position: relative; left: 6%;, но узнал, что позиция - это не то свойство, которое вы можете анимировать, поэтому изображение сразу перемещается, а затем масштабируется через 0,5 секунды.

Моя вторая попытка было с object-position: 90px;, это свойство работает с задержкой, но после масштабирования кажется, что большой фрагмент изображения обрезан.

Я пробовал разные свойства, такие как transform-origin, какие виды работ но он дает глючное ощущение, когда масштабируется, а затем заканчивает движение изображения в сторону, теряя текучесть дает эффект масштабирования и позиционирования жидкости, но у меня есть проблема обрезки.

Вот ссылка на кодовый блок, где у меня есть это упражнение:

https://codepen.io/superavd88/pen/PoqYoRJ

Буду признателен за любые идеи, поскольку я пытался исправить эту проблему последние пару дней безуспешно.

Заранее спасибо.

Ответы [ 2 ]

1 голос
/ 04 февраля 2020

Добро пожаловать в SO!

Вам просто нужно обернуть ваши изображения ind ie div и сделать его переполненным hidden, а также я изменил сетку, используя flex сейчас 

.thumbnail img {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
    width:100%;
}
.thumbnail .img-parent:hover img {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
}

.img-parent{
    overflow:hidden;
    width: 33%;
}
img{
width: 100%}
.thumbnail {
    display: flex;
        flex-wrap: wrap;
}
<div class="thumbnail">
	     <div class="img-parent">
	        <img src="https://www.washingtonpost.com/wp-apps/imrs.php?src=https://arc-anglerfish-washpost-prod-washpost.s3.amazonaws.com/public/HB4AT3D3IMI6TMPTWIZ74WAR54.jpg&w=767" alt="deep house cleaning">
             </div>
	     
	 
    <div class="img-parent">
	        <img src="https://www.washingtonpost.com/wp-apps/imrs.php?src=https://arc-anglerfish-washpost-prod-washpost.s3.amazonaws.com/public/HB4AT3D3IMI6TMPTWIZ74WAR54.jpg&w=767" alt="deep house cleaning">
             </div>
	     
	
    <div class="img-parent">
	        <img src="https://www.washingtonpost.com/wp-apps/imrs.php?src=https://arc-anglerfish-washpost-prod-washpost.s3.amazonaws.com/public/HB4AT3D3IMI6TMPTWIZ74WAR54.jpg&w=767" alt="deep house cleaning">
             </div>
	     
	
    <div class="img-parent">
	        <img src="https://www.washingtonpost.com/wp-apps/imrs.php?src=https://arc-anglerfish-washpost-prod-washpost.s3.amazonaws.com/public/HB4AT3D3IMI6TMPTWIZ74WAR54.jpg&w=767" alt="deep house cleaning">
             </div>
	     
	   </div>

Ссылка на работу scale свойства

0 голосов
/ 04 февраля 2020

изменение CSS стили 

  img   {
    width: 30%;
    float: initial;
    margin: 1rem;
    transition: all .5s ease-in-out;
}

  .leftimg:hover{
      transform: scale(1.5);

  }

  .rightimg:hover{
      transform: scale(1.5);
  }

  .center:hover{
      transform: scale(1.5);
  }
...