2

I have an video tag with an div displayed on top. The div is pretty nice looking and visible for the most part, only dark images are a bit problematic.

For the sake of testing I searched out 3 pictures and overlay them with my div.

The question is, how would someone create this overlay layout, so it is discreetly and clearly visible at the same time?

The result is as follows:

Visibility good! Visibility good!

Visibility bad Visibility bad

Visibility bad Visibility okay, background visibility bad


.container{
    position: relative;
}

img{
    width: 100%;
    height: 100%;
}

.tag{
    position: absolute;
    bottom: 5px;
    right: 0;
    color: white;
    font-size: 48px;
    padding: 5px;

    -webkit-border-top-left-radius: 20px;
    -moz-border-radius-topleft: 20px;
    border-top-left-radius: 20px;

    background-color: black;
    opacity: 0.4;
    filter: alpha(opacity=40); /* For IE8 and earlier */
}
<div class="container">
    <img src="https://www.nasa.gov/sites/default/files/20140824_0304_171.jpg"></img>
    <div class="tag">Hello Tag</div>
</div>
<div class="container">
    <img src="https://alifebeyondrubies.files.wordpress.com/2013/03/walls01.jpg"></img>
    <div class="tag">Hello Tag</div>
</div>
<div class="container">
    <img src="http://photos.epicurious.com/2015/01/12/54b4006b2413537c0d45738f_51143820_spaghetti-mussels-white-beans_6x4.jpg"></img>
    <div class="tag">Hello Tag</div>
</div>
1

You can try to provide text-shadow with blur as shown in the image below, so this helps in getting a form of translucent background around the text.

Please try:- CSS3 Text Shadow Generator

text-shadow: 3px 0px 19px rgba(226, 150, 150, 1);

enter image description here

1

There are quite some options.

I'll skip the options that aren't applicable for your problem:

  • apply text directly to image
  • overlay entire image

Here are the useful ones:

1. Text in a box

This is the option you chose, you could tweak the opacity a bit so it's more readable on 'noisy' images.

Idea

Textbox overlay

2. Blur the part behind the text

Blurred background

3. Floor fade

A slight fading effect behind the text. Hint: Use a text shadow!

Floor fade

4. Scrim

This is an interesting one. It's a kind of gradiated box behind the text. It should not be noticeable but the text should be easier to read.

The floor fade's hint applies here as well.

Scrim

Reference: https://medium.com/@erikdkennedy/7-rules-for-creating-gorgeous-ui-part-2-430de537ba96

0

@Vince was a huge help, ty for this great resource.

Solution I ended up doing:

https://jsfiddle.net/p89buajq/

I am still fiddling with the color but the concept is nice, ty everyone.

  • Glad I could help :) Though you might wanna mark the most helpful answer as accepted. – Vince Caregnato Jul 2 '15 at 8:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.