I want to change the position of my tooltip to cover the textfield to the left of the question mark.
In my code I have four question marks. To the left of the question marks there are four textfields. once the user hovers over a question mark, a tooltip should be placed over the text field.
How do I do this?
My code for the form >>
<h1>Your Name and Address</h1>
<form action="/">
<div class="nameDiv">
Name: <input type="textbox" name="firstname" title="name" id="name" required>
<div class="dotOne"> ?
<span class="nameHelp"> This is the correctly formatted name of the user entering the details </span>
</div>
</div>
<br>
<div class="addressDiv">
Address: <input type="text" name="lastname" id="address">
<div class="dotTwo">?
<span class="addressHelp"> This is the correctly formatted name of the user entering the details </span>
</div>
</div>
<br>
<div class="emailDiv">
Email:
<input type="text" name="Email" id="email">
<span class="dotThree">?
<span class="emailHelp"> This is the correctly formatted name of the user entering the details </span>
</span>
</div>
<br>
<div class="numberDiv">
Phone number:
<input type="text" name="Phone number" id="number">
<span class="dotFour">?
<span class="numberHelp"> This is the correctly formatted name of the user entering the details </span>
</span>
</div>
<br>
</form>
If you are looking for something like this, this would help. The tooltip you asked is positioned to the top of the text field. The tooltip color might be not good, but Hope it helps you.
#Name {background-color: grey;}
#Address {background-color: grey;}
* {box-sizing: border-box}
#save-btnOne{
cursor: pointer;
margin-top: 10px;
background-color: green;
color: white;
font-weight: bold;
height: 25px;
width: 80px;
}
.asterisk::after{
content: '*';
color: #EF5F5F;
float: right;
}
#save-btnTwo{
cursor: pointer;
margin-top: 10px;
background-color: green;
color: white;
font-weight: bold;
height: 25px;
width: 80px;
}
/* Set height of body and the document to 100% */
#container {
width: 400px;
height: 420px;
margin: 0;
font-family: Arial;
display: none;
position:absolute;
top:20px;
left: 400px;
}
.form-popup {
display: none;
position: fixed;
bottom: 0;
right: 15px;
border: 3px solid #f1f1f1;
z-index: 9;
}
/* Style tab links */
.tablink {
background-color: white;
color: black;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
font-size: 17px;
width: 200px;
}
.tablink:hover {
background-color: white;
}
/* Style the tab content (and add height:100% for full page content) */
.tabcontent {
color: white;
display: none;
padding: 100px 20px;
height: 100%;
}
.nameHelp{
position: relative;
display: inline-block;
left: 25px;
}
.dotOne .nameHelp {
visibility: hidden;
color: black;
z-index: 4;
transition: opacity 0.3s;
left: -200px;
top:-80px;
position: relative;
display: inline-block;
}
.dotOne .nameHelp::after {
position: absolute;
}
.dotOne:hover .nameHelp {
visibility: visible;
}
.addressHelp{
position: relative;
display: inline-block;
left: -200px;
top:-80px;
}
.dotTwo .addressHelp {
visibility: hidden;
color: black;
z-index: 4;
transition: opacity 0.3s;
left: -200px;
top:-80px;
position: relative;
display: inline-block;
}
.dotTwo .addressHelp::after {
position: absolute;
}
.dotTwo:hover .addressHelp {
visibility: visible;
}
.emailHelp{
position: relative;
display: inline-block;
border: 1px black;
left: -200px;
top:-80px;
}
.dotThree .emailHelp {
visibility: hidden;
color: black;
z-index: 4;
transition: opacity 0.3s;
left: -200px;
top:-80px;
position: relative;
display: inline-block;
}
.dotThree .emailHelp::after {
position: absolute;
}
.dotThree:hover .emailHelp {
visibility: visible;
}
.numberHelp{
position: relative;
display: inline-block;
left: 25px;
}
.dotFour .numberHelp {
visibility: hidden;
color: black;
z-index: 4;
transition: opacity 0.3s;
left: -200px;
top:-80px;
position: absolute;
display: inline-block;
}
.dotFour .numberHelp::after {
position: absolute;
}
.dotFour:hover .numberHelp {
visibility: visible;
}
.tooltip:after{
content:"";
width:10px;
height:10px;
position:absolute;
background-color:red;
left:50%;
transform:rotate(45deg);
top:60px;
}
.tooltip{
position:absolute;
width:150px;
color:white;
background-color:red;
border-radius:10px;
top:0px;
z-index:2;
}
.btn{
background-color: red;
color: white;
font-weight: bold;
height: 25px;
cursor: pointer;
}
#name{
width: 200px;
position: absolute;
left: 120px;
}
#NameTransfer{
width: 200px;
position: absolute;
left: 150px;
}
#NameTransfer{
width: 200px;
position: absolute;
left: 150px;
}
#LastNameTransfer{
width: 200px;
position: absolute;
left: 150px;
}
#address{
width: 200px;
position: absolute;
left: 120px;
}
#email{
width: 200px;
position: absolute;
left: 120px;
}
#number{
width: 200px;
position: absolute;
left: 120px;
}
#TitleTransfer{
width: 200px;
position: absolute;
left: 150px;
}
#LastNameTransfer{
width: 200px;
position: absolute;
left: 150px;
}
#AddressTransfer{
width: 200px;
position: absolute;
left: 150px;
}
#EmailTransfer{
width: 200px;
position: absolute;
left: 150px;
}
#NumberTransfer{
width: 200px;
position: absolute;
left: 150px;
}
#LineOneTransfer{
width: 200px;
position: absolute;
left: 150px;
}
#LineTwoTransfer{
width: 200px;
position: absolute;
left: 150px;
}
#SuburbTransfer{
width: 200px;
position: absolute;
left: 150px;
}
#StateTransfer{
width: 200px;
position: absolute;
left: 150px;
}
#CountryTransfer{
width: 200px;
position: absolute;
left: 150px;
}
.name{
width: 200px;
position: absolute;
left: 150px;
}
.address{
width: 200px;
position: absolute;
left: 150px;
}
.LineOne{
width: 200px;
position: absolute;
left: 150px;
}
.email{
width: 200px;
position: absolute;
left: 150px;
}
.number{
width: 200px;
position: absolute;
left: 150px;
}
.LineDiv
{
padding-top: 5px;
padding-bottom: 5px;
}
.nameDiv{
padding-top: 5px;
padding-bottom: 5px;
}
.nameDivOne{
padding-top: 5px;
padding-bottom: 5px;
}
.addressDiv{
padding-top: 5px;
padding-bottom: 5px;
}
.emailDiv{
padding-top: 5px;
padding-bottom: 5px;
}
.numberDiv{
padding-top: 5px;
padding-bottom: 5px;
}
.dotOne {
border-bottom: 1px dotted black;
text-align: center;
height: 25px;
width: 25px;
background-color: green;
border-radius: 50%;
display: inline-block;
color: white;
font-weight: bold;
position: absolute;
left: 355px;
}
.dotTwo{
text-align: center;
height: 25px;
width: 25px;
background-color: green;
border-radius: 50%;
display: inline-block;
color: white;
font-weight: bold;
position: absolute;
left: 355px;
}
.dotThree {
text-align: center;
height: 25px;
width: 25px;
background-color: green;
border-radius: 50%;
display: inline-block;
color: white;
font-weight: bold;
position: absolute;
left: 355px;
}
.dotFour {
text-align: center;
height: 25px;
width: 25px;
background-color: green;
border-radius: 50%;
display: inline-block;
color: white;
font-weight: bold;
position: absolute;
left: 355px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<h1>Your Name and Address</h1>
<form action="/">
<div class="nameDiv">
Name: <input type="textbox" name="firstname" title="name" id="name" required>
<div class="dotOne"> ?
<span class="tooltip nameHelp"> This is the correctly formatted name of the user entering the details </span>
</div>
</div>
<br>
<div class="addressDiv">
Address: <input type="text" name="lastname" id="address">
<div class="dotTwo">?
<span class="tooltip addressHelp"> This is the correctly formatted name of the user entering the details </span>
</div>
</div>
<br>
<div class="emailDiv">
Email:
<input type="text" name="Email" id="email">
<span class="dotThree">?
<span class="tooltip emailHelp"> This is the correctly formatted name of the user entering the details </span>
</span>
</div>
<br>
<div class="numberDiv">
Phone number:
<input type="text" name="Phone number" id="number">
<span class="dotFour">?
<span class="tooltip numberHelp"> This is the correctly formatted name of the user entering the details </span>
</span>
</div>
<br>
</form>
</body>
</html>
I have tried the below CSS changes.
The right: 105%; helps to align the tooltip to the left.
And the width: 250px; in the .numberHelp can be changed to fit over the textbox with a background-color recommended.
.numberHelp {
position: relative;
display: inline-block;
border: 1px black;
width: 250px;
}
.dotFour .numberHelp {
visibility: hidden;
color: black;
transition: opacity 0.3s;
position: absolute;
z-index: 1;
top: -5px;
right: 105%;
}
The full code is here - JS Fiddle
Similar changes can be made to other CSS attributes for other divs as well.
What you're asking is a bit difficult, since you want the tooltip to be exactly positioned over a text field. Either can vary in size depending on content, and position depending on the sizes of the screen or window. Not to mention styling choices and their effects.
I would suggest you instead use the placeholder attribute for the input tag:
<input type="textbox" name="firstname" title="name" id="name"
placeholder="User's name in correct format"
required>
Also, consider changing the content of the tooltip as it is a little large. A better tooltip is one that explains what the correct format for the name is, for example.
Related
Problem:
The scrollbar is missing on my (social-media) website. It's because of the "position: fixed;" thing. Everything was fine before. I tried to set overflow to "overflow: auto;" where I set "position: fixed". But it only made things worse, and still... no scrollbar.
I tried to create two different divs (one for a menu, with pages etc. (class: "row") and other for user stuff (settings, inbox, profile etc.) (class: "row2"))).
HTML:
<body>
<!-- HEADER, LOGO, SLOGAN, HR -->
<header>
<h1>PTRN</h1>
<h2>something</h2>
<hr class="headerhr">
</header>
<!-- SIDE BAR 1 -->
<div class="container">
<div class="row">
#1
#2
#3
#4
#5
#6
#7
#8
#9
#10
<div class="searchbar">
<p class="searchplaceholder">Search</p>
</div>
</div>
</div>
<!-- SIDE BAR 2 -->
<div class="container2">
<img class="menu1" src="file:///C:/Users/calex/Downloads/download.%20(1).jpg">
<div class="row2">
Inbox
Notifications
Meetings
Inbox
<p class="shared">Shared</p>
Documents
Photos
<div class="row2_2">
Settings
Help & Contact
</div>
</div>
<!-- POST SAMPLE -->
<div class="container3">
<img src="https://tiffanieanne.com/wp-content/uploads/2020/08/Batter-Spencer-Best-Views-in-San-Francisco-SF-Instagram-Worthy-Photo-Spots-SF-Photography-tiffanieanne.com_-768x954.jpg" alt="San Francisco, CA, USA">
<div class="container4">
<p class="username_post">Chita Cosmin</p>
<p class="jobb">Founder & CEO of Pictoren Platforms, Inc. since 2020</p>
<img class="prpic" src="https://images.unsplash.com/photo-1540512663861-0dcbe11ab7a3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1yZWxhdGVkfDE1fHx8ZW58MHx8fHw%3D&w=1000&q=80" alt="Profile Pic">
<div class="container5">
<b class="fakebutton">Info</b>
</div>
</div>
</div>
CSS:
#import url("https://cdn.jsdelivr.net/npm/bootstrap-icons#1.3.0/font/bootstrap-icons.css");
/* BODY */
body {
margin: 0;
padding: 0;
font-family: Helvetica, Sans-Serif;
background: #a9c4db;
}
/* BACKGROUND NOTE: #acb6b7 */
/* LOGO AND SLOGAN */
h1 {
font-size: 50px;
text-transform: uppercase;
font-weight: 900;
letter-spacing: 7px;
position: absolute;
top: 6%;
left: 50%;
transform: translate(-50%,-50%);
margin: 0;
background: url(https://data.whicdn.com/images/342108134/original.gif);
background-size: cover;
-webkit-text-fill-color:transparent;
-webkit-background-clip:text;
}
h2 {
font-size: 10px;
font-weight: 900;
letter-spacing: 2px;
position: absolute;
top: 70px;
left: 49.5%;
transform: translate(-50%,-50%);
margin: 0;
background: url(https://data.whicdn.com/images/342108134/original.gif);
background-size: cover;
-webkit-text-fill-color:transparent;
-webkit-background-clip:text;
}
/* HEAEDER SEPARATOR */
.headerhr {
border: none;
height: 3px;
width: 40.6cm;
background-color: #9700FF;
margin-top: 90px;
}
/* HEADER */
header {
display: flex;
flex-wrap: wrap;
height: 90px;
background-color: black;
justify-content: space-between;
align-items: center;
}
/* SIDE BAR 1 */
.container {
position: fixed;
top: 110px;
left: 40px;
background-color: white;
height: 800px;
width: 280px;
border-radius: 22px;
overflow: auto;
}
.row {
display: flex;
flex-direction: column;
font-size: 15px;
position: fixed;
left: 87px;
top: 190px;
overflow: auto;
}
.row a:link {
color: black;
background-color: transparent;
text-decoration: none;
}
.searchbar {
position: fixed;
background-color: #f9f9f9;
border-radius: 5px;
border-style: solid;
border-width: 2px;
border-color: #d9d9d9;
z-index: 4000;
top: 150px;
width: 180px;
height: 37px;
top: 135px;
overflow: auto;
}
.searchplaceholder {
position: fixed;
font-size: 13px;
color: #8a8a8a;
top: 135px;
left: 95px;
overflow: auto;
}
.container bi-house {
position: absolute;
left: 50%;
size: 250px;
}
/* SIDE BAR 2 */
.container2 {
position: fixed;
top: 110px;
right: 40px;
background-color: white;
height: 800px;
width: 280px;
border-radius: 22px;
overflow: auto;
}
.row2 {
display: flex;
flex-direction: column;
font-size: 18px;
position: fixed;
right: 180px;
overflow: auto;
}
.row2 a:link {
color: black;
background-color: transparent;
text-decoration: none;
}
.shared {
opacity: 40%;
color: black;
font-size: 14px;
}
.row2_2 {
display: flex;
flex-direction: column;
font-size: 18px;
position: fixed;
right: 160px;
bottom: 50px;
overflow: auto;
}
.menu1 {
position: fixed;
max-width: 100%;
max-height: 100%;
float: right;
border-radius: 22px;
margin-top: 0%;
z-index: 2000;
margin-left: 1%;
border-width: 1px;
border-color: white;
overflow: auto;
}
/* POST SAMPLE */
.container3 {
position: absolute;
top: 2px;
right: 147%;
background-color: white;
height: 700px;
width: 640px;
border-radius: 22px;
}
img {
max-width: 100%;
max-height: 100%;
float: right;
margin-top: 15.43%;
border-radius: 22px;
margin-right: 5.6%;
border-width: 1px;
border-style: solid;
border-color: #efeded;
}
.container4 {
position: absolute;
top: 24px;
right: 5%;
background-color: white;
height: 70px;
width: 570px;
border-radius: 22px;
border-width: 2px;
border-style: solid;
border-color: #efeded;
z-index: 999;
}
.username_post {
position: fixed;
font-size: 18px;
font-weight: 600;
right: 860px;
top: 137px;
overflow: auto;
}
.prpic {
position: fixed;
max-width: 10%;
max-height: 10%;
float: left;
top: -100px;
left: 500px;
border-radius: 100%;
clip-path: circle();
overflow: auto;
}
.jobb {
position: fixed;
color: #878787;
font-size: 13px;
top: 165px;
left: 561px;
overflow: auto;
}
.fakebutton{
position: fixed;
font-size: 17px;
transform: translate(-50%,-50%);
margin: 0;
background: url(https://data.whicdn.com/images/342108134/original.gif);
background-size: cover;
-webkit-text-fill-color:transparent;
-webkit-background-clip:text;
top: 174px;
right: 500px;
z-index: 1001;
overflow: auto;
}
.container5 {
position: absolute;
z-index: 1000;
background-color: white;
height: 30px;
width: 65px;
border-radius: 17px;
border-width: 2px;
border-style: solid;
border-color: #9700FF;
right: 12px;
top: 19px;
}
If you want 'overflow' to work, then try adding 'max-height' property to that element in your css code.
I have a span instead of plaseholder, When I mouse over on the items in the autofill list, I want to also hide the span.placeholder at the sametime such as default placeholder.
form {
margin: 0 auto;
width: 100%;
text-align: center;
}
form input {
position: absolute;
font-size: 16px;
height: 100%;
display: block;
background: transparent;
border: none;
margin: 0;
outline: none;
width: calc(100% - 10px);
top: 0;
left: 0;
padding: 0px 5px;
}
div.inputs_div {
position: relative;
width: 200px;
height: 22px;
display: block;
background: #fff;
padding: 5px 5px;
border: 1px solid black;
}
span.placeholder {
position: absolute;
top: 50%;
left: 5px;
transform: translateY(-50%);
display: block;
font-size: 16px;
pointer-events: none;
}
<form>
<div class="inputs_div">
<input type="text" name="username" />
<span class="placeholder">User Name</span>
</div>
</form>
You can use input and check if input is empty or not , if yes than remove text else show text
Here used display property you can use according to preferences like visibility , color: white
It will be direct answer if you provided the autocomplete code but you can use input focus to trigger and check if input is filled or not
function toogleText() {
var text = document.getElementById("placeholder1");
var inputDemo = document.getElementById("inputDemo").value;
if (inputDemo != "") {
text.style.display = "none";
} else {
text.style.display = "block";
}
}
document.getElementById("inputDemo").addEventListener("input", toogleText)
form {
margin: 0 auto;
width: 100%;
text-align: center;
}
form input {
position: absolute;
font-size: 16px;
height: 100%;
display: block;
background: transparent;
border: none;
margin: 0;
outline: none;
width: calc(100% - 10px);
top: 0;
left: 0;
padding: 0px 5px;
}
div.inputs_div {
position: relative;
width: 200px;
height: 22px;
display: block;
background: #fff;
padding: 5px 5px;
border: 1px solid black;
}
span.placeholder {
position: absolute;
top: 50%;
left: 5px;
transform: translateY(-50%);
display: block;
font-size: 16px;
pointer-events: none;
}
<form>
<div class="inputs_div">
<input type="text" name="username" id="inputDemo" />
<span class="placeholder" id="placeholder1">User Name</span>
</div>
</form>
The Element is not resizing and browser is not re-calculating the position of the Element even though all the widths and heights are mentioned in percentages only. This code basically renders a Squared DIV with Two elements one with Centered and another at right top corner of the SQuare.
<html>
<head>
<style>
.board {
font-size: 8em;
}
.cellContainerOuter {
width: 100%;
padding-bottom: 100%;
position: relative;
background-color: yellow;
border: 1px solid black;
}
.cellContainer {
width: 100%;
padding-bottom: 100%;
position: absolute;
display: table;
}
.cellContainerInner {
padding-bottom: 50%;
padding-top: 50%;
padding-left: 50%;
padding-right: 50%;
position: relative;
display: table-cell;
text-align: center;
vertical-align: middle;
}
.text {
border: 0px dotted white;
position: absolute;
bottom: 20%;
top: 20%;
left: 20%;
right: 20%;
overflow: hidden;
text-overflow: clip;
display: block;
}
.weight {
position: absolute;
right: 0px;
top: 0px;
margin: 2px;
border: 1px solid white;
}
</style>
</head>
<body>
<div class="board">
<div id="cell3_C_1" class="cellContainerOuter" title="ఇ">
<div id="cell2_C_1" class="cellContainer" title="ఇ">
<div id="cell_C_1" class="cellContainerInner" title="ఇ">
<span id="weight_C_1" class="weight" title="6">6</span>
<span id="text_C_1" class="text" title="ఇ">ఇ</span>
</div>
</div>
</div>
</div>
</body>
</html>
Any help to resolve this issue is highly appreciated.
CodePen: https://codepen.io/mdileep/full/MGrNgw/
Refactored your CSS.
Let me know if this is the behaviour you are expecting.
OR with responsive you mean to change your height of 6 as well?
body {
margin: 0;
}
.cellContainer {
position: relative;
background: yellow;
width: calc(100vw - 20px);
height: calc(100vh - 20px);
margin: 10px;
}
.cellContainerInner {
border: 1px solid;
height: 100%;
display: flex;
}
.weight {
font-size: 8em;
position: absolute;
right: 0px;
top: 0px;
border: 1px solid;
}
.text {
flex: 1;
font-size: 8em;
/* border:2px solid; */
align-self: center;
text-align: center;
}
<div class="board">
<div id="cell3_C_1" class="cellContainerOuter" title="ఇ">
<div id="cell2_C_1" class="cellContainer" title="ఇ">
<div id="cell_C_1" class="cellContainerInner" title="ఇ">
<span id="weight_C_1" class="weight" title="6">6</span>
<span id="text_C_1" class="text" title="ఇ">ఇ</span>
</div>
</div>
</div>
</div>
I want glyphicon-remove to be placed at the right end of input text box, here's my code-
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
position: relative;
background-color: rgba(0,0,0,0.9);
height: 100vh;
}
.content{
text-align: center;
position: absolute;
width: 100%;
top: 50%;
left: 50%;
transform:translate(-50%,-50%);
}
.fill_text{
width: 20%;
height: 42px;
background-color: #DDD;
border-radius: 20px;
font-size: 20px;
padding: 10px;
border: 5px solid #E35F14;
margin: 10px auto;
outline: 0;
position: relative;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="content">
<input type="text" class="fill_text">
<span class="glyphicon glyphicon-remove"></span>
</input>
</div>
I am setting the position of input text box as relative and I have tried by giving the position of the remove icon as absolute, but that's not working. Could you tell me why that's not working?
No elements are allowed inside <input> elements.
add this CSS
.glyphicon-remove{
position: absolute;
top: 50%;
right: 30px;
z-index:10;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
position: relative;
background-color: rgba(0,0,0,0.9);
height: 100vh;
}
.content{
text-align: center;
position: absolute;
width: 100%;
top: 50%;
left: 50%;
transform:translate(-50%,-50%);
}
.fill_text{
width: 20%;
height: 42px;
background-color: #DDD;
border-radius: 20px;
font-size: 20px;
padding: 10px;
border: 5px solid #E35F14;
margin: 10px auto;
outline: 0;
position: relative;
}
.glyphicon-remove{
position: absolute;
top: 50%;
right: 30px;
z-index:10;
cursor:pointer;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="content">
<input type="text" class="fill_text"/>
<span class="glyphicon glyphicon-remove"></span>
</div>
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);
}