Menu
similar to facebook a img tag to function like when you hover over your profile picture and this little overlay goes on top asking if you want to edit photo. I have the hover working but I don't know how to get the overlay. I'm using img tag cause the image is from a URL
983
Add CSS. Add a relative div placed in the flow of the page. Set the background image as relative so as the div knows how big it must be. Set the overlay as absolute, which will be relative to the upper-left edge of the first image.
The same one you'd use in HTML. When you img in a React component, the the src prop needs to be point at something that the server can serve.
Positioning Text Over the Image Element In order to write text over the img element, we need to: Have a container element that will hold the image and the text. Use img tag to display the background. Use any HTML element to display text over the image.
Here is an example:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
position: relative;
width: 50%;
}
.image {
opacity: 1;
display: block;
width: 100%;
height: auto;
transition: .5s ease;
backface-visibility: hidden;
}
.middle {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}
.container:hover .image {
opacity: 0.3;
}
.container:hover .middle {
opacity: 1;
}
.text {
background-color: #4CAF50;
color: white;
font-size: 16px;
padding: 16px 32px;
}
</style>
</head>
<body>
<div class="container">
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="image" style="width:100%">
<div class="middle">
<div class="text">John Doe</div>
</div>
</div>
</body>
</html>reference: w3schools
154
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
