For a picture preview I want to put 2 invisble divs (red/blue in the picture) in front of a picture for next/previous image functionality.
I would like to have the div ("pictureContainer"/ green bordered zone) to automatically take over the dimension of the containing picture but I can't find a PURE CSS solution without setting the width and the height manually.
.container {
position: fixed;
width: 100%;
height: 100%;
border: 3px solid black;
}
.pictureContainer {
/* I don't want to set width and hight manuyally.
The container should have the size if the contained image. */
height: 50%;
width:300px;
position: relative;
margin: auto;
border: 3px solid green;
}
.leftSide {
background-color: blue;
float: left;
height: 100%;
width: 50%;
opacity: 80%;
}
.rightSide {
background-color: red;
float: right;
height: 100%;
width: 50%;
opacity: 80%;
}
.picture {
position: absolute;
top: 0;
left: 0;
margin: auto;
z-index: -1;
}
<div class="container">
<div class="pictureContainer">
<div class="leftSide"></div>
<img class="picture" src="https://www.9skips.com/wp-content/uploads/2018/01/anger-300x300.jpg">
<div class="rightSide"></div>
</div>
</div>
Also the container should be horizontally aligned.
Note: The full screen white div with the black border is used to close the picture preview.
You should change so the divs have absolut: position, let the image have it's natural size, container should be display: inline-block;
.container {
display: flex;
align-items: center;
justify-content: center;
position: fixed;
width: 100%;
height: 100%;
border: 3px solid black;
}
.pictureContainer {
position: relative;
display: inline-block;
margin: 0 auto;
border: 3px solid green;
}
.picture {
display: block;
}
.leftSide {
position: absolute;
top: 0;
bottom: 0;
left: 0;
background-color: blue;
width: 50%;
opacity: 80%;
z-index: 1;
}
.rightSide {
position: absolute;
top: 0;
bottom: 0;
right: 0;
background-color: red;
height: 100%;
width: 50%;
opacity: 80%;
z-index: 1;
}
<div class="container">
<div class="pictureContainer">
<div class="leftSide"></div>
<img class="picture" src="https://www.9skips.com/wp-content/uploads/2018/01/anger-300x300.jpg">
<div class="rightSide"></div>
</div>
</div>
I have a situation where the 'bar' div, display some information about the 'foo' element, when the 'foo' element is hovered. But the scroll bar conflict with that, and hide the rest of my div. Can I get it to display the full 'bar' div somehow?
HTML
<div class="box">
<div class="foo">
xxx
<div class="bar">Info text, info text</div>
</div>
</div>
CSS
.box {
height: 80px;
width: 80px;
background: blue;
position: absolute;
overflow-y: scroll;
overflow-x: hidden;
}
.foo {
float: left;
background: red;
height: 50px;
width: 50px;
position: relative;
}
.bar {
float: left;
height: 20px;
width: 125px;
background: orange;
position: relative;
top: -10px;
right: -30px;
display: none;
}
.foo:hover > .bar {
display: block;
}
You could set the .bar div to position:fixed
JSfiddle Demo
CSS
.box {
height: 80px;
width: 80px;
background: blue;
position: absolute;
overflow-y: scroll;
overflow-x: hidden;
}
.foo {
float: left;
background: red;
height: 50px;
width: 50px;
}
.bar {
height: 20px;
width: 125px;
background: orange;
position: fixed;
display: none;
}
.foo:hover > .bar {
display: block;
}
I have a conundrum: I need the darkest-gray bar you see on the bottom right (after opening the below code locally) spanning across as much space as the browser window will allow WITHOUT crossing over the light-gray section I have set up on the left. Here is my code:
<div class="timeline-section">
<div class="timeline-wrapper">
<div class="mini-timline"></div>
<div class="timeline"></div>
<div class="clearfix"></div>
</div>
</div>
CSS:
.clearfix { clear: both; }
.timeline-wrapper { position: relative; }
.timeline-section {
background: #3d3d3d;
bottom: 0px;
height: 276px;
left: 0px;
width: 100%;
position: absolute;
padding: 0px;}
.mini-timline {
background: #474747;
margin: 0px;
float: left;
height: 276px;
width: 500px;
display: inline-block;}
.timeline {
background: #232323;
height: 200px;
width: 60%;
float: left;
display: inline-block;
position: relative;}
One method is not to float the timeline element.
Just set a margin-left for the width of the mini-timeline:
.timeline {
background: #232323;
height: 200px;
margin-left:500px;
position: relative;
color:#FFF;
}
http://jsfiddle.net/rLzAM/1/
Try this:
.timeline {
background: #232323;
height: 200px;
width: 100%;
display: inline-block;
position: absolute;
}
I have an HTML table realized as a bunch of divs (for making a scrollable table).
In one of the cells (a div), I want to show a popup which overlaps other cells.
Like so:
http://jsfiddle.net/pFx6m/
My markup:
<div class="dataRow">
<div class="firstCell">lalala</div>
<div class="secondCell">lululu</div>
<div class="thirdCell">
<div id="someBigContent"></div>
<div class="clearRight"></div></div>
</div>
<div class="dataRow">
<div class="firstCell">lalala</div>
<div class="secondCell">lululu</div>
<div class="thirdCell">
</div>
</div>
<div class="dataRow">
<div class="firstCell">lalala</div>
<div class="secondCell">lululu</div>
<div class="thirdCell">lilili</div>
</div>
My CSS:
.dataRow {
height: 30px;
width:300px;
max-height: 30px;
}
.dataRow > div {
display: table-cell;
height: 30px;
z-index: 0;
overflow:hidden;
}
.firstCell {
width: 100px;
height: 10px;
background-color: blue;
}
.secondCell {
width: 100px;
height: 10px;
background-color: red;
}
.thirdCell {
width: 100px;
height: 10px;
background-color: yellow;
}
.clearRight {
clear: right;
}
#someBigContent {
height:100px;
width:250px;
background-color: #000;
position: relative;
top: 0px;
left: -50px;
float:right;
z-index: 999;
}
Now I'm doing something wrong, because it doesn't overlap the cells left of the someBigContent (cells one and two) and it makes some rows bigger than they're supposed to be.
See this fiddle for an overview of the situation.
How can I just make the cells overlap (and maybe the content that is under there — not just the table)?
With that CSS the block #someBigContent will not affect the rows or cells sizes:
.dataRow {
height: 30px;
width:300px;
max-height: 30px;
}
.dataRow > div {
display: relative;
float: left;
height: 30px;
z-index: 0;
}
.firstCell {
width: 100px;
height: 10px;
background-color: blue;
}
.secondCell {
width: 100px;
height: 10px;
background-color: red;
}
.thirdCell {
width: 100px;
height: 10px;
background-color: yellow;
}
.clearRight {
clear: right;
}
#someBigContent {
height:100px;
width:250px;
background-color: #000;
position: absolute;
top: 10px;
left: 10px;
z-index: 999;
}
Now you can adjust the position of this block relative to parent cell.
It is very strange to see an table made out of div's...
but try in CSS to add
max-width: 100px !important;
For the div/table thing that breaks out ?
With the following html, when I hover over child, I get a green background on parent. How can I stop that from happening? I do want the green background if I am hovering outside of the child element.
CSS3 is fine.
.parent {
padding: 100px;
width: 400px;
height: 400px;
}
.parent:hover {
background-color: green;
}
.child {
padding: 100px;
width: 200px;
height: 200px;
}
.child:hover {
background-color: blue;
}
<div class="parent">
<div class="child">Child</div>
</div>
So this is REALLY ugly, but it works (kind of). I'm basically creating a duplicate of parent as a sibling of child. parent-overwrite is hidden by default, then displayed on the hover of child. Chrome doesn't like it unless you use the + selector instead of the ~ selector. This isn't very scalable, but it may work.
As the other guys posted, javascript would likely be a better solution.
<style>
.parent { padding: 100px; width: 400px; height:400px; position: relative; z-index: 998; }
.parent:hover { background-color: green; }
.child { padding: 100px; width: 200px; height:200px; position: relative; z-index: 1000; }
.child:hover { background-color: blue; }
.parent-overwrite { padding: inherit; width: inherit; height: inherit; position: absolute; top: 0; left: 0; z-index: 999; background-color: #FFF; display: none; }
.child:hover ~ .parent-overwrite { display: block; }
</style>
<div class="parent">
<div class="child">Child</div>
<div class="parent-overwrite"></div>
</div>
In 2022:
This can be now achieved using a combination of the :has and :not pseudo-classes, with the following expression:
.parent:hover:not(:has(.child:hover)) {}
To break it down:
.parent
/* When this element is hovered */
:hover
/* but it does not */
:not(
/* have a child node .child, that is also hovered */
:has(.child:hover)
) {
/* apply these rules */
}
A working modification of the original snippet is below:
.parent {
padding: 100px;
width: 400px;
height: 400px;
}
.parent:hover:not(:has(.child:hover)) {
background-color: green;
}
.child {
padding: 100px;
width: 200px;
height: 200px;
}
.child:hover {
background-color: blue;
}
<div class="parent">
<div class="child">Child</div>
</div>
It can also be made recursive by reusing the .parent selector in place of the .child selector.
See browser support here. At the time of writing, all major browser support it—except Firefox, which still has a flawed experimental implementation.
I can only do this with adding additional markup. An empty div needs to be added that essentially functions as the parent background. Take a look at the CSS here.
HTML Part:
<div class="parent">
Parent
<div class="child">
Child
<div class="grandson">
Grandson
<div class="grandson-bg"></div>
</div>
<div class="child-bg"></div>
</div>
<div class="parent-bg"></div>
</div>
CSS part:
article, aside, figure, footer, header, hgroup, menu, nav, section { display: block; }
.parent { display: block; position: relative; z-index: 0;
height: auto; width: auto; padding: 25px;
}
.parent-bg { display: block; height: 100%; width: 100%;
position: absolute; top: 0px; left: 0px;
border: 1px solid white; z-index: 0;
}
.parent-bg:hover { border: 1px solid red; }
.child { display: block; position: relative; z-index: 1;
height: auto; width: auto; padding: 25px;
}
.child-bg { display: block; height: 100%; width: 100%;
position: absolute; top: 0px; left: 0px;
border: 1px solid white; z-index: 0;
}
.child-bg:hover { border: 1px solid red; }
.grandson { display: block; position: relative; z-index: 2;
height: auto; width: auto; padding: 25px;
}
.grandson-bg { display: block; height: 100%; width: 100%;
position: absolute; top: 0px; left: 0px;
border: 1px solid white; z-index: 0;
}
.grandson-bg:hover { border: 1px solid red; }
http://jsbin.com/ubiyo3/edit
The easiest thing to do may be to use JS for this sort of CSS. Maybe you can try to rethink your implementation. Why are you trying to do something like this?
This is not possible using plain-vanilla CSS. You're asking for a pseudo-class of a child (child:hover) to affect the background declaration of a parent. There's no way to specify that sort of thing using regular css.
This can definitely be done using javascript.
I have what i think is a better solution, since it is scalable to more levels, as many as wanted, not only two or three.
I use borders, but it can also be done with whatever style wanted, like background-color.
With the border, the idea is to:
Have a different border color only one div, the div over where the mouse is, not on any parent, not on any child, so it can be seen only such div border in a different color while the rest stays on white.
You can test it at: http://jsbin.com/ubiyo3/13
And here is the code:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Hierarchie Borders MarkUp</title>
<style>
.parent { display: block; position: relative; z-index: 0;
height: auto; width: auto; padding: 25px;
}
.parent-bg { display: block; height: 100%; width: 100%;
position: absolute; top: 0px; left: 0px;
border: 1px solid white; z-index: 0;
}
.parent-bg:hover { border: 1px solid red; }
.child { display: block; position: relative; z-index: 1;
height: auto; width: auto; padding: 25px;
}
.child-bg { display: block; height: 100%; width: 100%;
position: absolute; top: 0px; left: 0px;
border: 1px solid white; z-index: 0;
}
.child-bg:hover { border: 1px solid red; }
.grandson { display: block; position: relative; z-index: 2;
height: auto; width: auto; padding: 25px;
}
.grandson-bg { display: block; height: 100%; width: 100%;
position: absolute; top: 0px; left: 0px;
border: 1px solid white; z-index: 0;
}
.grandson-bg:hover { border: 1px solid red; }
</style>
</head>
<body>
<div class="parent">
Parent
<div class="child">
Child
<div class="grandson">
Grandson
<div class="grandson-bg"></div>
</div>
<div class="child-bg"></div>
</div>
<div class="parent-bg"></div>
</div>
</body>
</html>