8/4/2023 0 Comments Css overlay text on image![]() The reason why I keep these guides in here, and I've mentioned this several times, the reason why I do not edit out any kind of mistakes like this is that this is a very common process, it is something that there are many times where I will think I'm about to render out some kind of code or something I'm getting from an API, only to find out that the data is not showing up, and so I like to show you kind of what my personal process is whenever that happens.Īnd so I'm gonna close that out, and now all we have to do is come here and instead of logo, it's just logo_url. You see, I'm calling logo but it should actually be logo_url. We have our banner_image_url, category, column_names, description, id, oh, and there's the issue. And then let's just click on the first one, though we could click on any of them, and moving down, we have our props, this is our item prop. There we go, so we have our children, which is an array of 12, these are the items. Click on that div, and, okay, so we have our empty image, but let's follow the chain up all the way up to the portfolio-item container. ![]() So I'm gonna go to React and then I'm also going to make it a little easier to highlight everything, so I'm gonna use the Inspector, this button here. So we could do that with the debugger, but let's actually use the React Dev Tools this time. The very first thing that I would do is to look through the data and see exactly what we have access to. Now whenever this happens, and I can tell you, no matter how long I've done this, these kinds of things come up constantly. Now we have our new img-text-wrapper here, and you can see we have our logo-wrapper and we have an empty image, so that's the issue, we are getting nothing past here for the logo. So if we look at our portfolio-item-wrapper, we see we have our background-image, so that's working properly. And that took up the whole giant screen, so let me fit it inside of here, there we go, this is gonna be a little easier. So I'm actually going to pop this open just so we can see it a little easier. So before we do anything, make sure you hit refresh, and it looks like we are missing our logo, so let me just kind of inspect this really quick and walk through what could be causing this. Okay, let's go and test this out first in the browser just 'cause this was a decent amount of code and we're about to write a lot of CSS code. And now let's add the description, so I'll say div className equals, and let's call it the subtitle, and then call description, close off that div and we should be good to go. And then inside of here, I wanna just have a regular image tag, so I'm gonna say img and the source of this is going to be logo, so say source equals logo, and then make sure that you close that off, or else you'll get an error.Īnd hit save just so we get our nice formatting from the prettier gem or the prettier extension. And we can give this a class name of logo-wrapper, 'cause that is going to wrap around the logo. ![]() The very first thing we want to show is that logo, so let's add a div here that's gonna hold the logo. So I'm going to create a div, now this one is not gonna be a self-closing div, and let's give it a class name of img-text-wrapper 'cause this is gonna sit right on top of that background image that we worked on in the last guide. So let's come here, we have this image logo, and description, and the link, I'm just gonna get rid of all of it and write the JSX code just from scratch. It makes it, at least in my mind, a little bit easier to follow. The reason why I follow this approach is that I feel like it's a more logical progression to build out my JSX structure first and then add my CSS and my selectors and everything like that. wrapper div img span.So let me switch over to Visual Studio Code and let's start as usual in updating the JSX structure here. How It WorksDermatologist or Acne SpecialistFacial text class, however, it adds the either to the right of the image or below instead of overlay The text doesn't show the text between my span when i hover over the image? I have tried display inline-block within my. How do I overlay text over my image when i hover over the image element with a mouse?
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |