1

I'm currently working on a project which could potentially have a large number of images on it at once. So the design we have puts a small caption on the bottom of the image, as an overlay, with a small ::After 'arrow' pointing into the following section.

The overlay is about 10% transparent, so some of the image is just visible, but depending on the image, the color of the overlay will vary - causing the arrow to mismatch.

Please see this image as an example:

Is there any way I can programmatically sample either one or an average of pixels near the 'arrow', so that it always gets the right color, and looks seamless?

Edit:

.overlay-with-arrow
{
    position: absolute;
    bottom: 0;
    width: 100%;
    background-color: rgba(62, 62, 62, 0.9);
    color: #FFF;
    text-align: center;
    font-family: Montserrat, SansSerif, serif;
    text-transform: uppercase;
}

.overlay-with-arrow::after
{
    content: "";
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid rgb(62, 62, 62);
    display: block;
    position: absolute;
    transform: translateX(-50%);
    left: 50%;
    bottom: -20px;
    z-index: 1;
}
Matheus Cuba
  • 2,068
  • 1
  • 20
  • 31
Wardy
  • 11
  • 3
  • Possible duplicate of [Get pixel color from an image](https://stackoverflow.com/questions/17789076/get-pixel-color-from-an-image) – Flink May 16 '18 at 13:32
  • I don't think getting a color pixel is the issue here. Hey wardy. Can you please provide the code of which you create your arrows and overlay? – soulshined May 16 '18 at 13:33
  • Getting a sample from the image is pretty hard. Maybe try to create the arrow with the image again, as a background? – Flink May 16 '18 at 13:36
  • The arrow is pretty small, do you mean have the image as the background of the arrow too? I think if the image is lighter on the top, than the bottom, this might still cause the same issue? – Wardy May 16 '18 at 13:52
  • please clarify what you mean by __"depending on the image, the color of the overlay will vary"__ @Wardy what specifically happens or how does it change the color depending on the image – soulshined May 16 '18 at 14:33
  • Well, due to the transparency, the overlay isn't a solid colour. It had a fixed rgba value, but when an image is rendered behind it, the colour values of those pixels change so the image can be seen. So, a darker image would make the overlay appear darker, and a lighter one, lighter. Does that make sense? – Wardy May 16 '18 at 16:19

0 Answers0