On image hover display text-div over it

Question

Alright so I've been searching around for this question and found a lot of topics, but for some reason I cant manage to get the effect I want.

So I've got a slider with generated content, see code below.

@foreach ($elements['instagram-highlights']['subs'] as $item)

<img class="instagram-home-items" src="{{ $item['instagram-items']['image'] }}">

<div class="text-content">
     {!! $item['instagram-items']['textfield'] !!}
</div>

@endforeach

The class text-content is set to display: none. When the img instagram-home-items is hovered the content of text-content should be placed on top of the image. For some reason, this won't work. The CSS i've got so far is below:

.text-content {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(29, 106, 154, 0.72);
    color: #fff;
    display:none;
    opacity: 0;
    -webkit-transition:opacity 0.2s;

}

.instagram-home-items:hover .text-content {
    display:block;
    opacity: 1;
}

It's probably very simple, but I can't seem to get it right. Thanks!

EDIT: The answer from Tripleb worked for the hover, now the next problem is the slideshow. I'm using Carousel2 but for some reason the slider stops working when I put a DIV in front of the image. Code being used now below:

<div class="cycle-slideshow" style="width:auto;"
 data-cycle-fx=carousel
 data-cycle-timeout=4000
 data-cycle-prev="> .cycle-prev"
 data-cycle-next="> .cycle-next"
 >

@foreach ($elements['instagram-highlights']['subs'] as $item)

    <div class="img_ct">
        <img class="instagram-home-items" src="{{ $item['instagram-items']['image'] }}">

        <div class="text-content">
            {!! $item['instagram-items']['textfield'] !!}
        </div>
    </div>
@endforeach

And the CSS that Tripleb provided:

    .text-content {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(29, 106, 154, 0.72);
    color: #fff;
    display:none;
    opacity: 0;
    -webkit-transition:opacity 0.2s;
}

.img_ct{
    position:relative;
    width:33%;
    float:left;
}


.instagram-home-items{
    display:block;
}

.img_ct:hover .text-content {
    display:block;
    opacity: 1;
}

Any suggestions on that part?

Answer 1

your css selector is wrong you are selecting "parallel" the text is not a descendent of the image but a sibling

@foreach ($elements['instagram-highlights']['subs'] as $item)
<div class="img_ct">
    <img class="instagram-home-items" src="{{ $item['instagram-items']['image'] }}">

    <div class="text-content">
        {!! $item['instagram-items']['textfield'] !!}
    </div>
</div>
@endforeach

.text-content {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(29, 106, 154, 0.72);
    color: #fff;
    display:none;
    opacity: 0;
    -webkit-transition:opacity 0.2s;

}

.img_ct{
    position:relative;
}


.instagram-home-items{
    display:block;
}

.img_ct:hover .text-content {
    display:block;
    opacity: 1;
}

Answer 2

You CSS code assumes that the .text-content is a child of the .instagram-home-items. But in your HTML they are actually siblings. What you should do is wrap them in a container div like so:

<div class="item-wrapper">
   <img class="instagram-home-items" src="{{ $item['instagram-items']['image'] }}">

   <div class="text-content">
       {!! $item['instagram-items']['textfield'] !!}
   </div>
</div>

Then, change your css to this:

.item-wrapper:hover .text-content {
    display:block;
    opacity: 1;
}

That should do it.

Answer 3

.text-content isn't a child of .instagram-home-items

Try this:

@foreach ($elements['instagram-highlights']['subs'] as $item)
<div class="instagram-home-items-wrapper">
    <img class="instagram-home-items" src="{{ $item['instagram-items']['image'] }}">

    <div class="text-content">
     {!! $item['instagram-items']['textfield'] !!}
    </div>
</div>
@endforeach

And in your CSS

.text-content {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(29, 106, 154, 0.72);
    color: #fff;
    display:none;
    opacity: 0;
    -webkit-transition:opacity 0.2s;

}

.instagram-home-items-wrapper:hover > .text-content {
    display:block;
    opacity: 1;
}

Answer 4

.instagram-home-items:hover .text-content that selector is looking for an element with the class text-content that is a child of an element with the class instagram-home-items . Since you can't nest element within an img tag, I'm sure this isn't what you're looking for.

Try using a sibling selector instead like this: .instagram-home-items:hover + .text-content .

Best of luck!