Как сделать анимацию в js?

Question

[Тест Тестов]

Ребят я крайне извиняюсь за моё незнание языка 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")
    });
});

Comments

[alex]

зачем js? на css все делается

[Тест Тестов]

ну всмысле при наведении на кейс нужно чтобы появлялась кнокпа

[ProjectSoft]

Аким Саввин в css есть псевдокласс :hover и есть свойства transition, animation
Не нужен здесь js

Answer 1

[alex]

.portfolio__case {
  transform: translateY(0px);
  transition: transform ease .1s;
}

.portfolio__case:hover .portfolio__button {
  display: block;
  transform: translateY(-1px);
}

Comments

[Тест Тестов]

не работает(

&__case
        width: 392px
        height: 220px
        margin-top: 20px
        cursor: pointer
        background: none
        &:hover .portfolio__btn
            display: block

[Тест Тестов]

Аким Саввин, Аким Саввин, это sass

[alex]

Аким Саввин, portfolio__button а не portfolio__btn

[Тест Тестов]

alex, класс поменял

[Тест Тестов]

alex, ой пардон не нажал watch sass)

[alex]

Аким Саввин, все работает

[ProjectSoft]