@PyChan

Как сделать эффект небольшого сдвига изображения наверх?

Использую такой код:
<style>
.icon {
  width: 100px;
  height: 100px;
  overflow: hidden;
  position: relative;
}

.pic {
  width: 50px;
  height: 50px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: top 500ms;
}

.icon:hover .pic {
  top: 40%;
}
</style>
<body>
div id="fh5co-features" style="background-color: #edffda">
				<div class="container">
					<div class="row">
						<div class="col-md-4 animate-box">

							<div class="feature-up">
								<span class="icon">
									<img class = "pic" src="https://img.icons8.com/bubbles/100/000000/businesswoman.png"/>
								</span>
								<figure>
								<figcaption>
									<h3></h3>
									<p></p>
								</figcaption>
								</figure>
							</div>

						</div>

						<div class="col-md-4 animate-box">
							<div class="feature-up">
								<span class="icon">
									<img class = "pic" src="https://img.icons8.com/bubbles/100/000000/ok.png"/>
									</span>
								<div class="feature-copy">
									<h3></h3>
									<p></p>
								</div>
							</div>

						</div>
						<div class="col-md-4 animate-box">
							<div class="feature-up">
								<span class="icon">
									<img class = "pic" src="https://img.icons8.com/bubbles/100/000000/chat.png"/>
								</span>
								<div class="feature-copy">
									<h3></h3>
									<p></p>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
</body>


В результате при наведении на изображение ничего не происходит
  • Вопрос задан
  • 75 просмотров
Решения вопроса 1
sniggering_deus
@sniggering_deus Куратор тега CSS
One Morning Left - Words Won`t Save You
.pic {
transform: translateY(0px);
transition: transform 300ms;
}

.pic:hover {
transform: translateY(-10px);
}


Или:

.icon {
  width: 100px;
  height: 100px;
  position: relative;
}

.pic {
  width: 50px;
  height: 50px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: top 500ms;
}

.icon:hover .pic {
  top: 40%;
}


Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы