Использую такой код:
<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>
В результате при наведении на изображение ничего не происходит
Простой
