Hover-Effekt auf Bild

Question

Ich würde gerne wissen, warum mein Hover-Effekt nicht funktioniert. Gerade jetzt habe ich ein Bild und ich möchte so etwas, wenn ich den Cursor darüber bewege.

Natürlich habe ich den Code für diesen EFFEKT geschrieben, aber es funktioniert nicht auf Hover-Effekt. Kannst du mir erklären, was ich schlecht mache? Wie Sie sehen können habe ich versucht mit display: none und dann display: block aber nichts passiert. Ich werde wirklich für Hilfe geschätzt werden.

Hier ist ein jsfiddle demo und codepen demo

HTML-Code

<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 Code

$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

Was Sie wollen, dass das p Element das display: blocked erhalten, sobald Sie das .products__box Element schweben (was ist es Elternteil):

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

prüft dieses Update:
https://jsfiddle.net/dnttrb7q/1/

Answer 2

Sie schweben auf dem Bild verwenden müssen, und zeigen den Absatz mit dem PLUS (+) Selektor

dies ist, wie es aussehen sollte:

p{ 
    display:none; 
} 

und da p nach img:

img:hover + p { 
    display:block; 
} 

Answer 3

Sie setzen den Hover-Effekt auf das p-Tag, das display: none ist. Wenn none angezeigt wird, belegt das Element keinen Platz auf der Seite, und Sie befinden sich nicht tatsächlich darüber. Ich kann mir 2 Möglichkeiten vorstellen, das zu beheben.

Zuerst können Sie versuchen visibility: hidden, die das Element unsichtbar ist, aber es ist immer noch auf der Seite. Oder Sie könnten den Hover-Effekt auf das äußere div setzen. Aber dann müssten Sie das Kind p-Tag finden, um die Anzeige darauf zu ändern.