This question is a continuation of one that asked before
how to add a gradient over a leaflet map?
I'm trying to add a text overlay over the left side of my leaflet map, which has a black-transparent gradient background from left to right.
Modifying my text, which is set to white with css, to load after the map doesn't seem to work. Can anyone tell me what I need to do to have my text show up over the map? Thanks!
<style>
#map-id {
height: 100%;
width: 100%;
position: absolute;
}
html,body{margin: 0; padding: 0}
#map-id:before {
position: absolute;
content: '';
height: 100%;
width: 100%;
background: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
pointer-events: none;
z-index: 999;
}
#menu-text{
display: inline-bloc;
}
#menu-text:before{
position: absolute;
content: '';
height: 100%;
width: 100%;
color: white;
pointer-events: none;
z-index: 999;
}
</style>
<div id="map-id">
<script type="text/javascript" src="{% static "js/map.js" %}"></script>
</div>
<div id="menu-text">
<h1>
This is the text that should be showing up, but isn't.
</h1>
</div>
The side appears black with no white text.
You have already working example in the reply of your last question.
http://codepen.io/hkadyanji/pen/bwNLKK
Your code is broken, <script> tag should not be placed into <div id="map-id">
Related
Can anyone guide how to make image darker from bottom? I want to design the following box via tailwind css.
Currently, I tried by adding image as a normal div element(not background image) and then added the text div as absolutely positioned but I realise that the image should be in background and text should added as static div. Can you please suggest how to make the image darker as above attached picture?
You have a couple options for making an overlay over an image.
For a background-image property, you can define a gradient before the image URL. E.g.
background-image: linear-gradient(0deg, rgba(0, 0, 0, .6), transparent 35%), url('image.jpg');
For an <img> tag, you can use a pseudo-element to create an overlay.
Here's one of many approaches you can take. E.g.
<head>
<style>
.overlay {
position: relative;
}
.overlay img {
width: 100%;
height: auto;
}
.overlay::after {
content: '';
position: absolute;
top: 0;
left: 0;
z-index: 1;
height: 100%;
width: 100%;
background-image: linear-gradient(0deg, rgba(0, 0, 0, .6), transparent 35%);
poionter-events: none;
}
.overlay-content {
position: absolute;
bottom: 0;
left: 0;
z-index: 2;
padding: 1em;
}
</style>
</head>
<body>
<div class="overlay">
<img src="https://placekitten.com/500/300" alt="An image" />
<div class="overlay-content">
<p>Some text<p>
</div>
</div>
</body>
This question already has answers here:
Black transparent overlay on image hover with only CSS?
(8 answers)
Closed 4 years ago.
For example in the following image, there are no changes made to the actual photo but just a black color overlay is added.
How can i do it using css?
or
How can i do it using any other software?
Here's one simple method, using a pseudo-element (::before) with a semi-transparent background (black with 50% opacity, defined by rgba) overlayed above an image.
.dark-img {
position: relative;
width: 300px;
}
.dark-img img {
display: block;
width: 100%;
}
.dark-img::before {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 1;
background: rgba(0, 0, 0, .5);
}
<div class="dark-img">
<img src="https://i.imgur.com/qLRD0OC.jpg" />
</div>
Quick and simple
<html>
<head>
<style>
.your-div {width: 500px; height: auto; background-color: #000;}
.your-div img {width: 500px; height: auto; opacity: 0.3}
</style>
</head>
<body>
<h2>Hello</h2>
<div class="your-div">
<img src="http://img1.juimg.com/140915/330518-14091516335670.jpg"></div>
</body>
</html>
codepen: https://codepen.io/anon/pen/XYPWXx
<div id="overlay"></div>
CSS:
#overlay {
position: fixed; /* Sit on top of the page content */
display: none; /* Hidden by default */
width: 100%; /* Full width (cover the whole page) */
height: 100%; /* Full height (cover the whole page) */
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5); /* Black background with opacity */
z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
cursor: pointer; /* Add a pointer on hover */
}
It's it possible today to do a transparent color overlay process on a single div? for example if I have the following HTML code
<div class="flower">
</div>
and I have the following html...
.flower {
width:320px;
height:240px;
background: url(img/flower.png) no-repeat;
border:5px solid #000000;
}
.flower:after {
background:#FF2400; opacity:0;
}
.flower:after:hover {
opacity:0.7;
}
So when someone hovers over this, they see a tinted red flower. Can we do something like this today with a single div?
There are at least 2 methods of doing this.
Method 1.
Overlay the whole div.
NB.This will also affect any content that may be inside the div.
.box {
width: 200px;
height: 200px;
margin: 25px;
display: inline-block;
}
.overlay {
position: relative;
background: url(http://lorempixel.com/output/nature-q-c-200-200-4.jpg);
}
.overlay:after {
position: absolute;
content: '';
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 0, 0, 1);
opacity: 0;
}
.overlay:hover:after {
opacity: .5;
}
<div class="box overlay">
</div>
Method 2.
Since you are using a background image, we can add another background image on top of the first by way of a linear gradient with a single color and RGBA properties.
.box {
width: 200px;
height: 200px;
margin: 25px;
display: inline-block;
}
.bgimage {
background: url(http://lorempixel.com/output/nature-q-c-200-200-3.jpg);
}
.bgimage:hover {
background-image: linear-gradient(to bottom, rgba(255, 0, 0, 0.5), rgba(255, 0, 0, 0.5)), url(http://lorempixel.com/output/nature-q-c-200-200-3.jpg);
}
<div class="box bgimage">
</div>
This has the advantage of not affecting the content of the div.
I'm sure there are other methods but these are the first two that came to mind.
I am trying to code the attached layout (needs to be responsive and not use JavaScript if possible). I want to support IE8, or if not, a gracefully degrading solution would be great.
I found ways to make the semicircle cutout using pseudo-elements and border-radius, but the background image of the previous div needs to show through and I can't figure out how to do it. Please help!! I have highlighted the area covered by the background image, in case it is not clear. Here is the layout
I got this far: https://jsfiddle.net/dcwoLb7f/
HTML:
<div id="first"><p>IMAGE CREDIT: WIKIPEDIA</p></div>
<div id="second"></div>
CSS:
#first {
background-image: url('http://upload.wikimedia.org/wikipedia/commons/5/5a/VirtuellesStudio_Greenbox.jpg');
background-size: cover;
position: relative;
}
p {
color: white;
text-align: center;
margin: auto;
font-size: 40px;
}
#first, #second {
width: 100%;
height: 200px;
}
#second {
background-color: blue;
}
#first:after {
content: '';
background-color: white;
height: 40px;
width: 40px;
border-radius: 100%;
position: absolute;
bottom: -20px;
left: 50%;
transform: translate(-50%, 0);
}
Please see this fiddle, or the code below:
http://jsfiddle.net/MegaMatt3/92G6X/9/
HTML:
<div id="outer">
<div id="inner"></div>
</div>
CSS:
#outer {
border: 1px solid black;
box-shadow: 0 0 20px rgba(0, 0, 0, 1) inset;
height: 200px;
position: relative;
width: 200px;
}
#inner {
background-color: #55A8FF;
bottom: 0;
height: 50px;
left: 0;
position: absolute;
width: 100%;
}
If I have a parent element, with an inset box shadow, and a child element inside it, the child element appears over top of the box shadow. I'd like for the child element to be "underneath" the box shadow, if possible. The effect would essentially show the inset box shadow on top of the child element.
I've messed with the z-index, but with no luck. Is this possible? Any help would be much appreciated. Thanks.
EDIT:
This question is kind of a mess now, but my original question should have indicated that I'm looking for a solution that works when the outer div has a non-transparent background. I've updated my original fiddle and code to reflect this scenario. The other answers here are valid, but the one I've marked as correct works for me in that scenario.
Another solution that works with non transparent backgrounds:
Set the shadow on a pseudo element
CSS
#outer {
border: 1px solid black;
height: 200px;
position: relative;
width: 200px;
background-color: white;
}
#outer:after {
content: "";
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5) inset;
height: 100%;
position: absolute;
width: 100%;
left: 0px;
top: 0px;
}
#inner {
background-color: #55A8FF;
bottom: 0;
height: 50px;
left: 0;
position: absolute;
width: 100%;
}
demo
Set #inner to a negative z-index.
#inner {
background-color: #55A8FF;
bottom: 0;
height: 50px;
left: 0;
position: absolute;
width: 100%;
z-index: -10;
}
http://jsfiddle.net/S8Sm7/
PS:
Remember to close your tags :) just to be safe.
I would add another <div>.
You could use z-index, but if anything else is in the <div> you're going to have modify them all or do some other hack.
I suggest adding another <div> with the shadow. This is a flexible solution.
<div id="outer">
<div id="inner"></div>
<div id="newDiv"></div> // shadow moved to this div
</div>
I had a similar problem here css - box shadow covering all contained divs using absolute positioning
example here: http://jsfiddle.net/92G6X/8/