I found this effect on material.io: https://material.io/gallery/
The Image is fixed and is overwritten by the blackish one, but the z-index must be smaller than it, because the first bg is covering it.
In my pov its only working, when another div, without any opacity, blocks the first image.
Is that somehow possiboe or are they using a different method?
Edit: This is similar to parallax but not exactly parallax. If you inspect the html,you will see that the image/svg section doesn't scroll but the text does. By giving the svg sections different z-index values this is possible. The images are different in different sections, it's just that those are not moving along with text so it appears as if the images are repeating.
I would suggest you to go through their css to get a better understanding.
This effect is called parallax effect.
You can use a library like http://materializecss.com/parallax.html
to create it or you can create your own https://www.w3schools.com/howto/howto_css_parallax.asp
the two graphic elements are position:fixed each row that contains those graphics are incrementally positioned higher in the z-index and they have overflow:hidden set
body {
margin:0;
}
section {
height:100vh; position: relative; overflow:hidden;
}
section div {
position:fixed; top:50%; left:100px; width:100px; height:100px; border:2px solid white; margin-top:-50px;
}
section.red { z-index:1; }
section.blue { z-index:2; }
.red { background:red; }
.blue { background:blue; }
<section class="red">
<div class="blue"></div>
</section>
<section class="blue">
<div class="red"></div>
</section>
simplified example code: https://codepen.io/saetia/pen/mwBypp
Related
I tried to make a simple CSS hover but got a blinking image issue. Is there something I can do to fix that?
In the meantime, there is a empty gap between a H3 title and .term-image class because of my CSS settings for a class (.term-desc). Is there a way to eliminate this gap? It appears that the gap created by position:relative is not easy to be removed.
I need to hide the image when mouse hovers.
http://jsfiddle.net/fveqkcnj/
<div class="categorywrapper">
<div class="views-row views-row-1 views-row-odd views-row-first">
<h3 class="term-title">
Arts & Culture
</h3>
<div class="term-desc">
<p>This is Arts & Culture</p>
</div>
<div class="term-image"> <img src="http://placehold.it/235x150/ffffee" />
</div>
</div>
.categorywrapper {
width: 720px;
clear:both;
}
.categorywrapper .views-row {
float:left;
position:relative;
width:235px;
}
.categorywrapper .views-row h3 {
position:relative;
margin-left:30px;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #000;
width:80%;
min-height:38px;
}
.categorywrapper .views-row .term-desc {
position:relative;
top:100px;
left:20px;
width:200px;
}
.categorywrapper .views-row .term-image {
position:relative;
}
.categorywrapper .views-row .term-image:hover {
z-index:-2;
}
Add to your css: pointer-events:none; in the .categorywrapper .views-row .term-desc
Basically the result is:
.categorywrapper .views-row .term-desc {
pointer-events:none;
position:relative;
top:100px;
left:20px;
width:200px;
}
Additionally you use a negative z-index on your hover element which means it goes behind the parent elements and triggers the mouseout event which turns off the hover.
You can fix that by instead of applying the following css to the row instead of the image:
.categorywrapper .views-row:hover .term-desc {
z-index:2;
}
Here is the JSFiddle
If you want it over the image do the same but put the .term-desc element inside the tag.
I've never used z-index for image hovers, but I would imagine that if you move the z-index down, the browser no longer considers you to be hovering over the image, so you get the blinking effect you mention. Try producing your hover effect using an alternative background image instead. Or else by changing opacity.
I assume your intention is to show the text when hovering the image. If that is true, you've chosen not only a cumbersome approach, but also one that doesn't work.
Since your image is wrapped in a div already, it is extremely easy to achieve your goal: Just put the div with text that should appear inside the same container that has the image. Apply proper positioning and give it a default opacity: 0; so it's initially invisible.
Then
.categorywrapper .views-row .term-image:hover .term-desc {
opacity: 1;
}
To also get rid of the unwanted whitespace between your h3 and your image, just set the h3's margin-bottom: 0;
http://jsfiddle.net/fveqkcnj/5/
I have 2 divs inside a wrapper div and I was wondering if it's possible to bring the #wrapper div on top of the content (#outer and #inner).
<div id="wrapper">
<div id="outer">
<div id="inner"></div>
</div>
</div>
I want the #wrapper to add a transparent background without making any changes to the HTML. I have tried doing so using z-index without success.
See this fiddle: http://jsfiddle.net/nPpDE/
Any help is much appreciated.
Managed it using :after- http://jsfiddle.net/t6mMR/ -No extra html!
Like this:
#wrapper:after {
position:relative;
top:-200px;
left:0px;
content:"";
width:400px;
height:200px;
display:block;
background:rgba(255, 0, 0,0.5)
}
The pseudo-element is placed above the others, and a semi transparent background applied to it.
__
EDIT: A slightly different way of doing it- (see comment below) (using position:absolute
http://jsfiddle.net/t6mMR/1/
__
Note- To be able to "click through" the pseudo-element, add pointer-events: none; to it.
http://jsfiddle.net/t6mMR/1/
To get this to work in IE, see css 'pointer-events' property alternative for IE, it may help.
You can give the children position: relative and z-index: -1 (or otherwise negative value), but I'm not sure how buggy that is or what the browser support is.
some more info available here: http://philipwalton.com/articles/what-no-one-told-you-about-z-index/
Here's a quick example: http://codepen.io/Rykus0/full/jhwev
Otherwise, as others have said, you need to include a new element and position using either absolute or fixed
What you are asking is not possible.
However, it is possible when you add another div inside the #wrapper and position it with
position:absolute;
and give it a transparent color
http://jsfiddle.net/nPpDE/1/
EDIT: Harley's solution is better since the OP doesn't want to change the HTML
?? and what about having opacity colors on inner containers and regular color on main container:
#wrapper{
position:relative;
background:black;
width:400px;
height:200px;
}
#outer{
position:relative;
width:400px;
height:200px;
background: rgba(50,0,0,0.75);
}
#inner{
position:relative;
width:350px;
height:200px;
background:rgba(0,50,0,0.75);
margin: 0 auto;
}
fiddle that goes with it :) http://jsfiddle.net/nPpDE/2/
I know this has been asked somewhere else, but I can't find the solution. I have a simple layout. A container Div with two floating divs inside. The left div holds the navigation and has a background image. The right div has a solid background and is dynamic based on the content of each page. I am not having issues with the content div. My problem is I want the left div to "stretch" vertically to match the height of the content div. What is happening is the left is only stretching to the min-height value. Here is my CSS:
#containerTemp {
margin-left:auto;
margin-right:auto;
width:1000px;
min-height:100px;
height:auto;
}
#containerNavigation {
width:210px;
float:left;
background-image:url(../images/template/linkbgd.gif);
background-repeat:repeat-y;
min-height:500px;
height:100%;
}
#containerContent {
width:790px;
background:#FFFFFF;
background-repeat:repeat-y;
float:right;
min-height:500px;
height:100%;
}
You can see the issue by visiting this page: http://www.athensfireandrescue.org/?pid=7
I am sure it's something simple, but I can't put my finger on it. Sorry for the redundant question, but my searches just didnt' turn up viable solutions.
Heights can be a bit tricky. However the goal is to make sure the parent containers have 100% height.You have a lot of stuff going on in your web page. So I created an isolated demo to demonstrate how this works.
HTML
<div class="wrapper">
<div class="left"></div>
<div class="right"></div>
</div>
CSS
html, body {height:100%;}
.wrapper {
width:400px;
height:100%;
margin:0 auto;
}
.left {
width:198px;
border:1px solid black;
float:left;
height:100%;
}
.right {
width:198px;
border:1px solid red;
float:left;
height:100%;
}
DEMO:
http://jsfiddle.net/nFdtT/
SOME OTHER STUFF I NOTICED:
If I can offer some advice I would suggest the following:
Don't use tables unless it is tabular data. Your NAV should be constructed using a list.
Remove all inline styles and place them in a separate stylesheet.
<meta> and <style> tags should be in the <head> of your document. (For some reason you have a partial doctype heading nested inside of your <head>)
And if you aren't already, I would suggest using a CSS reset.
It seems there are several posts on this topic but none of the solutions have worked for me. Perhaps someone can figure out what I'm missing.
I have three boxes floated next to each other like columns. Due to certain background images etc., each box is composed of two divs. The outer div has the class "calloutbox" and is floated left. Inside of "calloutbox" is another div called "callout-content" that holds the dynamic content (I'm using wordpress).
So far I have not been able to get the boxes to expand to fit their dynamically generated content. They collapse if I set height to 100%. I've tried a dozen combinations of overflow:hidden, clear:both etc. with no luck.
<div id="callout-container">
<div class="calloutbox">
<div class="callout-content">Dynamic content goes here</div>
</div>
<div class="calloutbox">
<div class="callout-content"></div>
</div>
<div class="calloutbox">
<div class="callout-content"></div>
</div>
</div>
Here is the css:
.calloutbox {
min-height:310px;
width:30%;
float:left;
margin:0 0 0 25px;
position:relative;
background-image:url(images/shadow.png);
background-repeat:no-repeat;
background-position:right bottom;
display:block;
}
.calloutbox:after {
clear:both;
}
.callout-content:after {
clear:both;
}
.calloutbox:nth-child(1) {
min-height:200px;
}
/*The content inside the three boxes on the homepage */
.callout-content {
height:100%;
width:90%;
right:8px;
border:1px solid #e6e4e4;
bottom: 8px;
background-color:white;
position:absolute;
background-image:url(images/yellow-title-bar.png);
background-repeat:repeat-x;
background-position:top;
padding: 0 10px 10px 10px;
}
Here's the code in a jsfiddle if that helps anyone: http://jsfiddle.net/daniec/r8ezY/
Thanks in advance!
They are not floated, they are absolutely-positioned.
Absolutely-positioned elements are no longer part of the layout. They no longer have parents are far as layouts are concerned. Therefore, you need to specify their sizes in pixels rather than percentages. Percentages are relative to the wrappers they no longer have.
Working with floats can be a pain. As an alternative, have you tried using to use inline-block:
display: inline-block;
It behaves like an inline element, but an be styled like a block level element. It does not work in IE6 though.
.calloutbox {
white-space:nowrap;
}
Should do the trick. otherwise try creating a jsfiddle, so we can run your code
I'm trying to make a webpage with the following structure:
1 big div (main), and 3 divs inside it, a left shadow, content, and a right shadow.
these is the css code for them, mleft and mright are the shadows.
body,html{height:100%;}
.main {
width:900px;
height:100%;
}
.mleft, .mright {
width:25px;
height:100%;
float:left;
}
.mleft { background-image: url("shadowleft.jpg"); }
.mright { background-image: url("shadowright.jpg"); }
.content {
width:850px;
float:left;
background-color:red;
}
And the html is like this:
<div class="main">
<div class="mleft"></div>
<div class="mcontent">
(content, some text and images)
</div>
<div class="mright"></div>
</div>
I want this to be viewable in big and small screens, the problem is that when viewing in small screens or making the window small, the main div height goes below the height of content div, so the shadow is too short to cover content div.
I've been playing with min-height, but min-height:auto, doesn't work, and none of the values of "overflow" does what I want.
Any clean way of solving this that works on any browsers?
Should I use javascript?, redo everything another way?
Update:This is an image of how it looks
Update2: The height of main seems to be directly the height of the window (100%) so I main is always the size of the window, which if small it's less than the content inside it, I tried playing with min-height with no success. The expected result is that it resizes until it reaches the size of it's contents, when it should stop.
OK, I've deleted all the old stuff... found a solution using positioning :)
http://jsfiddle.net/Damien_at_SF/AtX4A/
Basically, the shadows sit inside the content div and with absolute positioning are placed at 0,0 left and 0,0 right (or you could move them outside the content using negative positioning)
UPDATE: put the main div back in and applied margin:auto to it's style in order to center the whole lot :)
HTML
<div class="main">
<div class="mcontent">
<div class="mleft"></div>
<div class="mright"></div>
(content, some text and images)>
<div style="clear:both;"></div>
</div>
</div>
CSS
body,html{
height:100%;
margin:0px;
padding:0px;
}
.main {
width:900px;
height:100%;
margin:auto;
}
.mleft, .mright {
width:25px;
height:100%;
}
.mleft {
background:green;
position:absolute;
top:0px;
left:0px;
}
.mright {
background:blue;
position:absolute;
top:0px;
right:0px;
}
.mcontent {
width:850px;
background-color:red;
position:relative;
padding-left:25px;
}
Hope that helps :)