What is the best way to incorporate an opaque overlay onto an image along with text overlay on top of the image?

I'm struggling to overlay an opaque layer above an image with responsive text on top of it. I want the opaque layer to be positioned above the image but below the text, and not appear when hovering over the image.

You can view my test page here:

I attempted to add a layer div, but I am having trouble achieving the desired result.

Additionally, I am having difficulty aligning the orange button correctly with the right side of the image. It seems to display inconsistently in Chrome and Safari.

Any assistance would be greatly appreciated!

This is the code I have so far:

.containerbox {
  position: relative;
  color: white;
}

.top-left {
  position: absolute;
  top: 8%;
  left: 0;
  color: #000;
  font-weight: 800;
  background-color: #a79f9f;
  padding: 6px 40px;
}

.bottom-right {
  position: absolute;
  bottom: 5%;
  right: 17.5%;
  color: #000;
  font-weight: 800;
  background: #de9104;
  font-size: 14px;
  padding: 4px 3%;
}

.bottom-right a {
  color: white;
}
<div class="containerbox">
  <img src="https://www.gorgeous-geek.com/wp-content/uploads/Laptop-on-desk-web-design.jpg" style="border: 1px solid #ececec;" alt="Laptop" style="width:100%;">
  <div class="top-left">Top Left</div>
  <div class="bottom-right"><a href="http://www.gorgeous-geek.com/thank-you-3/" rel="noopener noreferrer" target="_blank">Read more</a></div>
</div>
</div>

htmlcss

Answer №1

If you're interested in adding an image filter, here's a simple example for you to implement. As for the positioning of the read more button, the desired outcome is unclear.

.containerbox {
  position: relative;
}

.containerbox img {
  border: 1px solid #ececec;
  width: 100%;
  filter: opacity(50%);
  transition: filter .5s ease-out;
}

.containerbox:hover img {
  filter: opacity(100%);
}

.top-left {
  position: absolute;
  top: 8%;
  left: 0;
  color: #000;
  font-weight: 800;
  background-color: #a79f9f;
  padding: 6px 40px;
}

.bottom-right {
  position: absolute;
  bottom: 5%;
  right: 17.5%;
  color: #000;
  font-weight: 800;
  background: #de9104;
  font-size: 14px;
  padding: 4px 3%;
}

.bottom-right a {
  color: white;
}
<div class="containerbox">
  <img src="https://www.gorgeous-geek.com/wp-content/uploads/Laptop-on-desk-web-design.jpg" alt="Laptop">
  <div class="top-left">Top Left</div>
  <div class="bottom-right">
    <a href="http://www.gorgeous-geek.com/thank-you-3/" rel="noopener noreferrer" target="_blank">Read more</a>
  </div>
</div>

Update

.containerbox {
  position: relative;
}

.containerbox img {
  border: 1px solid #ececec;
  width: 100%;
}

.overlay {
  position: absolute;
  background: linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%));
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(59%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0.65)));
  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%);
  z-index: 1;
  height:100%;  
  top: 0;
  left: 0;
  width: 100%;
  opacity: 100;
  transition: opacity .5s ease-out;
}

.containerbox:hover .overlay {
  opacity: 0;
}

.top-left {
  position: absolute;
  top: 8%;
  left: 0;
  color: #000;
  font-weight: 800;
  background-color: #a79f9f;
  padding: 6px 40px;
  z-index: 2;
}

.bottom-right {
  position: absolute;
  bottom: 5%;
  right: 0;
  color: #000;
  font-weight: 800;
  background: #de9104;
  font-size: 14px;
  padding: 4px 3%;
  z-index: 2;
}

.bottom-right a {
  color: white;
}
<div class="containerbox">
  <img src="https://www.gorgeous-geek.com/wp-content/uploads/Laptop-on-desk-web-design.jpg" alt="Laptop">
  <div class="overlay"></div>
  <div class="top-left">Top Left</div>
  <div class="bottom-right">
    <a href="http://www.gorgeous-geek.com/thank-you-3/" rel="noopener noreferrer" target="_blank">Read more</a>
  </div>
</div>

Answer №2

To have control over how elements are layered, you can make use of the z-index property:

The z-index property determines the stacking order of an element.

An element with a higher stack order will always appear in front of an element with a lower stack order.

Note: z-index functionality is only applicable to positioned elements (position: absolute, position: relative, position: fixed, or position: sticky).

Source

Below is an example where I have created an overlay using the :after pseudo-element of .containerbox, and assigned a z-index: 1 to that overlay. Then, for the elements that I want to display on top of the overlay, I gave them a z-index: 2:

.containerbox {
  position: relative;
  color: white;
}

.containerbox:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: white;
  opacity: .5;
  z-index: 1;
}

.top-left {
    position: absolute;
    top: 8%;
    left: 0;
    color: #000;
    font-weight: 800;
    background-color: #a79f9f;
    padding: 6px 40px;
    z-index: 2;
}

.bottom-right {
    position: absolute;
    bottom: 5%;
    right: 17.5%;
    color: #000;
    font-weight: 800;
    background: #de9104;
    font-size: 14px;
    padding: 4px 3%;
    z-index: 2;
}

.bottom-right a {
    color: white;
}
<div class="containerbox">
  <img src="https://www.gorgeous-geek.com/wp-content/uploads/Laptop-on-desk-web-design.jpg" style="border: 1px solid #ececec;" alt="Laptop" style="width:100%;">
  <div class="top-left">Top Left</div>
  <div class="bottom-right"><a href="http://www.gorgeous-geek.com/thank-you-3/" rel="noopener noreferrer" target="_blank">Read more</a></div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilize JavaScript conditions to dynamically apply styles within your web application

I am facing a challenge with managing two separate <style> tags that each contain a large number of styles and media queries. The issue is that one set of styles is intended for desktop users, while the other is meant for mobile users. When both se ...

javascripthtmlcss

Changing an HTML table into an array using JavaScript

Is it possible to transform an HTML table into a JavaScript array? <table id="cartGrid"> <thead> <tr> <th>Item Description</th> <th>Qty</th> <th>Unit Price</th> ...

javascriptjqueryhtmlarrayshtml-table

Active Arrow Link

I'm currently working on customizing the appearance of my WordPress site's categories sidebar by adding an arrow to the left side of the active link. After tweaking the CSS to achieve the desired behavior and making some color adjustments for te ...

phpcsswordpresshtml-listsnav

Can beautifulsoup handle scraping a "dynamic webpage"?

I am exploring the use of beautifulsoup for web scraping, despite my lack of theoretical knowledge about webpages. I believe I have grasped the basics and will try my best to articulate my question. By a dynamic webpage, I mean a site that changes its HTM ...

pythonhtmlseleniumbeautifulsoup

Resolving Anchor Problems in PHP

I'm struggling with a line of code and need some help: echo "<td>"<a href="userdetails.php?".$row[username].">View Details</a></td>"; When I try to create the link on a page, I want it to be in the format userdetails.php?USER ...

phphtmlanchor

Using jQuery and Ajax to fade in content after all images and other assets have finished loading

I've encountered an issue with loading pages via ajax for users with custom URLs. For example, a profile is usually found at http://example.com/users/Dan, but if a user has a custom URL like http://example.com/DansCustomURL, I need to fetch their desi ...

javascriptjqueryhtmlajax

What is the process for including a static file on an http server?

Looking to create a chatroom using node.js. Utilizing the socket.io template for this project. var app = require('express')(); var http = require('http').Server(app); var io = require('socket.io')(http); var fs = require(&ap ...

javascripthtmlnode.jsexpress

Looking to achieve a stretch-auto-auto column layout in Bootstrap 4 - how can this be done?

Essentially, I am looking for something similar to this: https://i.sstatic.net/ss3Ir.png Can this layout be achieved using columns instead of floats? <div class="clearfix"> <div class="float-left"><button class="rounded btn btn-outline ...

htmlcsstwitter-bootstrapbootstrap-4

Display or conceal elements based on the screen size using Bootstrap 3 classes

While this may seem straightforward for some, the reality is quite different. I have two images that need to be displayed based on screen size. In my HTML code, I used classes like hidden-md, hidden-sm, and hidden-xs assuming they would only show on larg ...

htmlcsstwitter-bootstrap

Switch up image origin when image reaches screen boundary

I am trying to create a DVD screensaver with changing images each time it hits the edge, but I can't seem to get it to work. I've attempted using the code snippet below: var img = document.getElementById("myImage"); img.src = 'img/new-image. ...

javascripthtmlcss

How to Condense an Element Using Position: Absolute

https://i.sstatic.net/GMUss.png I'm attempting to create functionality where the "Open Chat" button displays an Absolute positioned div, then hides it when clicked again. I experimented with using the react-collapse component, but encountered issues ...

javascripthtmlcssreactjs

The pointer-events attribute seems to be inactive and not functioning as expected

I recently implemented a design feature on my website where I created a transparent div at the bottom of the page to overlay a fixed div. The idea was for the fixed div to be revealed as the user scrolled down, but unfortunately, it seems that the click ev ...

csshtmlpointer-events

What is the best way to prevent handleSubmit from triggering a re-render when moved to a different

Just started experimenting with React and ran into an issue that I can't seem to find a solution for anywhere. I have a basic search form that interacts with an API. If an invalid value is returned, it displays an H3 element with an error message lik ...

javascripthtmlreactjsforms

Animating with React using the animationDelay style does not produce the desired effect

Is there a way to apply an animation to each letter in a word individually when hovering over the word? I want the animation to affect each letter with an increasing delay, rather than all at once. For example, if scaling each letter by 1.1 is the animatio ...

javascriptcssreactjs

Create collapsible horizontal submenus in Bootstrap for mobile devices

I created a modal specifically for mobile users that displays when they access the site. It features various categories and nested menus for easy navigation. <!-- Modal --> <div class="modal fade" id="exampleModalCenter" t ...

htmltwitter-bootstrapbootstrap-5

Using the ol tag in Google Chrome browser

I'm dealing with an issue regarding a simple ol list in a div: <div class="one">Title<hr width="200px"> <ol> <li>One</li> <li>Two</li> <li>Three</li> </ol> </div> Here's the CSS ...

htmlcssgoogle-chrome

Steps for adding information to a sub tag within an XML document

Imagine having this example tag <root> <foo> </foo> </root> with the following html form <form action="foo.php method="post"> <input type="text" name="something"> <input type=" ...

phphtmlxml

Guide to setting a dynamic print style without affecting the screen media

In my report, there is a details section below. The screen provides instructions to view the details with a button that toggles the list's visibility. When printing the report, I only want the instructions to show if the list is visible. If the list ...

javascriptjquerycss

Switching Atom's Markdown preview theme

I'm exploring ways to customize the theme of the Markdown preview in Atom through cascading stylesheet (CSS) files. Currently, I have the markdown-preview-plus package installed. ...

cssmarkdownatom-editor

Guide to turning off the Facebook iframe page plugin

I am facing a challenge with embedding a facebook iframe on my website. I want to disable it once the screen width reaches a specific point, but I am struggling to make the iframe disappear properly. Here is how I have attempted to implement this: window.o ...

javascripthtmlcss