How to properly set text caption on image with image on hover

Question

i've been trying to use angular masonry. I've been trying to do something like when hovering over an image, the image will darken, and the caption will be more exposed (high-contrast) over the image to be able to read it properly. However, when i try to hover over the image, the caption, or in my case i call it header, within my image disappears (or apparently also affected by darkening the image).

To fully understand what i mean, please see this Sample Code on StackBlitz

I've been trying to do this in purely css so that in my angular code would've handle only those data, and screen transition (routerlinks). I leave styling to CSS and other Libraries (i.e Angular Masonry)

score 1 · Accepted Answer · answered Aug 27 '18 at 07:06

1

The problem is that the .feed-header is sitting behind the filter, so you need to set a z-index on that class:

.masonry-item
.feed-container
.feed-header {
  position: absolute;
  width: 100%;
  padding: 10px;
  align-items: center;
  display: flex;
  z-index: 9;
}

Also, if you want to make the text contrast, you may want to set it to white on hover (to contrast with the dark filter). You can do so using:

.masonry-item
.feed-container:hover
.feed-header {
  color: white;
}

Here is a StackBlitz demo

answered Aug 27 '18 at 07:06

user184994

17,791
1
46
52

ohhh i see, make sense, this does the job. next problem is how to auto contrast the text base on image color (if its dark, then text must be white. This is for the header when not hovered). – lemoncodes Aug 27 '18 at 07:32
I don't think that will be possible with only CSS. You may be better off using something like white text with a black outline – user184994 Aug 27 '18 at 07:34
something like text in a box kinda thing? – lemoncodes Aug 27 '18 at 07:36
1

More like a text shadow. I've just updated the stackblitz, take a look at that – user184994 Aug 27 '18 at 07:42
ohhh i see, it kinda float on screen, the text on top of the image. cool – lemoncodes Aug 27 '18 at 07:46

score 0 · Answer 2 · answered Aug 27 '18 at 07:06

This stackblitz should work

All I did was putting the header before the image and adding this as SASS to your CSS file :

ngxMasonryItem {
  .feed-text {
    color: white;
    z-index: 9999;
  }
  &:hover {
    img {
      filter:  blur(2px) brightness(50%)
    }
  }
}

(An removing the previous filter you used)

in HTML, declaration order is important, and so is z-index.

score 0 · Answer 3 · answered Aug 27 '18 at 07:13

Try This Demo

CSS file

.box {  

    cursor: pointer;  
    height: 468px;  
    float: left;  
    margin: 5px;  
    position: relative;  
    overflow: hidden;  
    width: 468px;  

}  

 .box img {  
    position: absolute;  
    left: 0;  
    -webkit-transition: all 300ms ease-out;  
    -moz-transition: all 300ms ease-out;  
    -o-transition: all 300ms ease-out;  
    -ms-transition: all 300ms ease-out;  
    transition: all 300ms ease-out;  
}  


.box .caption {  
    font-family: Tahoma;
    font-size: .5em;
    background-color: rgba(0,0,0,0.8);  
    position: absolute;  
    color: #fff;  
    z-index: 100;  
    -webkit-transition: all 300ms ease-out;  
    -moz-transition: all 300ms ease-out;  
    -o-transition: all 300ms ease-out;  
    -ms-transition: all 300ms ease-out;  
    transition: all 300ms ease-out;  
    left: 0;  
    opacity: 0;  
    width: 450px;  
    height: 450px;  
    text-align: left;  
    padding: 15px;
}  



 .box:hover .fade-caption {  
    opacity: 1;  
}

HTML File

<div id="mainwrapper"> 

<!-- Image Caption 3 -->  
     <!-- Image Caption 3 -->  
    <div class="box">  
        <img id="image-3" src="https://www.w3schools.com/howto/img_avatar.png"/>  
        <span class="caption fade-caption">  
        <h3>Fade Caption</h3>  
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>  
        </span>  
    </div>

   <div class="box">  
        <img id="image-3" src="https://www.w3schools.com/howto/img_avatar.png"/>  
        <span class="caption fade-caption">  
        <h3>Fade Caption</h3>  
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>  
        </span>  
    </div>


</div>

If you need something like this hover caption you please let me know so i can update your code — harkesh kumar, Aug 27 '18 at 07:14
somewhat but i need the caption to be displayed always not on hover.. also, im trying to find ways to auto-contrast the caption based on the image color so it can be seen always but its another story — lemoncodes, Aug 27 '18 at 07:28

How to properly set text caption on image with image on hover

3 Answers3