Эффект наведения на изображение

Question

Я хотел бы знать, почему мой эффект зависания не работает. Прямо сейчас у меня есть изображение, и я хочу что-то подобное, когда я перемещаю курсор над ним.

Конечно, я написал код этого Efect, но он не работает на парения эффект. Можете ли вы объяснить мне, что я делаю плохо? Как вы можете видеть, я попробовал с дисплеем: none, а затем отобразить: блок, но ничего не случилось. Я буду очень благодарен за помощь.

Вот jsfiddle demo и codepen demo

HTML код

<section class="products"> 
     <h1 class="products__title"><span>Wspierane</span> produkty</h1> 
    <div class="products__wrap"> 
     <div class="products__box"> 
      <img src="http://i.imgur.com/Zrd6Mgu.png" alt=""> 
      <p>hera</p> 
     </div> 
     <div class="products__box"> 
      <img src="http://i.imgur.com/Zrd6Mgu.png" alt=""> 
      <p>elektra</p> 
     </div> 
     <div class="products__box"> 
      <img src="http://i.imgur.com/Zrd6Mgu.png" alt=""> 
      <p>rainbow</p> 
     </div> 
     <div class="products__box"> 
      <img src="http://i.imgur.com/Zrd6Mgu.png" alt=""> 
      <p>roboclean</p> 
     </div> 
     <div class="products__box"> 
      <img src="http://i.imgur.com/Zrd6Mgu.png" alt=""> 
      <p>rainbow d4</p> 
     </div> 
    </div> 
    </section> 

код SCSS

$font: 'Lato', sans-serif; 
$break-medium: 45em; 
$break-large: 75em; 
@function calculateRem($size) { 
    $remSize: $size/16px; 
    @return $remSize * 1rem; 
} 
@mixin font-size($size) { 
    font-size: $size; 
    font-size: calculateRem($size); 
} 
* { 
    margin: 0; 
    padding: 0; 
} 
.products { 
    width: 100%; 
    height: 1600px; 
    background-color: rgb(255,255,255); 
    @media only screen and (min-width: $break-large) { 
     height: 500px; 
    } 

    &__title { 
     margin: 0; 
     font-family: $font; 
     @include font-size(35px); 
     font-weight: 700; 
     text-align: center; 
     color: rgb(13,13,13); 
     padding-top: 35px; 
     padding-bottom: 45px; 
     @media only screen and (min-width: $break-medium) { 
      @include font-size(50px); 
     } 

     span { 
      font-weight: 900; 
     } 
    } 

    &__wrap { 
     @media only screen and (min-width: $break-large) { 
      display: flex; 
      flex-direction: row; 
      justify-content: center; 
      align-items: center; 
     } 
    } 

    &__box { 
     width: 240px; 
     background-color: rgb(255,255,255); 
     margin: 0 auto; 
     position: relative; 
     margin-top: 30px; 
    } 

    p { 
     font-family: $font; 
     font-weight: 700; 
     @include font-size(30px); 
     text-transform: uppercase; 
     color: rgb(247,248,249); 
     text-align: center; 
     white-space: nowrap; 
     position: absolute; 
     top: 50%; 
     left: 50%; 
     transform: translate(-50%, -50%); 
     @media only screen and (min-width: $break-large) { 
      display: none; 

      &:hover { 
       display: block; 
      } 
     } 

     &::before { 
      content: ''; 
      background-color: rgb(10,198,162); 
      width: 240px; 
      height: 60px; 
      position: absolute; 
      top: 50%; 
      left: 50%; 
      transform: translate(-50%, -50%); 
      z-index: -200; 
     } 
    } 
} 

Answer 1

Что вы хотите, что p элемент получит display: blocked как только вы наведете .products__box элемент (который является его родителем):

.products__box p{ 
    display: none; 
} 
.products__box:hover p{ 
    display: block; 
} 

Проверить это обновление:
https://jsfiddle.net/dnttrb7q/1/

Answer 2

вам нужно использовать парить на изображение и показать абзац, используя плюс (+) селектор

это то, как он должен выглядеть следующим образом:

p{ 
    display:none; 
} 

и так как р после IMG:

img:hover + p { 
    display:block; 
} 

Answer 3

Вы помещаете эффект зависания на тэг p, который равен display: none. При отображении none элемент не занимает места на странице, и поэтому вы на самом деле не вибрируете над ним. Я могу придумать два способа исправить это.

Во-первых, вы можете попробовать visibility: hidden, который элемент невидим, но он все еще находится на странице. Или вы можете наложить эффект зависания на внешний div. Но тогда вам нужно будет найти дочерний p-тэг, чтобы изменить отображение на нем.