Как сделать каждый элемент полной высотой контейнера и начать переход при наведении? - PullRequest
Новая
       120

Как сделать каждый элемент полной высотой контейнера и начать переход при наведении?

0 голосов
/ 14 июля 2020

Здравствуйте, посмотрите снимок экрана ниже. В «Возможностях» есть 4 элемента, и я добавил некоторую продолжительность перехода к изображению и тексту (текст перемещается вверх).

Как только мышь оказывается в этой области, находится ли она в самом верху или внизу I хочу, чтобы переход начался как для изображения, так и для текста.

Я не смог понять, как правильно сделать каждый класс элемента полной высотой идентификатора «Возможности» в css.

  1. Как сделать каждый предмет во всю высоту? Flexbox stetch у меня не работал.
  2. как сделать так, чтобы переход начинался при наведении курсора? Я использую Sass.

http://lonestarwebandgraphics.com/

enter image description here

HTML

  ВОЗМОЖНОСТИ  Я ДЕЛАЮ КАК
Graphic Design ГРАФИ C ДИЗАЙН Web Design веб-дизайн web Development веб-разработка Email Development Разработка электронной почты

S CSS

#capabilities {

    .items {
        display: flex;
        justify-content: space-evenly;
        // align-items: stretch;
      
            h3 {
            color: white;
            text-transform: uppercase;
        }
       
        .item {
            
            flex: 1;

            img {
                height: 10rem;
                width: auto;
                display: block;
                margin: auto;
                margin-bottom: 2rem;
                opacity: .40;
                transition: 1s;

                    // &:hover {
                    //     opacity: 1.0;
                    // }
            }
            
            h3 {
                padding-top: 2rem;
                transition-duration: .5s;

                &:hover {
                    padding-top: 0rem;
                transition-duration: .5s;

                }
            }
        }
                .item:hover  img {
                    opacity: 1.0;
                }
        
    }

}

1 Ответ

0 голосов
/ 14 июля 2020

попробуйте это 

#capabilities {

    .items {
        display: flex;
        justify-content: space-evenly;
        // align-items: stretch;
      
            h3 {
            color: white;
            text-transform: uppercase;
        }
       
        .item {
            
            flex: 1;

            img {
                height: 10rem;
                width: auto;
                display: block;
                margin: auto;
                margin-bottom: 2rem;
                opacity: .40;
                transition: 1s;

                    // &:hover {
                    //     opacity: 1.0;
                    // }
            }
            
            h3 {
                padding-top: 2rem;
                transition-duration: .5s;

               
            }
        }
                .item:hover  img {
                    opacity: 1.0;
                }
               .item:hover h3 {
                padding-top: 0rem;
                transition-duration: .5s;
                }
        
    }

}
...