I am using the following div:-
<div style="position:absolute:z-index:150;top: 0; left: 0;width:100%;height:100%;text-align:center;background-color:black;opacity:0.4;"></div>
But its displaying nothing.
You have a typo in your inline CSS. You've written position:absolute:z-index:150; while it should be position:absolute; z-index:150;. So change that colon to a semicolon.
div {
position: absolute;
z-index: 150;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
background-color: black;
opacity: 0.4;
}
<div></div>
Related
I'm trying to create the following functionality:
Have two transparent images layered on top of each other inside of a <div>; one is an object and the other image represents the 'glow' around the object.
On hover, I want the glow to change colors, but I do not want the original object to change colors.
Here's my existing setup:
HTML:
<div id="container">
<div id="constellation">
</div>
<img src="https://storage.googleapis.com/astrology-images/constellations/aquarius-white.png"/>
</div>
CSS:
#container {
position: relative;
background: black;
width: 800px;
height: 250px;
}
#constellation {
position: absolute;
top: 0px;
left: 0px;
width: 250px;
height: 250px;
background-image: url("https://storage.googleapis.com/astrology-images/constellations/aquarius-halo-white.png");
}
#constellation:after {
content: '';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: #4E6F2E;
mix-blend-mode: multiply;
opacity: 0;
}
#constellation:hover:after {
opacity: 1;
}
I've created an image of a constellation that lives in the <img>; this should always stay white.
In a separate <div> I have an image for the "halo"; this image uses the mix-blend-mode to multiply the image with a color on hover.
Unfortunately, the way I have it now has both images multiplied by the same color, even though they are in different elements! I have a live example here: I have an example here: https://jsfiddle.net/wcL2exa4/105/
How can I get my desired behavior?
The problem is that #constellation:after is positioned above your image. Set a higher z-index for your image and hover trigger on the parent.
#container {
position: relative;
background: black;
width: 800px;
height: 250px;
}
img {
position: relative;
z-index: 2;
}
#constellation {
position: absolute;
top: 0px;
left: 0px;
width: 250px;
height: 250px;
background: url("https://storage.googleapis.com/astrology-images/constellations/aquarius-halo-white.png");
}
#constellation:after {
content: '';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: red;
mix-blend-mode: multiply;
opacity: 0;
}
#container:hover #constellation:after {
opacity: 1;
}
See example here: https://jsfiddle.net/pcaoyb7s/
I want to add a transparent black overlay over an img tag with some text in it, like in the example screenshot below. Ideally only with HTML and CSS.
I have been searching for hours and can't find anything.
I know this could be easily done if the image is used as a background, but this isn't an option for us (SEO reasons).
That shouldn't be so bad. Would something like this work? First some HTML:
#container {
position: relative;
width: 600px;
height: 400px;
}
#someimg {
postion: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#overlay {
position: absolute;
top: 0;
left: 0;
clear: float;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
color: #ffffff;
}
<html>
<body>
<div id="container">
<img id="someimg" src="https://www.w3schools.com/w3images/fjords.jpg"</img>
<div id="overlay">This is some text in an overlay</div>
</div>
</body>
</html>
Mic.com used the following code:
.article-card-8col__overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: -webkit-linear-gradient(top,transparent,rgba(0,0,0,.9));
background: linear-gradient(to bottom,transparent,rgba(0,0,0,.9));
}
I changed it slightly. You could also use their code with on a sibling div element of the image & the parent having position: relative; or use one like mine.
.wrapper {
position: relative;
display: inline-block;
}
.wrapper:after{
content: "";
background: -webkit-linear-gradient(transparent,rgba(0,0,0,.9));
background: linear-gradient(transparent,rgba(0,0,0,.9));
position: absolute;
display: block;
width: 100%;
top: 0;
bottom: 0;
}
<div class="wrapper">
<img src="https://thumbs.mic.com/MTAxZmJlOGIyMSMvYzNOMU1wRTJjMEdyWUZySS1UVjNnMV9LVkZRPS8xMngyNzM6NDk4MHgyODA5LzgwMHg0NTAvZmlsdGVyczpmb3JtYXQoanBlZyk6cXVhbGl0eSg4MCkvaHR0cHM6Ly9zMy5hbWF6b25hd3MuY29tL3BvbGljeW1pYy1pbWFnZXMvanQwY2dmZXZ5aW10aGhqZzBtYXc4cHZxNndrZmdwbmNqNzQzeTB4YmhybWtyOGc0YXYxcHVidWVldzU0OWIwcC5qcGc.jpg" />
</div>
Is there a way using HTML to add an overlay using an image url in a specific div?
I managed to make something work using CSS :
#myDiv {
width: 100%;
height: 100%;
background: url(image.jpg) no-repeat;
}
#myDiv:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: transparent url(http://tympanus.net/Tutorials/CSS3FullscreenSlideshow/images/pattern.png) repeat top left;
opacity: .6;
}
But it is a bit tricky. When I tried to do the same for other divs, it did not work. So for instance I have this CSS code for a div :
.hi-icon-wrap img
{
border-radius: 80px;
width: 153px;
height: 153px;
margin:2%;
}
and I want to add an overlay. I am using this script but with no success:
.hi-icon-wrap img:before {
background: transparent url(http://tympanus.net/Tutorials/CSS3FullscreenSlideshow/images/pattern.png) repeat top left;
opacity: .6;
}
and I also tested that :
.hi-icon-wrap img:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: transparent url(http://tympanus.net/Tutorials/CSS3FullscreenSlideshow/images/pattern.png) repeat top left;
opacity: .6;
}
UPD:
HTML script:
<div class="hi-icon-wrap" class="hi-icon-wrap img" style="text-align: center">
<img src="image.png">
</div>
You should use overlay on div element and not on img
#myDiv {
position: relative;
display: inline-block;
border-radius: 80px;
overflow: hidden;
}
#myDiv:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: url(http://tympanus.net/Tutorials/CSS3FullscreenSlideshow/images/pattern.png) repeat top left;
opacity: .8;
}
img {
vertical-align: top;
}
<div id="myDiv">
<img src="http://placehold.it/150x150/D6E7FF/ffffff">
</div>
Edit: You can't use :after or :before on img as you can see here Demo because image elements don't contain text or have descendants, so what you can do is wrap img in div for example and then you get this Demo
I need to layer multiple divobjects.
To look like this
Whenever I load the markup as an HTML file in the browser the top: feature isn't responding. Then, if I open firebug to check the CSS, it shows that the value is there. If I modify the value of top: then and only then do the elements with top applied to them snap to the value in the CSS file.
I am aware that an alternative is to use a negative margin-top combined with padding set in fixed units, but as margin-top is relative to the child and not the parent that isn't consistent under all circumstances. I'd rather use position:absolute inside of a position:relative container.
Here's a fiddle, for some reason the it isn't congruent with what I see on my html file. Nonetheless, it may be of some help visualizing things.
<!--here's the container-->
<div id="fale_container">
<!--here's the container for the top-layer-->
<div id="fale_textbox_0">
<div class="highlight0a" id="Fale"><h1 class="fale_heading" id="faleh1">Fale</h1></div>
<div class="highlight0a" id="que"><h1 class="fale_heading">que</h1></div>
<div class="highlight0a" id="nem"><h1 class="fale_heading">nem</h1></div>
<div class="highlight0a" id="um"><h1 class="fale_heading">um</h1></div>
</div>
<!--here's the markup in question, this needs to go behind the container cited above. this is where the problematic styles are located-->
<div id=fale_textbox_container>
<div id="fale_textbox_2">
<h1 id="fale_heading_2">Rápido</h1>
</div>
<div id="fale_textbox_3">
<h2 id="fale_subheading_2">Sem Sotaque</h2>
</div>
<div id="fale_textbox_1">
<h2 id="fale_subheading_1">GRINGO</h2>
</div>
CSS
.highlight0a{
position: relative;
height: 55.7px;
width: 100%;
margin-bottom:1%;
}
.fale_heading {
position: relative;
display: block;
width: 13.32756%;
float: left;
margin-right: 0.00666%;
margin-left: 13.33422%;
color: black;
font-size: 3em;
clear: right;
z-index: 10; }
#fale_container {
position: relative;
height: auto;
width: 100%; }
#fale, #que, #nem, #um {
z-index: 9; }
#fale:after {
content: '';
z-index: -1;
position: absolute;
background-color: #fff;
width: 9%;
height: 100%;
left: 13.334%;
min-width: 4em; }
#que:after {
content: '';
z-index: -1;
position: absolute;
background-color: #fff;
height: 100%;
width: 9.1%;
left: 13.334%;
min-width: 6em; }
#nem:after {
content: '';
z-index: -1;
position: absolute;
background-color: #fff;
height: 100%;
width: 10.5%;
left: 13.334%;
min-width: 4em; }
#um:after {
content: '';
z-index: -1;
position: absolute;
background-color: #fff;
height: 100%;
width: 7.3%;
left: 13.334%;
min-width: 2em; }
#fale_textbox_container, #fale_textbox_1, #fale_textbox_2, #fale_textbox_3 {
display: block;
position: relative;
width: 100%;
float: left;
margin-left: 0;
margin-right: 0;
height: auto; }
#fale_textbox_container {
background-color: black;
z-index: 0; }
#fale_textbox_1, #fale_textbox_2, #fale_textbox_3 {
padding: 2%;
top: -42%;
z-index: 2; }
#fale_textbox_1 {
height: 100px;
background-color: white; }
#fale_textbox_2 {
height: 60px;
background-color: #7C1A1A; }
#fale_textbox_3 {
height: 80px;
background-color: #3F3C3C; }
#fale_heading_2, #fale_subheading_1, #fale_subheading_2 {
position: absolute;
z-index: 4;
width: 13.32756%;
float: left;
margin-right: 0.00666%;
margin-left: 28.66858%;
color: black; }
#fale_heading_2 {
top: 10; }
#fale_subheading_1 {
font-size: 4em;
top: 10; }
#fale_subheading_2 {
top: 10; }
I'm not completely sure what you are trying to accomplish.
Maybe you mean the following:
#fale_textbox_container {
background-color: black;
z-index: 0;
position: absolute; // Added this one
}
.highlight0a {
position: relative;
height: 55.7px;
margin-bottom:1%;
display: inline; // And this one
}
http://jsfiddle.net/xqd3x91q/3/
And next time, please please outline the code a little bit better, hard to read. And sometime in English would give most users more feeling of what you are trying to do. For me it looks like it is some sort of book cover.
I have created this website. And now, I would like to center text on those two images in header. Relevent code is here
<div class="header">
<img src="css/title578145459.png" class="headerImage left"/>
<img src="css/title756941752.png" class="headerImage right"/>
<span class="headerText">Ubytovna Stavařov Přerov</span>
</div>
and CSS
.headerImage {
width: 50%;
height: 100%;
}
.header {
position: relative;
height: 190px;
text-align: center;
padding-top: 5px;
opacity: 0.8;
}
.headerText {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: -1;
color: yellow;
font: normal 3em sling;
font-style: oblique;
}
I tried to set different values to top and bottom attributes, also I've tried to set padding and margin but neither of these have worked. Thanks for any tips.
Your z-index on .headerText should be positive. Using Chrome dev tools I was able to see the text using this:
.headerText {
position: absolute;
top: 120px;
left: 0px;
right: 0;
z-index: 1;
}
Try this
.headerText {
position: absolute;
top: 50%;
left: 25%;
right: 25%;
z-index: 1;
}