Editor’s note: This article was updated by Shalitha Suranga on 9 January 2024 to discuss practical use cases for CSS image overlays, add examples of image overlays using the CSS grid layout feature, demonstrate how to make image overlays more responsive and accessible, add a comparison table for the various strategies shown in this tutorial, and more.
Overlays are effects used to create an additional layer on top of images. Their purpose could be for aesthetics or to improve text readability, especially for people with impaired vision.
In this guide, I will show you how to apply overlays nicely on both background images and regular <img> elements in CSS with various mouseover effects and animations. Also, I’ll explain how to create better responsive overlays with media queries and advanced overlay groups with CSS grid.
We usually create overlays with CSS behind text, icons, or images that get rendered on top of an image or a generated background like a gradient fill. In modern web app development, we often implement image overlays in:
Image overlays are also extensively used in popular social media platforms. For example, when displaying some preview images for a large photo gallery, the last visible image of the gallery will often have an overlay displaying a photo count that encourages the user to view the remaining photos.
There are several approaches and transition effects that you can use to create a UI/UX-friendly image overlay using HTML and CSS. Let’s take a look now — you can also jump ahead to the comparison table for the various techniques we’ll cover in this tutorial.
Techniques for creating overlays on images involve understanding CSS layout features like relative and absolute positioning. When working with regular <img> elements, this layout feature is handy for placing a box element or another <img> element on top of the image as an overlay.
Let’s take a look at a quick example. The following HTML has an image and some heading text, both in a container li element:
<li class="image_wrapper">
<img src="https://source.unsplash.com/VWcPlbHglYc" alt="" />
<div class="overlay">
<h3>Position absolute place this heading on top of the image</h3>
</div>
</li>
Naturally, every element is a box laid out in the order in which they appear in the source code. For instance, the <img> element in the above code will display before the heading text.
Now, in a situation where we want the text to appear on top of the image, we will alter the default positioning of the text element and its container by overriding their normal document flow using the CSS position property like so:
.image_wrapper {
position: relative;
}
.overlay {
position: absolute;
left: 0;
top: 0;
}
By adding position: absolute; alongside the left and top declarations on the text container element, we can move the heading text out of the document flow to a position relative to the parent wrapper, like so:
Using this positioning strategy, we can bring any HTML element in front of an image. Let’s start implementing image overlays.
<img> elementsOne thing we can see in the image above is that the text on it is not readable and, therefore, not good for the user’s experience. To improve user satisfaction, we will add an overlay to ensure text readability.
Starting from the next section, we will create three different image overlays with various effects:
You can see the project on Codepen here:
See the Pen Image Overlay CSS Effects For Img Elements by Ibadehin Mojeed (@ibaslogic)
on CodePen.
Text overlay can be as simple as adding a background color behind the text. Let’s take a look at the following markup:
<li class="image_wrapper">
<img src="https://source.unsplash.com/VWcPlbHglYc" alt="" />
<div class="overlay overlay_0">
<h3>10% OFF</h3>
</div>
</li>
We can position the text over the image the same way we did in the first example, then add a background color:
.image_wrapper {
position: relative;
}
img {
display: block;
object-fit: cover;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
}
.overlay_0 {
left: 0;
top: 0;
padding: .5rem;
margin: 4px;
background: #f4208f;
}
The output now looks like so:
This overlay effect is common on ecommerce websites for promotional labels and other similar uses.
Another popular overlay style features a title or image caption on top of a translucent background. Consider the following markup:
<li class="image_wrapper">
<img src="https://source.unsplash.com/VWcPlbHglYc" alt="" />
<div class="overlay overlay_1">
<h3>Image title</h3>
</div>
</li>
With position: absolute;, left: 0;, bottom: 0; declarations on the overlay, we can place the overlay text at the bottom of the image:
.overlay {
position: absolute;
background: rgba(57, 57, 57, 0.5);
/* center overlay text */
display: flex;
align-items: center;
justify-content: center;
}
.overlay_1 {
left: 0;
bottom: 0;
width: 100%;
padding: 1rem;
}
We’ve also applied a semi-transparent background on the overlay. See the output below:
For aesthetics, we also applied flexbox properties to place the image caption in the center.
The examples above are ideal when focusing on both the image and overlaid text. However, if we need to emphasize the overlaid content over the background image, we can stretch the overlay to cover the entire image. Let’s see how to do this next.
Consider the following markup:
Learn more →<li class="image_wrapper">
<img src="https://source.unsplash.com/VWcPlbHglYc" alt="" />
<div class="overlay overlay_2">
<h3>Image title</h3>
</div>
</li>
On the overlay element, we will use the top, right, bottom, and left declarations to stretch the overlay, so it covers the entire image:
.overlay_2 {
top: 0;
right: 0;
left: 0;
bottom: 0;
}
We can also use one declaration as a shorthand to replace the above CSS rules:
.overlay_2 {
inset: 0;
}
The value assigned to the inset will be applied to all edges. The output should now look like so:
Remember, in the previous example, we applied flexbox properties on the overlay to place the text in the center. Since the translucent overlay now covers the whole image, the text is centered both vertically and horizontally over the whole image as well.
Let’s learn how to display an overlay only when the user hovers over the image. We will also add slide and zoom effects. Here are the four techniques we’ll cover:
Let’s get started.
For this example, we will be using the following HTML markup:
<li class="image_wrapper">
<img src="https://source.unsplash.com/VWcPlbHglYc" alt="" />
<div class="overlay overlay_3">
<h3>Image title</h3>
</div>
</li>
In addition to the usual overlay style declarations, the following CSS rules also include transform, transition, and backdrop-filter properties:
.overlay_3 {
left: 0;
bottom: 0;
width: 100%;
padding: 1rem;
transform: scale(0);
transition: all .3s ease-in-out;
backdrop-filter: blur(8px) brightness(80%);
}
.image_wrapper:hover .overlay_3 {
transform: scale(1);
}
Changing the transform: scale() value from 0 to 1 on hover provides the visual effect of the overlay text zooming into view. Meanwhile, the backdrop-filter lets us apply a blur effect behind the overlay to increase text visibility further. Finally, the transition provides a smooth hover effect.
The GIF below demonstrates the zoom effect on hover:
We are using the following HTML markup for this example:
<li class="image_wrapper">
<img src="https://source.unsplash.com/VWcPlbHglYc" alt="" />
<div class="overlay overlay_4">
<h3>Image title</h3>
</div>
</li>
With the CSS rule below, the bottom and height properties let us achieve a slide-down effect when we hover over the image:
.overlay_4 {
left: 0;
bottom: 100%;
height: 0;
width: 100%;
overflow: hidden;
backdrop-filter: blur(8px) brightness(80%);
transition: all .3s ease-in-out;
}
.image_wrapper:hover .overlay_4 {
bottom: 0;
height: 100%;
}
The GIF below demonstrates the slide effects on hover:
Similar to the text overlay, we can also have icons appear over our images. Below, we will create an overlay with a Font Awesome icon that appears when we hover over an image.
We will be using the following HTML markup for this example:
<li class="image_wrapper">
<img src="https://source.unsplash.com/VWcPlbHglYc" alt="" />
<div class="overlay overlay_5">
<a href="#" class="icon">
<i class="fa-solid fa-camera"></i>
</a>
</div>
</li>
In the CSS file, we will import the font-awesome CDN and then apply the CSS rules like so:
@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css);
/* ... */
.overlay_5 {
inset: 0;
transform: scale(0);
transition: all .3s ease-in-out;
}
.image_wrapper:hover .overlay_5 {
transform: scale(1);
}
.icon i {
border-radius: 50%;
font-size: 40px;
color: #8c9e54;
width: 70px;
height: 70px;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
}
As you can see, the CSS implementation for an icon overlay is similar to the text overlay with the zoom effect. The GIF below demonstrates the zoom effects on hover:
Like the icon overlay, we can also have a proper image appear over another image on hover. We can find a use case for this implementation on ecommerce websites where a variable product image is displayed when we hover over a product like so:
We will be using the following HTML markup for this example:
<div class="product-item">
<div class="product-image">
<a href="#">
<img src="https://source.unsplash.com/GtOo17K-vTg" width="600" height="720">
</a>
<div class="hover-img">
<a href="#">
<img src="https://source.unsplash.com/3_XeNGVbTQA" width="600" height="720">
</a>
</div>
</div>
<h3>Product title</h3>
<span>$100</span>
</div>
See the complete code on Codepen.
The approach for creating overlay is the same regardless of whether we want a text, icon, or image overlay.
In the HTML markup above, we added both images in the same product-image element container.
We will give this container a position: relative; property. Then, we will give the overlaid image container — i.e hover-img — a position: absolute; while also positioning it using inset: 0; or the equivalent top, right, bottom, and left.
The CSS style rules will look like so:
.product-item {
text-align: center;
width: 350px;
}
.product-image {
position: relative;
overflow: hidden;
}
img {
max-width: 100%;
height: auto;
vertical-align: middle;
}
.hover-img {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity .5s ease, transform 2s cubic-bezier(0,0,.44,1.18);
}
.product-image:hover .hover-img {
opacity: 1;
transform: scale(1.12);
}
After positioning the overlay image over the primary image, we added opacity: 0; to hide it so it only displays on hover with the opacity: 1;. Applying transform: scale(1.12); on hover provides the visual effect of the overlay image zooming into view. Meanwhile, the transition property provides a smooth hover effect.
Unlike <img> elements, an image included as a background element will automatically live behind the containing text or icons. This makes it easy to apply overlays, as we’ll see in a moment.
We will create different background image overlays with various effects, like:
background-blend-mode propertylinear-gradient() CSS functionmix-blend-mode CSS propertyYou can see the project on Codepen:
See the Pen CSS Background Image Overlays by Ibadehin Mojeed (@ibaslogic)
on CodePen.
We’ll be starting with the following HTML markup for this example:
<section class="bg_image_1">
<div class="content">
<h2>Hero title</h2>
<p>Hero description here</p>
</div>
</section>
On the <section> container element, we will add a background image using CSS:
.bg_image_1 {
background-image: url(https://source.unsplash.com/VWcPlbHglYc);
background-size: cover;
background-position: center;
}
The result should look like so:
For aesthetics, we have also applied CSS grid properties to place the image content in the center.
As expected, the text overlay is not so readable.
Let’s try to improve the visibility of the text overlay by applying a lower opacity on the background element, like so:
.bg_image_1 {
/* ... */
opacity: .3;
}
The above addition will affect both the image and the containing text overlay, which is even worse:
To control the image’s opacity without affecting the text, let’s see a solution using a pseudo-element.
The well-known ::after selector helps us create a pseudo-element that gets rendered as the last child of the selected element.
Let’s see an example where we add the background image using .bg-image_1::after and control its opacity without touching the entire .bg-image_1 element. We’re then able to control the background image’s opacity properly by decoupling the image and the text content in CSS definitions:
.bg_image_1 {
position: relative;
}
.bg_image_1::after {
content: '';
position: absolute;
inset: 0;
z-index: -1;
opacity: .4;
background: pink;
background-image: url(https://source.unsplash.com/VWcPlbHglYc);
background-size: cover;
background-position: center;
}
With the inset property, the background is placed relative to the parent element and appears over the text content. We then apply a negative z-index to change the stacking order and move the background image behind the text.
Then, with the opacity property on the pseudo-element, we can reduce the contrast of the background image:
Now, as we can see in the image, we have increased the visibility of the text overlay.
background-blend-mode propertyThe pseudo-element approach used above can be a bit complex. With the background-blend-mode CSS property, we can apply an overlay on the background image with a small line of code. This property will blend the background image with the element’s background color.
We will be using the following HTML markup for this example:
<section class="bg_image_2">
<div class="content">
<h2>Hero title</h2>
<p>Hero description here</p>
</div>
</section>
Then, specify the blending mode of our background image to be multiply:
.bg_image_2 {
background-color: steelblue;
background-image: url(https://source.unsplash.com/VWcPlbHglYc);
background-size: cover;
background-position: center;
background-blend-mode: multiply;
color: #fff;
}
The result should now look like so:
The overlay effect, as seen above, is due to blending the background image with the element’s background color. The final blue background image was generated by multiplying 0...1 range pixel values of the plain steelblue background color and the original background image since we used the multiply blending mode.
The background-blend-mode property supports several pixel-level blending algorithms, including screen, overlay, darken, and others. You can browse all supported blend modes from the official MDN documentation.
linear-gradient() CSS functionWith the linear-gradient() CSS function, we can achieve a stylish background overlay with just one line of code. It is simple to implement and, like the blend mode approach, eliminates the need to use the pseudo-selector.
We will be using the following HTML markup for this example:
<section class="bg_image_3">
<div class="content">
<h2>Hero title</h2>
<p>Hero description here</p>
</div>
</section>
Then, we will add a linear gradient on the background image alongside the background URL:
.bg_image_3 {
background-image: linear-gradient(rgba(70, 130, 180, .8), rgba(178, 34, 34, .8)), url(https://source.unsplash.com/VWcPlbHglYc);
background-size: cover;
background-position: center;
color: #fff;
}
The result should look like so:
With linear-gradient, we have progressively transitioned between two semi-transparent colors to achieve a gradient overlay effect.
mix-blend-mode CSS propertyLike the background-blend-mode property, the mix-blend-mode property lets us blend the element’s content with its parent background.
Let’s consider the following markup:
<section class="bg_image_4">
<div class="content content_4">
<h2>Hero title</h2>
<p>Hero description here</p>
</div>
</section>
With the following CSS, we have added a background image on the section container element and also applied a pseudo-selector to overlap a background color overlay:
.bg_image_4 {
background-image: url(https://source.unsplash.com/VWcPlbHglYc);
background-size: cover;
background-position: center;
color: #fff;
}
.content_4 {
position: relative;
}
.content_4::after {
content: '';
position: absolute;
background: #074f57;
inset: 0;
z-index: -1;
}
If we take a look at the result, we will have something like the following:
With the negative z-index applied on the overlay, we may expect the background color to appear behind the text. However, it goes far back behind the background image.
If we temporarily remove the background image, we should see the background color:
.bg_image_4 {
/* ... */
background-size: cover;
background-position: center;
color: #fff;
}
The result of removing the background image:
To ensure the background color goes behind the text and not the parent background image, we will use the CSS isolation property on the background element to create a new stacking context.
Let’s return the background image and add the isolation property:
.bg_image_4 {
background-image: url(https://source.unsplash.com/VWcPlbHglYc);
background-size: cover;
background-position: center;
color: #fff;
isolation: isolate;
}
At this point, the background image now lives behind the background color.
Now, we can apply the mix-blend-mode on the pseudo selector to blend the background color with its parent background image:
.content_4::after {
/* ... */
mix-blend-mode: multiply;
}
The result should now look like so:
Now we have a nice background image overlay where the text is readable. You can try using different blend modes with mix-blend-mode on your own, as explained previously in the background-blend-mode section.
In this article’s previous examples, we created only one overlay at once. This method allowed us to easily position the overlay with traditional absolute positioning or by centering the whole content.
However, while handling certain design specifications, we may sometimes have to create multiple overlays over a background image. We might even have to design overlapping images over background images.
It’s possible to satisfy these requirements productively with the modern CSS grid layout. Let’s explore the following:
Imagine that you need to create four overlays for a background image:
We can create these overlays using a 4Ă—2 grid over a background image. Look at the following markup:
<div class="grid">
<div class="bar bar_top"></div>
<div class="bar bar_bottom"></div>
<div class="words">
<h3>Lorem ipsum dolor sit amet</h3>
</div>
<div class="logo">
<h3>Lorem<em>Ipsum</em></h3>
</div>
</div>
Now, we can use the following CSS to style the above HTML structure:
.grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 1fr 2fr 2fr 1fr;
background-color: steelblue;
background-image: url(https://source.unsplash.com/VWcPlbHglYc);
background-size: cover;
background-position: center;
background-blend-mode: multiply;
height: 100vh;
}
.grid .bar {
background-color: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(10px);
}
.grid .bar_top {
grid-column: 1 / span 2;
grid-row: 1;
}
.grid .bar_bottom {
grid-column: 1 / span 2;
grid-row: 4;
}
.grid .words {
grid-column: 1 / span 2;
grid-row: 3;
display: grid;
align-items: end;
justify-content: center;
}
.grid .words h3 {
background-color: rgba(0, 0, 0, 0.7);
display: inline-block;
padding: 4px 12px;
margin: 0 0 12px 0;
color: white;
font-size: calc(1vh + 1vw + 10px);
}
.grid .logo {
grid-column: 2;
grid-row: 2;
text-align: right;
}
.grid .logo h3 {
background-color: rgba(0, 0, 0, 0.7);
display: inline-block;
padding: 6px;
color: white;
border-radius: 6px;
margin: 12px;
font-size: calc(1vh + 1vw + 16px);
}
The above CSS snippet styles top and bottom bars as see-through segments with a backdrop filter and low background opacity. Also, it positions all overlay items as mentioned in the hypothetical design requirements, as shown in the following CodePen:
See the Pen Background Image With Multiple Overlays Using CSS by Shalitha Suranga (@shalithasuranga)
on CodePen.
Using this grid-based approach, you can create multiple, complex overlays over background images.
Today’s modern web designers can use CSS to create graphical designs that past designers solved using Adobe Photoshop. For example, in the past, we created stacked overlapping images using image processing software. Now, a few lines of CSS will accomplish this professionally.
Imagine that we need to create two overlapping images in front of a background image. We can handle these layouts with the CSS grid layout feature without using traditional absolute positioning.
Look at the following markup:
<div class="grid">
<div class="img img_top">
<img src="https://source.unsplash.com/zeFy-oCUhV8">
</div>
<div class="img img_bottom">
<img src="https://source.unsplash.com/EX9XiF7ccsg">
</div>
</div>
Without CSS, these two images just get rendered one after the other. We need to add the following CSS snippet to make those two images overlap on top of the background image of the .grid element:
.grid {
display: grid;
grid-template-columns: repeat(16, 1fr);
grid-template-rows: 1fr;
background-color: steelblue;
background-image: url(https://source.unsplash.com/VWcPlbHglYc);
background-position: center;
background-size: cover;
background-blend-mode: multiply;
height: auto;
}
.grid .img_bottom {
grid-column: 6 / span 4;
grid-row: 1;
padding: 20% 0 20% 0;
}
.grid .img_top {
grid-column: 8 / span 4;
grid-row: 1;
padding: 40% 0 20% 0;
z-index: 1;
}
.grid .img img {
width: 100%;
box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.4);
border-radius: 12px;
}
We created a 1Ă—16 grid in the above CSS code snippet to hold two images. The top image is rendered from the eighth column, and the second one is rendered from the sixth column. Since the second image spans four columns, it overlaps the first image.
Here, we set the top image order using z-index: 1. In addition, we control the vertical positions of both images using CSS padding.
If we combine this CSS snippet with the above markup, we’ll get the following result:
See the Pen Overlapping Images Using CSS Image Overlays by Shalitha Suranga (@shalithasuranga)
on CodePen.
You can add more images using different overlapped column positions with the grid-column CSS property. This technique also works with any HTML element, not just images. So, for example, you can overlap text content with an image, which looks great for designing a services section of a modern website.
Every overlay element we built in this guide has a dynamic width so that it will adapt to any screen size properly. Also, none of the overlay contents are complex, so they will render in a UI/UX-friendly manner if you make the CodePen window smaller.
However, modern responsive design is not just about using automatic width for website components. A better responsive design system typically switches optimal layouts based on device screen widths.
For example, imagine that you need to display overlaid content with an inline action button over a background image closer to the right side of the image. This two-column layout is not mobile-friendly, since a normal mobile screen is viewed in portrait mode, or vertically.
To solve this problem, we can stack the image and content vertically on mobile screens. Look at the following markup:
<header>
<div>
<h1>Lorem ipsum dolor sit amet</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tempor sed purus in tincidunt. <br/>Quisque a urna dapibus, lacinia mi et, condimentum dui
</p>
<button>Lorem ipsum</button>
</div>
</header>
Here, we created a website header using the standard <header> tag and added overlay content with <div>. Let’s add some styles with the following CSS code:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background: #333;
}
header {
display: flex;
justify-content: flex-end;
background-color: steelblue;
background-image: url(https://source.unsplash.com/VWcPlbHglYc);
background-size: cover;
background-position: center;
background-blend-mode: multiply;
overflow: hidden;
}
header > div {
width: 50%;
background-color: rgba(0, 0, 0, 0.5);
padding: 48px;
backdrop-filter: blur(4px);
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.4);
}
header > div h1, header > div p {
margin-bottom: 20px;
color: #eee;
}
header > div button {
padding: 12px 24px;
font-size: 18px;
border: none;
margin-top: 20px;
}
This will look great on normal desktop views, but smaller screens fail to render it properly, as demonstrated below:
We can switch the layout to a mobile-friendly version with the following media query:
@media screen and (max-width: 10px) {
header > div {
flex: 1;
padding: 32px;
margin-top: 200px;
}
header > div button {
width: 100%;
}
}
Now, we can see a nice, responsive, mobile-friendly layout, as shown in the following preview:
You can access the complete source code and see a live preview of this responsive example in this CodePen.
Here, we’ve demonstrated only one responsive breakpoint since this is a simple header section. For more complex layouts, you should implement multiple responsive breakpoints for smaller mobiles, medium-size mobiles, regular desktop screens, and wide-screen monitors.
Let’s compare the above overlay design techniques, considering their pros, cons, and use case examples:
| Design technique | Pros | Cons | Use case example |
|---|---|---|---|
| Simple CSS image overlay with text background color | Simple to implement and position the text segment properly by setting margins | Non-transparent background color is not a great visual effect for longer text | Displaying small labels (i.e., discounts, price, promotional text, etc.) on a production image |
| Translucent content overlay covering part of the image | Simple implementation to get a modern look. It’s possible to add box shadow effects for the overlay to improve aesthetics | Rendering more boxes with this overlay style add complexity since both overlay and content are visible always | Showing image details of the current photo in a digital photo gallery |
| Translucent content overlay covering the entire image | Overlay positioning is done with a single CSS line, inset: 0;. Visual improvements are possible with backdrop-filter | The image becomes less noticiable due to the extended overlay | Showing number of hidden photos on the last visible photo of a social media photo gallery |
| Image overlay displaying text/icon on hover with a transition effect (i.e., zoom, slide-in, fade, etc.) | Better visibility of both image and overlay content because there are two states | The user needs to mouse over on elements to see overlay content | Implementing a zoom icon for a product image thumbnail |
| Background image overlay with background effects | Possibility of implementing better futuristic visuals with filters and gradients | The image placement is done without an <img> tag, so the image becomes semantically less important (i.e., affects SEO, accessibility, etc.) | Creating a header section of a website |
| CSS grid-based image overlays | Offers an easy, productive way to create multiple overlays even with overlapped layers | Developers should use a grid-based positioning which is different from the traditional absolute positioning technique | Creating a video thumbnail overlays for video timing details, quick action buttons, etc, i.e., YouTube thumbnails. |
You can use the comparison table above to determine the best design strategy for overlays according to your web design project’s needs.
Creating image overlays is useful in various designs and scenarios. It is handy when creating a webpage hero section, responsive image galleries, and many other use cases. Knowing various UI/UX-friendly image overlay implementation methods is a must for every modern web developer.
This guide discussed how to create a nice overlay on the background images and regular <img> elements in CSS. We learned how to create advanced overlay designs with the modern CSS grid feature. We also discussed how to switch overlay layouts dynamically based on device screen sizes using responsive breakpoints.
Image overlays typically improve accessibility factors, but improper overlay styling can reduce your webpage’s existing accessibility score further. Make sure to use proper backdrop colors and filters to highlight content over background images. Also, use suitable semantic HTML in overlay content to support screen readers and SEO algorithms.
If you enjoyed this lesson, share it around the web. Lastly, we would love to hear which of the overlay solutions is your favorite. Let us know in the comment section.
As web frontends get increasingly complex, resource-greedy features demand more and more from the browser. If you’re interested in monitoring and tracking client-side CPU usage, memory usage, and more for all of your users in production, try LogRocket.
LogRocket is like a DVR for web and mobile apps, recording everything that happens in your web app, mobile app, or website. Instead of guessing why problems happen, you can aggregate and report on key frontend performance metrics, replay user sessions along with application state, log network requests, and automatically surface all errors.
Modernize how you debug web and mobile apps — start monitoring for free.
Hey there, want to help make our blog better?
Join LogRocket’s Content Advisory Board. You’ll help inform the type of content we create and get access to exclusive meetups, social accreditation, and swag.
Sign up now
Build scalable admin dashboards with Filament and Laravel using Form Builder, Notifications, and Actions for clean, interactive panels.
Break down the parts of a URL and explore APIs for working with them in JavaScript, parsing them, building query strings, checking their validity, etc.
In this guide, explore lazy loading and error loading as two techniques for fetching data in React apps.
Deno is a popular JavaScript runtime, and it recently launched version 2.0 with several new features, bug fixes, and improvements […]
2 Replies to "Guide to image overlays in CSS"
I used the same techniques, but still confused how to defer image as background. Thanks
Hi, what overlay effects do you want to achieve? If you are more specific, I will try to assist. Thanks.