Hide on :hover, DIV over DIV - css

I have a DIV on top of another DIV.
What I want to achieve is hide the DIV on top to be able to access the DIV below.
I've tried opacity, but since the top DIV is still there, just transparent, It won't allow me to interact with the content of the DIV below.
I've also tried display:none;, visibility: hidden; and z-index. None of those would work.
How do I achieve this with CSS3, so I can also use a transition?
HTML:
<li class="panel-box">
<div class="front box-style"> </div>
<div class="back"> </div>
</div> </li>
CSS:
.panel-box {
margin: 5px;
padding: 0;
display: inline-block;
clear: none;
float: left;
width: 310px;
height: 200px;
position: relative;
}
.box-style {
background-color: red;
}
.front {
width: 310px;
height: 200px;
z-index: 5;
opacity: 0;
display: block;
position: absolute;
top: 0;
left: 0;
}
.front:hover {
opacity: 0;
display: none;
}
.back {
width: 310px;
height: 200px;
background-color: rgba(57, 54, 55, 0.95);
position: absolute;
top: 0;
left: 0;
z-index: 0;
}
Thanks a bunch.

I've put together a bit of a workaround that seems to do some of this, but it will likely fail miserably on IE.
Tested and works reasonably on Chrome… YMMV :)
It uses a combination of z-index and sibling selectors to allow the front/back divs to swap places in the stacking context.
I had to swap places with front/back to use the CSS sibling selectors. I don't claim this is a perfect example, but perhaps it'll get the ideas flowing.
Basically what is happening here is:
As the mouse enters - trigger .front:hover
front z-index goes to -1 triggering .back:hover
back z-index immediately goes to 100 keeping it on top of the stack
sibling selector back:hover + front keeps the front opacity at 0
When the mouse transitions out, this all reverses
The reverse transition is not very smooth - haven't quite figured out if that can be fixed yet.
Demo
CSS
.panel-box {
margin: 5px;
padding: 0;
display: inline-block;
clear: none;
float: left;
width: 310px;
height: 200px;
position: relative;
}
.front {
width: 310px;
height: 200px;
padding: 10px;
z-index: 5;
opacity: 1;
display: block;
position: absolute;
background-color: red;
top: 0;
left: 0;
-webkit-transition: opacity .5s ease;
}
.front:hover {
opacity: 0;
z-index: -1;
}
.back {
width: 310px;
height: 200px;
padding: 10px;
color: white;
background-color: rgba(57, 54, 55, 0.95);
position: absolute;
top: 0;
left: 0;
z-index: 0;
opacity: 0;
-webkit-transition: opacity .5s ease;
}
.back:hover + .front {
opacity: 0;
}
.back:hover {
z-index: 100;
opacity: 1;
}
HTML
<li class="panel-box">
<div class="back">content goes here</div>
<div class="front box-style"></div>
</li>

Related

Add style when hover animation is finished

Is it possible to add another style when the hover animation is completely finished?
With the default hover all styles get applied at the same time.
So changing from display: none to display: block will override any transformation because the element will just appear out of nowhere.
In the following example something like this would be helpful, because right now you can trigger the hover effect from outside of the actual "hover area".
.grid_content {
padding: 15px;
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 300px;
background: salmon;
}
.grid_hover {
width: calc(100% - 30px);
height: calc(100% - 30px);
opacity: 0;
transition: all 0.5s;
transition-timing-function: cubic-bezier(1, 0.09, 0.37, 0.93);
position: absolute;
z-index: 5;
}
.bottom_left {
transform-origin: bottom left;
transform: rotate(90deg);
}
.text_overlay {
top: 50%;
width: 70%;
max-height: 80%;
margin: 0 15%;
text-align: center;
z-index: 4;
position: absolute;
}
.background_overlay {
background: #ffffff;
width: 100%;
height: 100%;
bottom: 0;
opacity: 0.95;
z-index: 1;
position: absolute;
}
.box_overlay {
border: 1.5px solid #000000;
width: calc(100% - 2vw);
height: calc(100% - 2vw);
margin: 1vw;
float: left;
z-index: 2;
position: relative;
box-sizing: border-box;
}
.grid_content:hover > .grid_hover {
opacity: 1;
transform: rotate(0);
}
.hover_here {
position: absolute;
top: 350px;
}
<div class="grid_content">
<div class="grid_hover bottom_left">
<div class="text_overlay"> <p>Lorem Ipsum</p></div>
<div class="background_overlay"></div>
</div>
</div>
<p class="hover_here">
Hover somewhere around here to see the "bug"
</p>
I also tried to just set grid_hover to pointer-events: none; that worked, but I can't use it because inside that div will be a button that has to be clickable.
My idea or what I want to achieve is something like this:
.grid_hover is set to display: none at the beginning
hovering on .grid_content will set it to display: block and after that happened the animation should run
Is there a way to make this work in just css without javascript?

Using pseudo selector :after to create an overlay over an image -- not taking the full height

Trying to create an overlay effect on hover, using :after, but it's not taking the full height.
It will work if I give a:after a fixed height in pixels. But I was hoping not to set a static height so it can be applied to images of all sizes.
Thanks in advance!
* {
margin: 0;
padding: 0;
}
.container {
width: 500px;
height: 500px;
}
a {
position: relative;
height: 100%;
width: 100%;
}
a:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(0,0,0,0.4);
opacity: 0;
transition: all .4s;
-webkit-transition: all .4s;
}
a:hover:after {
opacity: 1;
}
<div class="container">
<a href="#">
<img src="https://vignette.wikia.nocookie.net/dragonballfanon/images/7/70/Random.png/revision/latest?cb=20161221030547">
</a>
</div>
I removed width: 100%; and height: 100% from a and added display: inline-block; By default a tags have a display value of inline which ignores width and height values so they weren't doing anything before anyway. display: inline-block; is probably what you wanted to go with from the beginning.
* {
margin: 0;
padding: 0;
}
.container {
width: 500px;
height: 500px;
}
a {
position: relative;
display: inline-block;
}
a::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(0,0,0,0.4);
opacity: 0;
transition: all .4s;
-webkit-transition: all .4s;
}
a:hover::after {
opacity: 1;
}
<div class="container">
<a href="#">
<img src="https://vignette.wikia.nocookie.net/dragonballfanon/images/7/70/Random.png/revision/latest?cb=20161221030547">
</a>
</div>
<a> tag default display is display: inline.
To achieve the desired result you should display your <a> as inline-block. See docs: https://www.w3schools.com/css/css_inline-block.asp
a {
position: relative;
display: inline-block;
}
* {
margin: 0;
padding: 0;
}
.container {
width: 500px;
height: 500px;
}
a {
position: relative;
display: inline-block;
}
a:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(0,0,0,0.4);
opacity: 0;
transition: all .4s;
-webkit-transition: all .4s;
}
a:hover:after {
opacity: 1;
}
<div class="container">
<a href="#">
<img src="https://vignette.wikia.nocookie.net/dragonballfanon/images/7/70/Random.png/revision/latest?cb=20161221030547">
</a>
</div>
Your <a> element is not getting the full height, because by default is displayed as inline.
You can set display:inline-block; to change the default render behavior... or you can play with the position property.
Setting the container to position:relative, and the a and the a:after to position:absolute, will let you force the a:after to adjust to top:0px; and bottom:0px; covering the full height.
With that changes, everything works as expected.
Check it.
.container {
width: 500px;
height: 500px;
position: relative;
}
a {
position: absolute;
}
a:after {
content: '';
position: absolute;
width: 100%;
top: 0;
bottom: 0px;
background: rgba(0,0,0,0.4);
transition: all .4s;
-webkit-transition: all .4s;
opacity:0.2;
}
a:hover:after {
opacity: 1;
}
<div class="container">
<a href="#">
<img src="https://vignette.wikia.nocookie.net/dragonballfanon/images/7/70/Random.png/revision/latest?cb=20161221030547">
</a>
</div>
add a display block:
a {
position: relative;
height: 100%;
width: 100%;
display:block;
}

CSS transition background color without a hover

I have a div called time-box. Sometimes I will also include an additional class called countdown. If countdown is added then I would like to use a CSS transition effect so the background changes to be red over the course of 60 seconds. In other words, each second that passes the red background gets a little wider until eventually all of the green background has gone.
I have found similar posts here but they all seem to relate to hover
Here is a fiddle
https://jsfiddle.net/e2vbheew/
I don't know a "simple" way to get what you want going from left to right, but there's a way you can create it using before and after pseudoelements. The key here is I'm going to create a :before pseudoelement that has the new background that transitions across, and an :after pseudoelement that replicates the content and puts it on top of the before, so it's still visible. This required putting the content in an attribute on the div so I could reference it in the 'content' of the pseudoelement. If you had more complex content inside, you could probably do away with the :after and simply give the internal content position and z-index to make sure it's visible. Here's the resulting CSS
.time-box {
height: 27px;
text-align: center;
background-color: #25E57B;
font-size:2rem;
padding:0px;
font-size:1.2rem;
text-transform:uppercase;
padding:3px 5px 3px 5px;;
font-weight:600;
height:auto;
position: relative;
}
.time-box:before {
background-color: red;
position: absolute;
left:0;
top: 0;
height: 100%;
width: 0;
content: " ";
transition: width 60s ease;
}
.countdown:after {
content: attr(data-content);
width: 100%;
text-align: center;
height: 100%;
position: absolute;
left: 0;
top: center;
z-index: 1;
}
.countdown:before {
width:100%;
}
And updated fiddle: https://jsfiddle.net/tunzwqd7/2/
Using CSS animation property...
.time-box {
height: 27px;
text-align: center;
background-color: #25E57B;
font-size: 2rem;
padding: 0px;
font-size: 1.2rem;
text-transform: uppercase;
padding: 3px 5px 3px 5px;
font-weight: 600;
height: auto;
position: relative;
z-index: 1;
}
.time-box.countdown:before {
content: '';
width: 0;
height: 100%;
display: block;
position: absolute;
top: 0;
left: 0;
background: red;
animation: countdown 60s forwards;
z-index: -1;
}
#keyframes countdown {
0% {
width: 0;
}
100% {
width: 100%;
}
}
<div class="time-box">
12:00
</div>
<div class="time-box countdown">
<span>12:00</span>
</div>
You would need to add a maximum and a little more math to make the 100% divisible by 60, but this should get you on the right track. Currently this code updates every second and adds 1% to the progress bar width with each iteration.
var time = 0;
var bar = document.querySelector('.countdown .progress-bar');
window.setInterval(function(){
time++;
bar.style.width = time+"%";
}, 1000);
.time-box {
height: 27px;
text-align: center;
background-color: #25E57B;
font-size:2rem;
padding:0px;
font-size:1.2rem;
text-transform:uppercase;
padding:3px 5px 3px 5px;;
font-weight:600;
height:auto;
position: relative;
}
.progress-bar {
display: none;
}
.countdown .progress-bar {
display: block;
position: absolute;
left: 0;
top: 0;
bottom: 0;
background: red;
width: 0%;
z-index: 1;
transition: all 0.3s ease-out;
}
.countdown p {
z-index: 2;
position: relative;
}
<div class="time-box">
<p>12:00</p>
<div class="progress-bar"></div>
</div>
<div class="time-box countdown">
<p>12:00</p>
<div class="progress-bar"></div>
</div>

CSS transition and z-index

I have a fixed top navbar with dropdowns. I want to slide the dropdown menus in on hover. I want that the menu is behind the navbar while sliding in. So I've simply tried to set the z-index of both elements which unfortunately did not work for me.
Here a simplified example (codepen)
html
<div class="fixed-top">
<span class="trigger">hover me</span>
<div class="menu"></div>
</div>
css
.fixed-top {
background: #3b5999;
height: 50px;
width: 100%;
padding: 0;
top: 0;
position: fixed;
z-index: 2;
}
.trigger {
z-index: 2;
font-size: 33px;
color: white;
margin-left: 50%;
}
.trigger:hover + .menu {
margin-top: 0;
}
.menu {
z-index: 1;
height: 300px;
background-color: #1c7754;
width: 400px;
margin: auto;
margin-top: -400px;
transition: all 0.75s ease-out;
}
In case it's not clear what I want to do here a simple mspaint sketch ;)
This is an extremely common error when beginning to work with stacking contexts in CSS. Basically, you just have to remember that a child cannot exist in a different stacking context from a parent.
So if I have a non-static element (meaning an element with position: anything-but-static [fixed, relative, absolute]), and if that element has no non-static parent element, then it will be at stacking context level 1, no matter where it is in the DOM. Now if that element has a non-static child element, that child will be at stacking context level 2. It cannot be on the same level (level 1) as its parent element. z-index can only affect elements on the same stacking context level, it has nothing to do with elements on different stacking context levels.
The solution is to restructure your HTML, or just use a :before or :after pseudo-element, thus:
.fixed-top {
height: 50px;
width: 100%;
padding: 0;
top: 0;
position: fixed; /* The parent: stacking context level 1 */
}
.fixed-top:before {
background: #3b5999;
content:'';
position: absolute; /* stacking context level 2 */
top: 0; right: 0; bottom: 0; left: 0;
z-index: 1;
}
.trigger {
color: white;
font-size: 33px;
margin-left: 50%;
position: relative; /* also stacking context level 2 */
z-index: 2;
}
.trigger:hover + .menu {
margin-top: 0;
}
.menu { /* bottom layer -- no stacking context necessary */
z-index: 0;
height: 300px;
background-color: #1c7754;
width: 400px;
margin: auto;
margin-top: -400px;
transition: all 0.75s ease-out;
}
Note the comments denoting the stacking context levels.
And here's a JSFiddle for an example.
Try running the Code Snippet.
.fixed-top {
background: #3b5999;
height: 50px;
width: 100%;
padding: 0;
top: 0;
position: fixed;
z-index: 2;
}
.trigger {
font-size: 33px;
color: white;
margin-left: 50%;
width: 100%;
height: 50px;
top: 0;
position: fixed;
z-index: 3;
}
.trigger:hover + .menu,
.menu:hover{
margin-top: 0;
}
.menu {
z-index: 1;
height: 300px;
background-color: #1c7754;
width: 400px;
margin: auto;
margin-top: -400px;
transition: all 0.75s ease-out;
}
<div class="fixed-top"></div>
<span class="trigger">hover me</span>
<div class="menu"></div>
i think this is what you want.
css code
.fixed-top {
background: #3b5999;
height: 50px;
width: 100%;
padding: 0;
top: 0;
position : fixed;
}
.trigger {
z-index: 500;
font-size: 33px;
color: white;
margin-left: 50%;
position : absolute;
}
.trigger:hover + .menu {
margin-top: 0;
}
.menu {
z-index: -9999;
position : relative;
height: 300px;
background-color: #1c7754;
width: 400px;
margin: auto;
margin-top: -400px;
transition: all 0.75s ease-out;
}
<div class="fixed-top">
<span class="trigger">hover me</span>
<div class="menu"></div>
</div>
here is the reference that you can check
http://www.smashingmagazine.com/2009/09/the-z-index-css-property-a-comprehensive-look/

Centre combined divs

EDIT: All sorted now. Thanks to everyone that helped! :)
I am having trouble centering an element of my website. It is 3 divs mixed together to form a hexagon.
I cannot center it.
HTML:
<li>
<div class="centerhex">
<a href="#">
<div class="hexa">
<div class="hexcontainer">
<div class="vertical-align">
<span class="hextext">Lorem Ipsum Dolor</span>
</div>
</div>
</div>
</a>
</div>
</li>
CSS:
.centerhex {
left: 50%;
margin: 0 auto;
width:210px;
height:300px;
}
.hexa {
width: 100%;
min-width: 200px;
height: 0;
padding-bottom: 57.7%;
margin-top: 65px;
background-color: #4a4a4a;
/*position: absolute;*/
color: #ffffff;
font-family: 'Oswald', sans-serif;
font-size: 18px;
border-radius: 4%/20%;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.hexa::before,
.hexa::after {
content:"";
display: block;
width: inherit;
height: inherit;
padding: inherit;
background: inherit;
z-index: 0;
position: absolute;
border-radius: inherit;
-moz-transform:rotate(60deg);
-webkit-transform:rotate(60deg);
-o-transform:rotate(60deg);
-ms-transform:rotate(60deg);
}
.hexa::after {
-moz-transform:rotate(-60deg);
-webkit-transform:rotate(-60deg);
-o-transform:rotate(-60deg);
-ms-transform:rotate(-60deg);
}
.hexcontainer {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
z-index: 10;
}
.vertical-align {
display: table;
height: 100%;
width: 100%;
}
Also, I need help so the bottom of the shape isn't cut off.
URL: http://jackmarshallphotography.co.uk/V1/donate.html
There are few things to change in your css, I worked directly on your website with the chrome developer tool, please find below the css to center the "tag" :
.servicebox {
position: absolute;
margin-top: -77px;
width: 100%;
}
.servicebox ul {
list-style: none;
width: 100%;
text-align: center;
}
.servicebox ul li {
margin-left: 12px;
}
.centerhex {
margin: auto;
width: 210px;
height: 300px;
}
Hope it helps.
For the second issue :
you need to edit the file hexagon.css and change the margin-top property find the right value: -65px or more (line 47)
Yoann
Let me see if I can help you with a simple example.
Have a fiddle - fiddle link!
Edit! - Here is another fiddle without absolute positioning... seems like this can be achieved without it - fiddle link - no absolute positioning
Absolute positioning example:
HTML
<div id="parentOfCentered">
<div id="perfectlyCentered"></div>
</div>
CSS
#parentOfCentered {
position: relative; /* Absolutely positioned children will be positioned in relation to the parent div */
background: #CCC;
width: 400px;
height: 400px;
}
#perfectlyCentered {
width: 200px;
height: 200px;
background: #000;
position: absolute;
left: 50%;
top: 50%;
margin: -100px 0 0 -100px;
/*
- negative top margin of half the height
- negative left margin of half the width
*/
}

Resources