Hover effect on image

Question

I would like to know why my hover effect doesn't work. Right now I have an image and I want something like this when I move the cursor over it.

Of course I've written the code for this efect, but it doesn't work on hover effect. Can you explain me what I am doing bad? Like you can see i've tried with display:none and then display:block but nothing happend. I'll be really appreciated for help.

Here's a jsfiddle demo and 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

What you want is that the p element will get the display: blocked once you hover the .products__box element (which is it's parent):

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

Check this update:
https://jsfiddle.net/dnttrb7q/1/

Answer 2

you need to use the hover on the image and show the paragraph by using the plus(+) selector

this is how it should look like:

p{
   display:none;
}

and since p is after img:

img:hover + p {
   display:block;
}

Answer 3

You are putting the hover effect on the p tag which is display: none . With display none, the element does not take up space on the page, and so you aren't actually hovering over it. I can think of 2 ways to fix this.

First, you could try visibility: hidden which the element is invisible but it is still on the page. Or you could put the hover effect on the outside div. But then you would have to find the child p tag to change the display on it.