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);
}
Related
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.
I'm trying to create some interactive spots on my website when a user rolls over the hotspot, I want the popup to be full width. relative to the container .hotspot-wrp. Currently, the popup flows outside of the viewable area and on mobile the content isn't viewable.
.hotspot-wrp {
display: block;
position: relative;
background: #636e72;
width: 80vw;
margin: 0px auto;
height: 200px;
}
.hot-spot {
width: 24px;
height: 24px;
border-radius: 50%;
background: rgba(227, 193, 122, 0.8);
position: absolute;
cursor: pointer;
transition: all ease 350ms;
margin-left: -12px;
margin-top: -12px;
}
.tooltip {
position: absolute;
background: #fff;
border: 1px solid #E8C378;
width: 100%;
padding: 15px;
display: none;
margin-top: 30px;
-webkit-transform: translateX(0%);
transform: translateX(0%);
z-index: 9999;
}
.hot-spot:hover .tooltip,
.hot-spot:active .tooltip {
display: block;
}
<div class="hotspot-wrp">
<div class="hot-spot" style="top:43.8776%; left:4.4476%;">
<div class="tooltip">
<h3>Test</h3>
<p>Some demo text will be in here.</p>
</div>
</div>
<div class="hot-spot" style="top:4.0816%; left:63.4146%;">
<div class="tooltip">
<h3>Test</h3>
<p>Some demo text will be in here.</p>
</div>
</div>
</div>
JSFiddle - http://jsfiddle.net/L7ksfdmc/
Add overflow: hidden; to the parent container.
.hotspot-wrp {
display: block;
position: relative;
background: #636e72;
width: 80vw;
margin: 0px auto;
height: 200px;
overflow: hidden;
}
.hot-spot {
width: 24px;
height: 24px;
border-radius: 50%;
background: rgba(227, 193, 122, 0.8);
position: absolute;
cursor: pointer;
transition: all ease 350ms;
margin-left: -12px;
margin-top: -12px;
}
.tooltip {
position: absolute;
background: #fff;
border: 1px solid #E8C378;
width: 100%;
padding: 15px;
display: none;
margin-top: 30px;
-webkit-transform: translateX(0%);
transform: translateX(0%);
z-index: 9999;
}
.hot-spot:hover .tooltip,
.hot-spot:active .tooltip {
display: block;
}
<div class="hotspot-wrp">
<div class="hot-spot" style="top:43.8776%; left:4.4476%;">
<div class="tooltip">
<h3>Test</h3>
<p>Some demo text will be in here.</p>
</div>
</div>
<div class="hot-spot" style="top:4.0816%; left:63.4146%;">
<div class="tooltip">
<h3>Test</h3>
<p>Some demo text will be in here.</p>
</div>
</div>
</div>
Just as Emil said use overflow:hidden and for making your tooltip full width, choose the required length in pixels to increase the width. If you use width:100% in .tootltip css, it will only acquire the width of its parent div's width. So use absolute length as per requirement or length of text inside tooltip.
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>
Image
Hi guys , I would like to contain images like the image above. I am quite sure that I should include the image inside a div container, but I have no idea on how to style the container and image. Other than that, the border has a different color when it's overlapped. Any kind of help is greatly appreciated. Thank you and sorry for my bad English.
Basically this is the code that I have written, but I don't think that it is the correct way :
.container {
position: relative;
width: 100%;
height: 100%;
max-height: 350px;
max-width: 800px;
border: 1px solid gray;
left: 16px;
top: 16px;
}
.dimg {
max-width: 110%;
max-height: 110%;
position: absolute;
left: -16px;
top: -16px;
}
<div class="container">
<img class="dimg" src="http://static.wixstatic.com/media/fc350e_e38e21e547204e4b83ff18afcab7f300.jpg">
<div class="caption">
</div>
</div>
This should be good starting point:
.container {
position: relative;
width: auto;
max-height: 350px;
max-width: 800px;
border: 2px solid gray;
display: flex;
height:160px;
}
.img-container {
flex:1;
position: relative;
left: -16px;
top: -16px;
height: calc(100% + 32px);
overflow:hidden;
}
.caption{
flex:1;
}
.dimg {
max-width: 110%;
position: relative;
width:100%;
}
.border2 {
border: 2px solid white;
height:160px;
width:100%;
position: absolute;
top: 16px;
left: 16px;
}
<div class="container">
<div class="img-container">
<img class="dimg" src="http://static.wixstatic.com/media/fc350e_e38e21e547204e4b83ff18afcab7f300.jpg">
<div class="border2"></div>
</div>
<div class="caption">
</div>
</div>
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>