Applying overlay to the right side of an image

Hello everyone,

While I learned how to create a showcase image with an overlay and text over it (I also learned how to slant the bottom of the image), I’m unable to find any resources on the internet on how to apply overlay to the right side of an image only and then typing the text over it. I’m trying to create a blue background with an image in the center. This image will have an overlay on the right side only with some text. This is what I wrote so far.

.container {
    width: 100%;
    height: 700px;
    background-color: #328ba8;
}

.hero {
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding-top: 80px;
    max-width: 1100px;
    height: auto;
}

HTML

  <div class="container">
        <img class="hero" src="images/hero_image.jpg" alt="hero-image" />
    </div>

I appreciate your input.

The code you posted above doesn’t really give us enough to go off of to help you. Where is the text you want to overlay on the image? Please try to do the best you can at what you want to accomplish and then put all of your code somewhere we can see it (such as codepen) instead of copy/pasting it in here.

2 Likes

Hello Bruce,

Thanks for your response.
This is the link that I’ve CodePen Link

As I mentioned, I can create an overlay over an image with text but only when the image fills the entire viewport (I can show you how I did it if you wish). But I can’t put an overlay over half of the image with text.

What you have in the codepen is exactly what you pasted above. Where is the text you want to overlay? What CSS have you tried to make this happen?

Basically at this point it seems like you are just asking someone to do this for you. Instead, I’m asking you to try your best and then we can help you with any specific problems.

Concerning the missing image, we can just put a width/height/background-color on it for the time being so don’t worry too much about getting it to display. What is the approximate height/width of the image you are using?

1 Like

I wouldn’t be posting my question if I haven’t tried my best. If you’ve got a reference, please share it. Thanks

PS: I’m not asking you or anyone to do for me. If I wanted someone to do it for me I’d hire them to do it for me. I’m here to learn and I ask questions as a learner. I hope you can understand. Take care.

Then please show us what you have tried. What you have in the codepen right now doesn’t look like you have tried to overlay text on the image.

We learn by studying and practicing. When somebody asks me a question and I know the answer, I’ll show them how it’s done. This is how people learn. Let’s drop it please. I’ll ask someone else to show me how it’s done.

Exactly, that’s why I’m asking you to try it and show us what you have tried.

I agree, I’m probably not the best person to help you at this point. Good luck.

Hey @ME20!

I am also a beginner so I understand what it’s like to be frustrated but @bbsmooth was just trying to help.

There are a lot of awesome pros here on the forum that are happy to help beginners like us but we have to be willing to share our code even if it is wrong. Because of their experience, these professionals can spot the mistakes in our code and guide us in the right direction.

So, if you want other experienced developers to help you then you will need to post what you have tried. It is ok if it is flat wrong.

I write broken code all of the time. Sometimes my code doesn’t make much sense but I am glad that there are people here on the forum that want to help me become a better developer.

Please be civil.

Thanks!

@jwilkins.oboe It’s not about being civil. Please be objective. I posted the code that I could write and was honest about my abilities. I asked if someone can point me in the right direction by showing me a reference. I enjoy learning and I’m happy to share my knowledge if I’m asked. Take care and good luck.

On freeCodeCamp, we strongly urge against users just giving people answers. That does not facilitate learning, and we are first and foremost a platform for helping people learn how to do something on their own.

I can understand that this can be frustrating, but it’s really based in solid pedagogy. All of the lovely humans on the forum are here to help each other learn!

We do ask that everyone act civilly towards their fellow humans on the forum, as it helps create a more friendly and welcoming environment.

Codepen has the issue of not allowing images to be hosted without paying for the “pro” tier. This is why it shows your alt-text instead. This makes it harder to debug since there isn’t an image to work with, since we can’t directly see or play around with the image itself. Technically you could just provide a url to an image hosted elsewhere, but this is frowned upon as you use up external servers to load the image.

No matter how good someone is, looking at just the code and knowing 100% of how its going to work without actually seeing and testing it generally never happens. Having a reproduction/playground always helps. Its very hard to take in 100% of some code and know exactly how it works without actually messing with it. This is especially true when it doesn’t work, as there are infinite ways to screw something up haha. Since codepen doesn’t provide the best environment to host+play around with this code in this situation, its a little tougher to provide adequate feedback on how to do something.

So at this point you might be going “how the hell do I do it then?” and I’d say just follow a guide/tutorial.
However, as said above these are essentially “the answer” to how to do what your doing. I did find these all with a quick google for what your asking about so you can see it as part of the “read, search” flow of learning in freeCodeCamp.

or look to the past for people who have asked the same question:

Some of these might be not exactly what you want, but hopefully its similar enough to what you want/need to help ya out some. Regardless, from what it sounds like your doing I think you can figure it out with some trial error, and maybe even extra googling. :smiley:

Finally, I’d like to say the best teacher isn’t others, its failure. Failure will force you to figure something out. How you figure it out is what experience is made of. You can always ask for help when you hit a wall, and potentially figure it out that way, or you can figure it out thru other means. Regardless, you have to figure it out, and the more “failures” you hit and the more ways you get out of it is how experience is built, and how you learn.

Simply put your gonna have problems… a lot of problems. Building the best flow of getting “unstuck” is key to development. If your flow starts with asking for help, you might not get much done very fast since your waiting on others to help you get answers. At the same time if you never ask for help, you might be deep in the rabbit hole learning all about the wrong things. The key is balance and using the right resources for the right things. Luckily the internet means you have essentially all the answers you can ever need, you just need to understand your problem and find those answers. (google-fu)

Good luck, keep building, keep learning, keep struggling :+1:

3 Likes

Not sure if this is even what you’re asking for.

Use rgba for the overlay color if you want transparency. Put the text inside the overlay container. Position absolute the container (inside a relatively positioned parent) and use offsets and width/height to make it take up however much of the container you want.

I assume you are already looking at code examples so here is one example.
https://codepen.io/lasjorg/full/poEzwQK

2 Likes

@lasjorg This is awesome. Many thanks indeed.