I have 2 div elements with background-color set overlaying on top of another div with content. In case-1 overlay is not a sibling of the content div so it allow background text to be visible to user.
In case-2 the overlay is a sibling of the content div so it is not showing the text to user.
Case-1
<div class="overlay"></div>
<div class="example-container">
<div class="child1">
Case 1 - Sample Text 1
</div>
</div>
Case-2
<div class="child1">
Case 2 - Sample text 2
</div>
<div class="overlay">
</div>
Sample JSfiddle to simulate 2 scenarios.
Any idea why this behavior in html? How could we make the overlay div with background color (case-2) always allow text transparency.
The issue here is that the div is being rendered over the text. This can be fixed easily by giving the overlay a z-index property of -1. This makes the div render under the text, allowing you to see it.
example overlay css
.overlay {
position: absolute;
background-color: gray;
top:0;
left:0;
width: 100px;
height: 100px;
z-index: -1;
}
Alternatively since you want it to overlay (if you actually don't that is a very misleading name) just set the opacity lower
.overlay {
position: absolute;
background-color: gray;
top:0;
left:0;
width: 100px;
height: 100px;
opacity: 0.5;
}
Setting the position property for all siblings make this work.
I found this article very helpful, it explains various scenarios.
https://coder-coder.com/z-index-isnt-working/
A sample fiddle that works.
https://jsfiddle.net/praveenr/ukpw63hc/
Related
I have tried to create a card which rotates in 3D if mouse pointer hovers over it. I have successfully added the background and image of the front of the card, but when trying to add text to it (ie, when trying to add text to a div element), it is not displayed.
Erroneous html code:
<div class="front">
<div class="front_card_icon">
<img src="image/indoor_plants_icon_white.svg">
</div>
<p>THIS TEXT IS THE PROBLEM</p>
</div>
Erroneous css code:
.front {
width: 100%;
height: 100%;
overflow: hidden;
backface-visibility: hidden;
position: absolute;
transition: transform .6s linear;
background-color: #2D3436;
}
.front_card_icon{
position: relative;
bottom: 8%;
transform: scale(0.70);
z-index: 2;
}
.front p {
positon:relative;
text-align: center;
color:white;
}
According to this post, the problem should have been solved after using position:relative on the tag, but that sadly didn't resolve my problem.
This is jsfiddle for my problem. Note that there the text is properly displayed, because the image can't be loaded. However, when the image is loaded, the text is not displayed, ALTHOUGH the image is transparent.
Thank you for your time!
<div class="front">
<div class="front_card_icon">
<img src="image/indoor_plants_icon_white.svg">
</div>
<p>Text to be centered vertically on top of image</p>
</div>
Your p tag is below the image and so the text is being pushed down and hidden by it's parent container.
To center the text within it's parent div (minimally) you would have to:
break the p tag out of the normal flow using position: absolute (which will help position it correctly - but will also cause it to disappear behind the image)
bring the p tag back on top with z-index: 2
and centre the p tag vertically with:
position:absolute;
top: 50%;
transform: translateY(-50%);
Here is the updated fiddle
A more elegant solution might involve switching stategy and applying the image as a background. That would take the img tag out of the content flow, allowing the text to be centred without absolute positioning and z-indexing.
You should set your p element's position to fixed and then give it 50% of top and left :
.front p {
position:fixed;
text-align: center;
color:white;
top:50%;
left:50%;
z-index:3;
}
Here is the live result(jsfiddle).
For more information please check this.
I have the following HTML structure:
<section class="mysection">
<div class="parallax">
<div>
<svg></svg>
</div>
</div>
</section>
<section class="back">
<div class="triangle">
<img src="img/red-triangle-bkgrd.png">
</div>
</section>
This is the CSS in LESS:
.parallax{
width: 90%;
margin-left: auto;
margin-right: auto;
}
section.back {
.triangle {
position: relative;
img {
position: absolute;
right:0;
top: 0;
}
}
}
Before using parallax on the parallax, back just sits immediately below the bottom border of mysection.
When I scale parallax by 1.11111111, the parallax uses 100% width of the viewport. However, back does not sits right beneath the parallax anymore. Instead, it overlaps with the parallax area. Here is a picture of a real-life situation:
How can I make back in the overlap area invisible? Put it another way, how can I make svg or its containers completely opaque without showing the overlaped image beneath it?
I tried 'opacity:1` on svg and its containers, but it is not working.
To be more detailed, I use a tool called ScrollMagic for this work if this is relevant.
You can set the stacking order using z-index. Try setting the following:
.mysection {
position: relative;
z-index: 1;
}
This should ensure that whatever's in your .mysection (such as the svg/map) passes over whatever intersects (assuming you don't apply a greater z-index to the other elements).
The template I am working with has a container, with content and navigation divs. The code looks something like this:
<div id="user_content" class="user_content">
<div class="main_content"> some content, text and whatever else, can be pretty long!</div>
<div class="content_nav">
<div class="col-md-3"><a id="prevB" href="http://google.com">CLICK HERE TO GO BACK!</a></div>
<div class="col-md-3"><a id="nextB" href="http://yahoo.com">CLICK HERE TO GO NEXT!</a></div>
</div>
</div>
See Figure 1 below for drawing.
Relevant CSS for the main_content div:
.main_content {
position: relative;
left: 0px;
width: 100%;
display: block;
transition: transform 0.5s ease 0s;
height: auto;
}
I can change the PHP to generate the BACK and NEXT links without its own div, so it will look like this:
<div id="user_content" class="user_content">
<a id="prevB" href="http://google.com">CLICK HERE TO GO BACK!</a>
<div class="main_content"> some content, text and whatever else, can be pretty long!</div>
<a id="nextB" href="http://yahoo.com">CLICK HERE TO GO NEXT!</a>
</div>
</div>
What I don't understand is the proper CSS to make the <a> BACK and NEXT links to be on the left and right side of the main_content container. See Figure 2 below for drawing.
Here is a link to the JFIDDLE that I've tried: https://jsfiddle.net/7wet25zn/
Position absolute your anchors at top 50% and subtract 0.5em (half the font-size, or any other value):
.user_content {
position: relative;
background: #eee;
height: 160px;
}
.user_content a {
position: absolute;
top: calc(50% - 0.5em);
}
.user_content a.next {
right: 0;
}
<div class="user_content">
<div class="main_content"></div>
<a class="prev" href="#!">PREV</a>
<a class="next" href="#!">NEXT</a>
</div>
If your {content} part is tall and prev and next button should be in the middle of the viewport (not tall div), you may add display:block; position:fixed; top:50%; to prev and next links so it will be visible regardless of height of div.
I recently experienced a similar problem building tooltips on a page. It wasn't something I had encountered before and wanted to do it with HTML and CSS. What ended up working for me was defining a parent container and making the content you want floating like so:
<div class="parent-container">
<div class="child"></div>
<div class="child"></div>
</div>
And defining the CSS as such:
.parent-container {
position: relative;
}
.child {
position: absolute;
}
This allows you to set width and height on the child class as relative to the position of the parent container. Good luck!
I am trying to make a slider. How can I put one image into another image and
put text and a small image in that image(the last one)? I have put one image into another one with no problem by giving position:relative in for main div and giving the second image position:absolute. But the third part (putting small image and text in that image) is tricky. I gave the container of image and text position absolute, but it is positioned out of the image div. Maybe a small example could help. Thanks
#maincontainer{
width:650px;
margin:0 auto;
margin-top: 25px;
position: relative;
}
#image1container
{
width: 650px;
margin:0 auto;
margin-top: 25px;
position: absolute;
top: 95px;
left: 137px;
}
#image2container{
position:absolute;
}
You could try using the background-image CSS property of <div> elements in HTML. Your HTML would look like this:
<div id="maincontainer">
<div id="image1container">
<img src="small-image.jpg" alt="Small image />
<p>Text in image</p>
</div>
</div>
And your CSS would look like this:
#maincontainer {
background-image: url('main-container-image.jpg');
}
#image1container {
background-image: url('image1-container-image.jpg');
}
From here, you could use CSS to position the elements as needed.
I've put some text on top of an image inside a container div, in a responsive layout. I'd now like to create a "rollover" effect where on mouse over the text gets a transparent green background-color covering the entire div / image. Hence the image looks a bit green.
See http://www.advocatedesign.co.uk/
Any help would be gratefully received!
You're going to need another div that you can use as the "overlay" layer.
JSFiddle Example
(In the future, please include a JSFiddle within your question with the relevant code as it helps everyone who is helping you)
HTML
<div class="case_study">
<div class="overlay"></div>
<a href="small-woods.html">
<img src="http://lorempixel.com/400/200/" alt="Small Woods case study">
<p>Small Woods</p>
</a>
</div>
CSS:
.case_study{
position: relative;
height: 200px;
width: 400px;
}
.case_study:hover .overlay{
background-color:green;
opacity: .3;
height: 100%;
width: 100%;
position: absolute;
}
Please comment on this answer because I'm not sure exactly what you want...
but are you looking for the hover selector?: http://www.w3schools.com/CSSref/sel_hover.asp
Set the class to hover and stick the desired background-color in there:
P:hover
{
background-color:green;
}