I have a loading div that I display, and I want to have the text in the <h1> below the <img> and I can get it aligned in the middle horizontally, but I cant get it aligned below the <img> here is my HTML
<div id="loading">
<img id="loading-image" src="http://downgraf.com/wp-content/uploads/2014/09/01-progress.gif" alt="Loading..." />
<h1 id="loading_text">Loading...</h1>
</div>
And my CSS
#loading {
width: 100%;
height: 100%;
top: 0px;
left: 0px;
position: fixed;
display: block;
z-index: 99;
background: rgba(255, 255, 255, 0.5);
}
#loading-image {
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 100;
width:10%
}
#loading_text {
color:black;
text-align:center;
z-index: 101;
vertical-align:middle
}
And I have included a fiddle here: http://jsfiddle.net/myh5f13q/
So how can I get the <h1> centered horizontally and below the <img>?
Thanks
Remove all the positioning and give this way:
#loading {
display: block;
z-index: 99;
background: rgba(255, 255, 255, 0.5);
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
#loading-image {
width: 10%;
display: block;
margin: auto;
}
#loading_text {
color: black;
text-align: center;
z-index: 101;
vertical-align: middle
}
<div id="loading">
<img id="loading-image" src="http://downgraf.com/wp-content/uploads/2014/09/01-progress.gif" alt="Loading..." />
<h1 id="loading_text">Loading...</h1>
</div>
Preview
Full Screen
I would wrap the content in another <div> and use CSS transform and position absolute to centre both vertically and horizontally.
Source: https://css-tricks.com/centering-css-complete-guide/
#loading {
position: relative;
}
#loading-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div id="loading">
<div id="loading-content">
<img id="loading-image" src="http://downgraf.com/wp-content/uploads/2014/09/01-progress.gif" alt="Loading..." />
<h1 id="loading_text">Loading...</h1>
</div>
</div>
Add another container, and vertically center it within the #loading element.
http://jsfiddle.net/mblase75/gfv08q4z/
#loading {
width: 100%;
height: 100%;
left: 0px;
position: fixed;
display: block;
z-index: 99;
background: rgba(255, 255, 255, 0.5);
}
#loading-container {
position: relative;
top: 50%;
transform: translateY(-50%);
}
#loading-image {
display: block;
margin: auto;
width:10%
}
#loading_text {
color:black;
text-align:center;
z-index: 101;
vertical-align:middle
}
<div id="loading">
<div id="loading-container">
<img id="loading-image" src="http://downgraf.com/wp-content/uploads/2014/09/01-progress.gif" alt="Loading..." />
<h1 id="loading_text">Loading...</h1>
</div>
</div>
Related
I'm trying to make a modal using pure CSS and HTML. So far I have this
[id^=modal] {
display: none;
position: fixed;
top: 0;
left: 0;
}
[id^=modal]:target {
display: block;
}
input[type=checkbox] {
position: absolute;
clip: rect(0 0 0 0);
}
.popup {
width: 100%;
height: 100%;
z-index: 99999;
}
.popup__overlay {
position: fixed;
z-index: 1;
display: block;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: #000000b3;
}
.popup__wrapper {
position: fixed;
z-index: 9;
width: 80%;
max-width: 1200px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 8px;
padding: 58px 32px 32px 32px;
background: #fff;
}
.popup__close {
position: absolute;
top: 16px;
right: 26px;
}
Open modal 1
<div class="popup" id="modal1">
<a class="popup__overlay" href="#"></a>
<div class="popup__wrapper">
<a class="popup__close" href="#">Close icon here</a>
<p>POPUP 1 : CONTENT HERE</p>
</div>
</div>
The problem now is when I'm closing this modal, it's scrolling up. I think this is due to href="#". Is there any other way to close this modal using CSS that would not make it scroll up?
If it's not possible, how can I do it with as little javascript as possibe?
Instead of href = "#" use href = "#!". Your example is below:
[id^=modal] {
display: none;
position: fixed;
top: 0;
left: 0;
}
[id^=modal]:target {
display: block;
}
input[type=checkbox] {
position: absolute;
clip: rect(0 0 0 0);
}
.popup {
width: 100%;
height: 100%;
z-index: 99999;
}
.popup__overlay {
position: fixed;
z-index: 1;
display: block;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: #000000b3;
}
.popup__wrapper {
position: fixed;
z-index: 9;
width: 80%;
max-width: 1200px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 8px;
padding: 58px 32px 32px 32px;
background: #fff;
}
.popup__close {
position: absolute;
top: 16px;
right: 26px;
}
Open modal 1
<div class="popup" id="modal1">
<a class="popup__overlay" href="#!"></a>
<div class="popup__wrapper">
<a class="popup__close" href="#!">Close icon here</a>
<p>POPUP 1 : CONTENT HERE</p>
</div>
</div>
I'm creating a full page navigation shade for my site so that it's the same across all devices. At the moment I have two buttons, one for when the shade is in view and one for when it isn't. I'm wondering if it would be better to have one button always present so it can be animated? I'd be aiming for something like the squeeze animation here but I'm not sure how I'd go about animating that across the two buttons vs just one - or how you'd create it from scratch.
Here's what I'm working with;
const navButtons = document.querySelectorAll('button.nav-action');
const siteNav = document.querySelector('.site-nav');
function onClick(event) {
siteNav.classList.toggle('active');
}
navButtons.forEach(button => button.addEventListener('click', onClick));
.site-header {
height: 80px;
background-color: #FFFFFF;
display: inline-flex;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1;
box-shadow: 0px 0.5px 10px #000000;
}
.site-header-fill {
height: 80px;
}
.site-logo-container {
height: 60px;
margin-left: 20px;
margin-right: auto;
margin-top: 10px;
margin-bottom: 10px;
display: block;
float: left;
}
.site-logo {
height: 60px;
width: auto;
float: left;
}
.site-nav-action-container {
height: 50px;
width: 50px;
max-width: 50px;
margin-left: 10px;
margin-right: 10px;
margin-top: 15px;
margin-bottom: 15px;
display: block;
float: right;
text-align: right;
}
.site-nav {
height: 100%;
left: 0px;
position: fixed;
top: 0px;
width: 100%;
background: #3399ff;
z-index: 2;
display: none;
}
.site-nav.active {
display: block;
}
.site-nav-content {
width: 20%;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#media only screen and (max-width: 500px) {
.site-nav-content {
width: auto;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
}
.site-nav-pages {
text-align:center;
}
.nav-action {
height: 50px;
width: 50px;
}
<div class="site-header ">
<div class="site-logo-container">
<img class="site-logo" src="https://via.placeholder.com/1000x300" alt="Logo">
</div>
<div class="site-nav-action-container">
<button class="nav-action">
<p>☰</p>
</button>
</div>
</div>
<div class="site-nav">
<div class="site-nav-action-container">
<button class="nav-action">
<p>×</p>
</button>
</div>
<div class="site-nav-content">
<div class="site-nav-pages">
<p>Page 1</p>
<p>Page 2</p>
<p>Page 3</p>
<p>Page 4</p>
<p>Page 5</p>
</div>
</div>
</div>
At the moment the shade now functions to be visible or not based on button pressed but I wonder if having one button is the way to go or if placing the icon outside of a button would work best.
Ideally the hamburger would animate as the shade is revealed from the top but I'll work on that once a sensible approach to the button is sorted. Any help would be appreciated because I clearly don't know what I'm doing here.
Thanks in advance.
You can use for the ☰ to × effect. You can write all the line labels yourself. the first code snippet is an animation that I use a lot, and the second is the animation that I think you want. I installed both so you can use whatever you want to use.
const navButtons = document.querySelectorAll('button.nav-action');
const siteNav = document.querySelector('.site-nav');
function onClick(event) {
siteNav.classList.toggle('active');
}
navButtons.forEach(button => button.addEventListener('click', onClick));
const menuIcon = document.querySelector(".menu-icon");
menuIcon.addEventListener("click", () => {
menuIcon.classList.toggle("toggle")
siteNav.classList.toggle('active');
})
.site-header {
height: 80px;
background-color: #FFFFFF;
display: inline-flex;
position: fixed;
top: 0;
left: 0;
right: 0;
box-shadow: 0px 0.5px 10px #000000;
}
.site-header-fill {
height: 80px;
}
.site-logo-container {
height: 60px;
margin-left: 20px;
margin-right: auto;
margin-top: 10px;
margin-bottom: 10px;
display: block;
float: left;
}
.site-logo {
height: 60px;
width: auto;
float: left;
}
.site-nav-action-container {
height: 50px;
width: 50px;
max-width: 50px;
margin-left: 10px;
margin-right: 10px;
margin-top: 15px;
margin-bottom: 15px;
display: block;
float: right;
text-align: right;
}
.site-nav {
height: 100%;
left: 0px;
position: fixed;
top: 0px;
width: 100%;
background: #3399ff;
display: none;
}
.site-nav.active {
display: block;
}
.site-nav-content {
width: 20%;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#media only screen and (max-width: 500px) {
.site-nav-content {
width: auto;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
}
.site-nav-pages {
text-align: center;
}
/* Menu icon */
.menu-icon {
cursor: pointer;
position: absolute;
z-index: 1;
}
.menu-icon div {
width: 25px;
height: 3px;
background-color: black;
margin: 5px;
transition: all .4s ease;
}
.toggle .line1 {
transform: rotate(-45deg) translate(-5px, 6px);
}
.toggle .line2 {
opacity: 0;
}
.toggle .line3 {
transform: rotate(45deg) translate(-5px, -6px);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<div class="site-header ">
<div class="site-logo-container">
<img class="site-logo" src="https://via.placeholder.com/1000x300" alt="Logo">
</div>
<div class="site-nav-action-container">
<!-- Menu icon -->
<div class="menu-icon">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</div>
<div class="site-nav">
<div class="site-nav-content">
<div class="site-nav-pages">
<p>Page 1</p>
<p>Page 2</p>
<p>Page 3</p>
<p>Page 4</p>
<p>Page 5</p>
</div>
</div>
</div>
</body>
</html>
const navButtons = document.querySelectorAll('button.nav-action');
const siteNav = document.querySelector('.site-nav');
function onClick(event) {
siteNav.classList.toggle('active');
}
navButtons.forEach(button => button.addEventListener('click', onClick));
let icon = document.getElementById("nav-icon");
icon.addEventListener("click", () => {
icon.classList.toggle("open")
siteNav.classList.toggle('active');
})
.site-header {
height: 80px;
background-color: #FFFFFF;
display: inline-flex;
position: fixed;
top: 0;
left: 0;
right: 0;
box-shadow: 0px 0.5px 10px #000000;
}
.site-header-fill {
height: 80px;
}
.site-logo-container {
height: 60px;
margin-left: 20px;
margin-right: auto;
margin-top: 10px;
margin-bottom: 10px;
display: block;
float: left;
}
.site-logo {
height: 60px;
width: auto;
float: left;
}
.site-nav-action-container {
height: 50px;
width: 50px;
max-width: 50px;
margin-left: 10px;
margin-right: 10px;
margin-top: 15px;
margin-bottom: 15px;
display: block;
float: right;
text-align: right;
}
.site-nav {
height: 100%;
left: 0px;
position: fixed;
top: 0px;
width: 100%;
background: #3399ff;
display: none;
}
.site-nav.active {
display: block;
}
.site-nav-content {
width: 20%;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#media only screen and (max-width: 500px) {
.site-nav-content {
width: auto;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
}
.site-nav-pages {
text-align: center;
}
/* NAV ICON */
#nav-icon span:nth-child(1) {
top: 0px;
}
#nav-icon span:nth-child(2),
#nav-icon span:nth-child(3) {
top: 8px;
}
#nav-icon span:nth-child(4) {
top: 16px;
}
#nav-icon.open span:nth-child(1) {
top: 18px;
width: 0%;
left: 50%;
}
#nav-icon.open span:nth-child(2) {
transform: rotate(45deg);
}
#nav-icon.open span:nth-child(3) {
transform: rotate(-45deg);
}
#nav-icon.open span:nth-child(4) {
top: 18px;
width: 0%;
left: 50%;
}
#nav-icon {
width: 30px;
height: 25px;
position: absolute;
transform: rotate(0deg);
transition: .5s ease-in-out;
cursor: pointer;
z-index: 1;
top: 30px;
}
#nav-icon span {
display: block;
position: absolute;
height: 3px;
width: 100%;
background: #000;
opacity: 1;
left: 0;
transform: rotate(0deg);
transition: .25s ease-in-out;
}
<div class="site-header ">
<div class="site-logo-container">
<img class="site-logo" src="https://via.placeholder.com/1000x300" alt="Logo">
</div>
<div class="site-nav-action-container">
<!-- Menu icon -->
<div id="nav-icon">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="site-nav">
<div class="site-nav-content">
<div class="site-nav-pages">
<p>Page 1</p>
<p>Page 2</p>
<p>Page 3</p>
<p>Page 4</p>
<p>Page 5</p>
</div>
</div>
</div>
I'm relatively new to coding and I'm using codepen.io to get better, so ignore the actual content its something to practice on. Anyways I'm trying to do multiple overlays on images on one page. I can't seem to figure out how to get the overlays to be on their individual images.
here's the codepen link: https://codepen.io/ToxicCookie/pen/RmXYLv?editors=1000
<html>
<head>
<style>
* {
background-color: #d7c2fc;
font-family: Courier New, monospace;
}
#title {
text-align: Center;
font-size: 50px;
}
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 300px;
height: 250px;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 250px;
width: 300px;
opacity: 0;
transition: .5s ease;
background-color: #008CBA;
}
.container:hover .overlay {
opacity: 1;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
background-color: #008CBA;
}
#animals {
position: fixed;
}
#earth{
position: fixed;
left: 320px;
}
#body{
position: fixed;
left: 630px;
}
</style>
</head>
<body>
<h1 id= "title"> Why be Vegan?</h1>
<div class="container">
<img id="animals" src="https://live.staticflickr.com/7291/11910205046_d9844787b2_b.jpg" alt="animals" class="image">
<div class="overlay">
<div class="text">Animals</div>
</div>
</div>
<div class="container">
<img id="earth" src="https://ih1.redbubble.net/image.540939652.0382/flat,550x550,075,f.u2.jpg" alt="earth" class="image" >
<div class="overlay">
<div class="text">Earth</div>
</div>
</div>
<div class="container">
<img id="body" src="https://www.uuwaco.org/wp-content/uploads/2018/09/veggieheart.jpg" alt="body" class="image">
<div class="overlay">
<div class="text">Body</div>
</div>
</div>
</body>
You are making the image to be position:fixed which is the culprit. Remove it and make the container inline-block instead:
* {
background-color: #d7c2fc;
font-family: Courier New, monospace;
}
#title {
text-align: Center;
font-size: 50px;
}
.container {
position: relative;
display: inline-block;
}
.image {
display: block;
width: 300px;
height: 250px;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 250px;
width: 300px;
opacity: 0;
transition: .5s ease;
background-color: #008CBA;
}
.container:hover .overlay {
opacity: 1;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
background-color: #008CBA;
}
<h1 id="title"> Why be Vegan?</h1>
<div class="container">
<img id="animals" src="https://live.staticflickr.com/7291/11910205046_d9844787b2_b.jpg" alt="animals" class="image">
<div class="overlay">
<div class="text">Animals</div>
</div>
</div>
<div class="container">
<img id="earth" src="https://ih1.redbubble.net/image.540939652.0382/flat,550x550,075,f.u2.jpg" alt="earth" class="image">
<div class="overlay">
<div class="text">Earth</div>
</div>
</div>
<div class="container">
<img id="body" src="https://www.uuwaco.org/wp-content/uploads/2018/09/veggieheart.jpg" alt="body" class="image">
<div class="overlay">
<div class="text">Body</div>
</div>
</div>
figure {
position: relative;
max-width: 222px;
}
img {
height: auto;
max-width: 100%;
vertical-align: middle;
}
figcaption {
align-items: center;
background-color: whitesmoke;
bottom: 0;
display: flex;
justify-content: center;
left: 0;
opacity: 0;
position: absolute;
right: 0;
top: 0;
transition: 0.5s ease;
}
figure:hover figcaption {
opacity: 0.75;
}
<figure>
<img src="https://live.staticflickr.com/7291/11910205046_d9844787b2_b.jpg"
alt="The beautiful MDN logo.">
<figcaption>Animal</figcaption>
</figure>
Notes:
Use semantic HTML element if possible. i.e <figure> & <figcaption>
Add CSS relative position to the parent node of the absolute/fixed position.
Make image responsive if possible height: auto; max-width: 100%. Better to also use the media or image source element <source>.
I'm working on a page where the user can scroll down. The scroll bar is hidden but functional (pushed to the side with inner&outer divs and "right: -17px;").
In this forum I saw some scroll-disappear solutions, but only in jQuery, but I want to learn pure/vanilla JavaScript before I use any library.
I tried to write my own simple JS code. It worked for the first when I haven't hide the scrollbar, seems I have to change something in the JS code.
Here is my code: (I also created a snippet below to simulate):
window.addEventListener("scroll", scrollEffectOne);
function scrollEffectOne()
{
var hidethis = document.getElementById("box");
hidethis.style.opacity = "0.1";
}
*
{
margin: 0px;
padding: 0px;
font-family: Arial;
}
#outer
{
height: 100%;
width: 100%;
overflow: hidden;
position: absolute;
}
#inner
{
top: 0px;
right: -17px;
bottom: 0px;
left: 0px;
position: absolute;
overflow-x: hidden;
}
#frame_1
{
top: 0px;
height: 100%;
width: 100%;
position: absolute;
background-image: linear-gradient(-225deg, #22E1FF 0%, #1D8FE1 48%, #625EB1 100%);
}
#frame_2
{
top: 100%;
height: 100%;
width: 100%;
position: absolute;
background-image: linear-gradient(-225deg, #D4FFEC 0%, #57F2CC 48%, #4596FB 100%);
}
#frame_3
{
top: 200%;
height: 100%;
width: 100%;
position: absolute;
background-image: linear-gradient(-225deg, #473B7B 0%, #3584A7 51%, #30D2BE 100%);
}
#box
{
width: 350px;
height: 100px;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
position: absolute;
background-color: rgba(0,0,0,.3);
border-radius: 10px;
opacity: 1;
}
#box a
{
opacity: 1;
font-size: 15px;
color: white;
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
position: absolute;
}
#box b
{
color: rgba(255,255,255,.3);
}
<!DOCTYPE html>
<html>
<head>
<title>TEST</title>
<meta charset="UTF-8"/>
</head>
<body>
<div id="outer">
<div id="inner">
<div id="frame_1">
<div id="box">
<a>Hide Me <b>while scrolling</b> !</a>
</div>
</div>
<div id="frame_2"></div>
<div id="frame_3"></div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>TEST</title>
<meta charset="UTF-8"/>
</head>
<body>
<div id="outer">
<div id="inner">
<div id="frame_1">
<div id="box">
<a>Hide Me <b>while scrolling</b> !</a>
</div>
</div>
<div id="frame_2"></div>
<div id="frame_3"></div>
</div>
</div>
</body>
<style>
*
{
margin: 0px;
padding: 0px;
font-family: Arial;
}
#outer
{
height: 100%;
width: 100%;
overflow: hidden;
position: absolute;
}
#inner
{
top: 0px;
right: -17px;
bottom: 0px;
left: 0px;
position: absolute;
overflow-x: hidden;
}
#frame_1
{
top: 0px;
height: 100%;
width: 100%;
position: absolute;
background-image: linear-gradient(-225deg, #22E1FF 0%, #1D8FE1 48%, #625EB1 100%);
}
#frame_2
{
top: 100%;
height: 100%;
width: 100%;
position: absolute;
background-image: linear-gradient(-225deg, #D4FFEC 0%, #57F2CC 48%, #4596FB 100%);
}
#frame_3
{
top: 200%;
height: 100%;
width: 100%;
position: absolute;
background-image: linear-gradient(-225deg, #473B7B 0%, #3584A7 51%, #30D2BE 100%);
}
#box
{
width: 350px;
height: 100px;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
position: absolute;
background-color: rgba(0,0,0,.3);
border-radius: 10px;
opacity: 1;
}
#box a
{
opacity: 1;
font-size: 15px;
color: white;
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
position: absolute;
}
#box b
{
color: rgba(255,255,255,.3);
}
</style>
<script>
window.addEventListener("scroll", scrollEffectOne);
function scrollEffectOne()
{
var hidethis = document.getElementById("box");
hidethis.style.opacity = "0.1";
}
</script>
</html>
Your code looks right but it didnt work until i changed the useCapture option to true. To be honest, I dont know why it has do be true.
window.addEventListener("scroll", scrollEffectOne, true);
Read more that about here: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
Bear with me on this... little hard to explain. So what I'm attempting to do is have a block of text remove the background of a div directly behind it. The image linked below was done is Illustrator and now I'm trying to find a solution within HTML & CSS.
Illustrator screenshot of what I'm trying to accomplish
.grid-item {
position: relative;
width: 300px;
height: 200px;
padding: 5px;
}
.grid-container {
position: relative;
width: 100%;
height: 100%;
background-color: #eee;
}
.grid-container img {
position: absolute;
}
.grid-item-overlay {
position: absolute;
top: 5px;
left: 5px;
bottom: 5px;
right: 5px;
background-color: rgba(0,0,0,0.5);
}
span {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
transform: translate(-50%, -50%);
font-weight: 700;
font-family: sans-serif;
font-size: 40px;
text-align: center;
color: #fff;
}
<div class="grid-item">
<div class="grid-container">
<img src="https://unsplash.it/300/200/?random">
<div class="grid-item-overlay">
<span>Text Here</span>
</div>
</div>
</div>
The objective is to have the span text create a transparent mask of the grid-item-overlay background.
I'm open to any suggestions! :)
You could try working with mix-blend-mode,
mix-blend-mode : The mix-blend-mode CSS property describes how an
element's content should blend with the content of the element's
direct parent and the element's background.
.grid-item {
position: relative;
width: 300px;
height: 200px;
padding: 5px;
}
.grid-container {
position: relative;
width: 100%;
height: 100%;
background-color: #eee;
}
.grid-container img {
position: absolute;
}
.grid-item-overlay {
position: absolute;
top: 5px;
left: 5px;
bottom: 5px;
right: 5px;
background-color: rgba(0,0,0,0.5);
}
span {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
transform: translate(-50%, -50%);
font-weight: 700;
font-family: sans-serif;
font-size: 40px;
text-align: center;
color:rgba(255,255,255,1);
mix-blend-mode: overlay;
}
<div class="grid-item">
<div class="grid-container">
<img src="https://unsplash.it/300/200/?random">
<div class="grid-item-overlay">
<span>Text Here</span>
</div>
</div>
</div>
<div class="grid-item">
<div class="grid-container">
<img src="https://unsplash.it/300/200/?random">
<div class="grid-item-overlay">
<span class="text">Text Here</span>
</div>
</div>
</div>
Add this css to your css File
.text{
color: rgba(255, 255, 255, 0.1);
}
.grid-item-overlay:before{
position: absolute;
content:" ";
top:0;
left:0;
width:100%;
height:100%;
display: block;
z-index:0;
background-color:rgba(255,0,0,0.5);
}