Ребят я крайне извиняюсь за моё незнание языка js. Но помогите сделать анимацию для кнопки. Когда наводишь на кейс. Кнопка должна проезжать немного вверх. Я сразу извиняюсь) А еще крч как сделать чтобы появлялась только одна кнопка а не все
<section class="portfolio">
<div class="container">
<div class="line portfolio__line"></div>
<span class="subtitle portfolio__subtitle">Последние работы</span>
<h1 class="portfolio__title">Портфолио</h1>
<div class="portfolio__wrap">
<div class="portfolio__case">
<button class="portfolio__button">Подробнее</button>
<div class="portfolio__dark"></div>
<img class="portfolio__img" src="img/case1.jpg" alt="">
</div>
<div class="portfolio__case">
<button class="portfolio__button">Подробнее</button>
<div class="portfolio__dark"></div>
<img class="portfolio__img" src="img/case2.jpg" alt="">
</div>
<div class="portfolio__case">
<button class="portfolio__button">Подробнее</button>
<div class="portfolio__dark"></div>
<img class="portfolio__img" src="img/case3.jpg" alt="">
</div>
<div class="portfolio__case">
<button class="portfolio__button">Подробнее</button>
<div class="portfolio__dark"></div>
<img class="portfolio__img" src="img/case4.jpg" alt="">
</div>
<div class="portfolio__case">
<button class="portfolio__button">Подробнее</button>
<div class="portfolio__dark"></div>
<img class="portfolio__img" src="img/case5.jpg" alt="">
</div>
<div class="portfolio__case">
<button class="portfolio__button">Подробнее</button>
<div class="portfolio__dark"></div>
<img class="portfolio__img" src="img/case6.jpg" alt="">
</div>
<div class="portfolio__case">
<button class="portfolio__button">Подробнее</button>
<div class="portfolio__dark"></div>
<img class="portfolio__img lazyload" src="img/case7.jpg" alt="">
</div>
<div class="portfolio__case">
<button class="portfolio__button">Подробнее</button>
<div class="portfolio__dark"></div>
<img class="portfolio__img lazyload" src="img/case8.jpg" alt="">
</div>
<div class="portfolio__case">
<button class="portfolio__button">Подробнее</button>
<div class="portfolio__dark"></div>
<img class="portfolio__img lazyload" src="img/case9.jpg" alt="">
</div>
<div class="portfolio__case">
<button class="portfolio__button">Подробнее</button>
<div class="portfolio__dark"></div>
<img class="portfolio__img lazyload" src="img/case10.jpg" alt="">
</div>
<div class="portfolio__case">
<button class="portfolio__button">Подробнее</button>
<div class="portfolio__dark"></div>
<img class="portfolio__img lazyload" src="img/case11.jpg" alt="">
</div>
<div class="portfolio__case">
<button class="portfolio__button">Подробнее</button>
<div class="portfolio__dark"></div>
<img class="portfolio__img lazyload" src="img/case12.jpg" alt="">
</div>
</div>
</div>
</section>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <!--jquery-->
<script src="js/main.js"></script>
.portfolio
&__line
margin-bottom: 6px
&__title
margin-top: 30px
&__wrap
display: flex
flex-wrap: wrap
justify-content: space-between
width: 1216px
margin-top: 40px
&__case
width: 392px
height: 220px
margin-top: 20px
cursor: pointer
background: none
&__img
position: absolute
z-index: -2
transition: 0.2s
&:hover
filter: brightness(50%)
&__dark
width: 392px
height: 220px
position: absolute
z-index: -1
background: #00000050
display: none
&__button
margin: auto
display: none
.active
display: block
$(function () {
var port = $(".portfolio__case") //case
var btn = $(".portfolio__button")
var dark = $(".portfolio__dark")
port.mouseover(function () {
btn.toggleClass("active")
btn.toggleClass("portfolio__button")
dark.toggleClass("active")
});
port.mouseout(function () {
btn.toggleClass("active")
btn.toggleClass("portfolio__button")
dark.toggleClass("active")
});
});