Hey there, I'm having trouble finding the right CSS to create an overlay on my featured image that will make my title stand out more. Does anyone have any suggestions on how to achieve this effect for my website www.quinstudio.nl/gallery?
? {
background: #000;
opacity: .1;
}
There are a few approaches you could take to achieve this effect. The end result will be the same regardless of which method you choose; it all depends on what fits best with your current markup. The first option is slightly simpler as it doesn't involve adding an empty div for the color overlay.
Option 1: Set the background color to opaque and make the image partially transparent.
.image-wrapper {
display: inline-block;
background: #0cd;
/* This line is necessary for centering the h1 below. */
position: relative;
}
.image-wrapper img {
opacity: 0.5;
display: block;
}
.image-wrapper h1 {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
margin: auto;
color: #fff;
}<div class="image-wrapper">
<img src="https://loremflickr.com/320/240" alt="Kitten">
<h1>Kitty!</h1>
</div>Option 2: Make the image opaque and add a partially transparent overlay on top of it.
.image-wrapper {
display: inline-block;
position: relative;
}
.image-wrapper img {
display: block;
}
.image-overlay {
background: #000;
opacity: 0.5;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 2;
}
.image-wrapper h1 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
z-index: 3;
}<div class="image-wrapper">
<img src="https://loremflickr.com/320/240" alt="Kitty!">
<div class="image-overlay"></div>
<h1>Kitty?</h1>
</div>Although @jack provided a solid answer, I have an alternative solution that avoids using an <img> tag by utilizing the :after pseudo-element.
This method allows for applying a CSS background image to the container and creating a simulated element with the color overlay:
.container {
background: url(https://loremflickr.com/320/240);
width: 320px;
height: 240px;
position: relative;
}
.overlay > * {
z-index: 1;
position: relative;
color: #fff;
}
.overlay:after {
content: "";
background: #0095ee;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: .65;
}<div class="overlay container">
<h1>Title</h1>
</div>Your situation may require a different approach. You can adjust the image opacity and introduce a black background to its parent container. Consider implementing the following:
.edgt-justified-layout .edgt-ni-inner .edgt-ni-image-holder .edgt-post-image img {
opacity: .75;
}
.edgt-justified-layout .edgt-ni-inner .edgt-ni-image-holder .edgt-post-image {
background: #000;
}
This adjustment will reduce the image opacity (resulting in a "whiter" appearance), allowing you to add a black background (or any desired color) to the parent container to create a darker effect instead.
After updating my MUI app to the latest npm packages version, specifically upgrading x-data-grid from 5.17.9 to 7.2.0, I encountered an issue. In my application, I utilize a grid where certain columns are populated using the renderCell property: const cel ...
Currently experimenting with the latest version of fullcalendar 5.4.0. I have integrated the calendar into a bootstrap 4 web page that features a fixed navigation bar at the top. The issue arises when attempting to set stickyHeaderDates, aiming to keep th ...
For the past few days, the wp_head() function has not been working properly. The main site is experiencing issues with loading Jquery and NextGen gallery is also unable to detect this function, even though it is present in the header file. I have attempte ...
I have a unique setup on my Wordpress page template. The content from the parent template is displayed first, followed by the content of child templates, including featured images. I want the content to appear in the container class, while the featured ima ...
Introduction: My current project involves managing interns, and I am focusing on the employee side. Employees have the ability to add, edit, and delete interns through modal popups. Strategy: To avoid unnecessary repetition of code, I decided to create a ...
I'm in the process of customizing my WordPress plugin and seem to be struggling with styling the radio buttons. For reference, you can find the code snippet here: https://jsfiddle.net/cd3wagvh/ The goal is to conceal the radio buttons and modify the ...
I am facing an issue with two divs that are wrapped inside a container div. The bottom div contains a dynamically filled table, which determines the overall width of all the divs. On the top div, I want to display several small red blocks that need to tak ...
I'm currently working on developing a text content slideshow using only CSS. Here is the HTML/CSS code I have: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CSS text slideshow examp ...
Looking to incorporate a live countdown timer on my archive page/sliders for auction endings. Currently, I am using PHP only, but it's not live as the page needs refreshing. So, I believe JavaScript would be the best solution. The code in my function ...
I recently set up a django backend website and attempted to incorporate CSS in my HTML using the following code snippet. {% load static %} <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-wid ...
Is there a way to toggle the bottom property of a div when clicking its child anchor tag? <div class="nav" :class="{ 'full-width': isFullWidth }"> <a class="toggle-button" @click="toggleNav"><i class="fa fa-angle-down">< ...
I'm trying to add a stagger effect to the fade-in animations of images within a gallery. After looking over my code, I believe the issue lies in how I am setting the animation-delay in the CSS selector. I am not sure if SCSS is supported in this snipp ...
Describing my issue might take some effort, so please be patient. In a WordPress plugin, I have a function that fills a specific page. Within this function, there is a shortcode to access another plugin. This other plugin generates a calendar on the page ...
When I hover over an li-element, I want to apply borders at the top and bottom. Here's the code snippet: #overview li:hover { background: rgb(31, 31, 31); border-top: 1px solid white; border-bottom: 1px solid white; } Check out this JSFi ...
Is there a way to achieve a 180° rotation of the caret in a dropdown menu upon clicking it, creating the illusion of an animation? I would prefer to accomplish this using CSS only, without the need for JavaScript, but I am open to any suggestions. .se ...
Currently, I am working on building an app using Bootstrap and AngularJS. I have integrated a Bootstrap modal popup for the content while other pages are loaded into ng-view. The issue I am facing is that when the content displayed in ng-view contains the ...
Currently, I am a beginner in the realm of JavaScript and I am trying to build a todo-style application. So far, I have successfully managed to create, display, and delete items from an array. However, I am facing challenges when it comes to editing these ...
I recently incorporated Bootstrap into my project, but I've encountered an issue with the fixed heading sizes. I'm attempting to modify the font size of my project, especially because the h1 and h2 text appears overly large on mobile devices. Str ...
Working on the Wordpress Avenue theme, I have a task to incorporate a Timeline jQuery into my project. The jQuery consists of 4 main files: 1. styletime.css 2. modernizrtime.js 3. http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js 4. main ...
My blog on my hosting server is experiencing issues due to exceeding the maximum number of server queries per hour. This results in my account being shut down, making my blog useless. Even though I have a significant number of visitors and am using Super ...