I'm trying to get popups appearing as you hover over one of several boxes, and it's working fine except the other boxes appear over the top of my popup. I've tried applying z-index values to .original-box and .popup-box but no luck. I can't understand why z-index has no effect here?
Here's what I have:
http://jsfiddle.net/CK4tA/
<div class="original-box">
Hover over me
<div class="popup-box popup-box-centre">
Some popup content
</div>
</div>
Thanks in advance for any guidance!
EDIT: Awesome - thanks people! Just for my curiosity, why does adding z-index:0 to .original-box break it? That's what I had originally and didn't work. Thanks again :-)
add z-index to .popup-box.
.popup-box {
position:absolute;
top:0px;
width:230px;
height:230px;
padding:10px;
background-color:#EC006C;
color:#FFF;
-moz-transition:all 0.4s;
-webkit-transition:all 0.4s;
-o-transition:all 0.4s;
transition:all 0.4s;
opacity:0;
filter:Alpha(opacity=0);
z-index: 1;
}
DEMO
Add a z-index to the box to show it on the top layer.
.popup-box{
z-index:1;
}
If you add this to the class in your css, it will work
you should put the z-index property only on the hover event. See below;
.original-box:hover .popup-box {
top:25px;
opacity:1;
filter:Alpha(opacity=100);
z-index: 20;
}
See your revised JSFiddle here. Hope this helps you my friend.
Note that the z-index is 20, you dont want conflicts with other plugins/code using z-index on other items.
Related
Having an issue with CSS transitions ignoring their parents overflow property during the transition in Chrome/Safari.
JS adding an active class to the child:
$('.child').addClass('active');
CSS for the parent/child
.parent {
position:relative;
width:250px;
height:250px;
background:#000;
border-radius:250px;
overflow:hidden;
}
.child {
opacity:0;
transition:1s opacity ease-in-out;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
background:blue;
width:250px;
height:250px;
&.active {
opacity:1;
}
}
Here's the fiddle: https://jsfiddle.net/b3ejm7qr/1/
During the transition, the child's content is shown outside of it's parent then disappears on completion.
Have tried adding backface-visibility with no luck.
Been trying to find the same problem but haven't had any luck... Was wondering if this is a known issue in Chrome/Safari and whether there's a fix / workaround?
Thank you!
You can have 3 solutions to your problem.
The two solutions that have already been stated as:
Add z-index: 1 to your parent.
Mention border-radius: 50% to the child.
And,
Just add the backface-visibility browser specific properties to your parent, along with the transform: translate3d properties. You have to set the translate3d properties manually due to a bug in the webkit browsers.
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
It can be browser bug . But you can give border-radius: 50% for your child element . After giving radius for child everything will for in all browsers
I added z-index to both elements, and maybe is what are you looking at. https://jsfiddle.net/b3ejm7qr/2/
If not, looks like is a bug type, as Giorgi says (Google search, first link).
I'm currently trying to implement some CSS transition effects on a set of different panels, to give the appearance that they are "sliding in" from off screen. I want them each to appear in a different direction (e.g. top to bottom, left to right, etc.)
Presumably, to do bottom to top and right to left, I would just want to set translateX or translateY, but with a positive value, rather than negative. And then for all of them, I would just translate the value to 0 when I want them to appear on screen.
Here is a really simplified version of what I am trying to do:
HTML:
<div class="container">
<div id="about" class="panel">
<h2>About</h2>
<p>I'm Mike and I don't know!</p>
Close
</div>
<div id="projects" class="panel">
<h2>Projects</h2>
<p>Here are some projects I have worked on.</p>
Close
</div>
<div id="contact" class="panel">
<h2>Contact</h2>
<p>You can find me all over the Internet!</p>
Close
</div>
<div id="blog" class="panel">
<h2>Blog</h2>
<p>Here are some blog posts.</p>
Close
</div>
projects
blog
about
contact
</div>
CSS:
.container {
overflow:hidden;
position:relative;
width:100vw;
height:100vh;
}
.panel{
min-width: 100%;
height: 100%;
position: absolute;
box-shadow: 0px 4px 7px rgba(0,0,0,0.6);
z-index: 2;
-webkit-transition: transform .8s ease-in-out;
-moz-transition: transform .8s ease-in-out;
-o-transition: transform .8s ease-in-out;
transition: transform .8s ease-in-out;
}
.panel:target {
-webkit-transition: transform .8s ease-in-out;
-moz-transition: transform .8s ease-in-out;
-o-transition: transform .8s ease-in-out;
transition: transform .8s ease-in-out;
}
.panel#contact {
transform: translateX(110%);
background-color:whitesmoke;
}
.panel#about {
transform: translateX(-110%);
background-color: red;
}
.panel#projects {
transform: translateY(110%);
background-color: blue;
}
.panel#blog {
transform: translateY(-110%);
background-color: gold;
}
.panel#contact:target{
transform: translateX(0%);
}
.panel#about:target{
transform: translateX(0%);
}
.panel#projects:target{
transform: translateY(0%);
}
.panel#blog:target{
transform: translateY(0%);
}
Note that the "About" and "Blog" links are transitioning as expected, whereas the "Projects" and "Contact" links appear to cause weirdness. Those are the two with positive values.
I'm having a really difficult time:
a.) understanding what the problem is exactly
b.) how can I fix it (if at all)
If someone could both explain what the browser is doing right now with those erroneous transitions and provide a solution, I would be much obliged. AFAIK, this is happening in every browser (that supports the :target pseudo element, anyway).
Let me know if you need clarification. Thanks a lot!
UPDATE: Not fixed, but I noticed that if you set the values to <98% for the offending element panels (Projects + Contact), the page transitions properly, though it isn't hidden from the screen. Not sure what that means, but if it helps...
UPDATE 2.0: Thanks for the comments, folks! I tried adding a container, and have updated the HTML and CSS to reflect that. The changes in question are a container div that wraps the panels, as well as the following CSS for that container:
.container {
overflow:hidden;
position:relative;
width:100vw;
height:100vh;
}
I'm still having similar behavior -- this is also updated in the Codepen. I think I understand now the issue, but I'm not quite sure why the page is still jumping to that element in question before applying the transformation. I can imagine there is some hacky way to get around this, but I would rather do it the "right" way.
I decided that using :target and trying to have this be pure CSS wasn't really the way to go, and wound up just using Javascript in a fairly straightforward manner.
Lesson learned: Don't try to do things w/ Pure CSS unless you really have to.
I'm using the next CSS rules for a div
transition-property: width;
transition-duration: 0.2s;
transition-timing-function: linear;
The thing is that currently the behavior is that the transition direction is going from right to left.
Is there anyway to make the transition go the other way around, meaning from left to right?
Thanks for any kind of help
The transition works only for elements that are selected by the query. So if you have this html:
<div>sdlfkj</div>
And this css (WRONG):
div{
width:100px;
}
div:hover{
width:200px;
transition: width 2s;
}
The transition will work only if you hover the element. Not if you unhover the element, because there is no :unhover! If you like to have the transition while unhovering the element too, you need to put the transition to the element that will be selected in the unhovered state then.
Use this (RIGHT):
div{
width:100px;
transition: width 2s;
}
div:hover{
width:200px;
}
I have a transition from height:0, width:0 to a certain width. It is working fine, from the bottom left to the top right. Now I thought if I change the float to 'right', the transition would go from bottom right to top left. Is there some way to make this transition?
css:
.ablauftext{
height:0;
width:0;
position:absolute;
overflow:hidden;
background-color:white;
transition: all 1s ease;
-webkit-transition: all 1s ease;
bottom:90px;
}
.active{
height:400px;
width:400px;
}
javascript:
$('#planung').click(function(){
if(!$current.is('#planungtext')){
$($current).removeClass('active');
setTimeout(function(){$('#planungtext').addClass('active')}, 1000);
$current = $('#planungtext');
}
});
I have IDs on my elements with only the floats, so I don't think I have to add this CSS here.
It is working now, I simply had to add a the right position, like so:
.yourdiv{
right:anyamount;
}
I've been searching but haven't found an answer for the specific problem I'm having.
I wanted to use sliding captions for the images on my art blog. The challenge was that I needed the container to adapt to variable image heights so I didn't have to go in and set it manually every time I post something new. What I have so far is really close to working but...
The div is 5 pixels bigger than the image, regardless of the image's height. I made the div background red so it's easy to see the overlap, but I just can't figure out where those 5 pixels are coming from.
I'm really new at this and changed all the css values I could think of and searched for other examples but I still couldn't get the overlap to go away. Any help would be awesome. I'm so close (I think) but I don't know what else to try. Here's most of the css with a jsfiddle link below:
/* variable container adapts to image size (plus 5 unwanted pixels) */
/* I made the background red so you can see where it's too big */
div#imgContainer {
min-width: 20px;
min-height: 20px;
display:inline-block;
background:red;
}
.postContainer {
position:relative;
overflow:hidden;
background: red;
}
.postContainer .postTextbox {
width:100%;
height:50px;
position:absolute;
bottom:0;
left:0;
margin-bottom:-15%;
margin-left:auto;
margin-right:auto;
opacity: 0;
border:0px;
background: black;
}
.postContainer:hover .postTextbox {
margin-bottom:0;
opacity: 1;
}
.postTextbox {
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}
http://jsfiddle.net/nun243j1/
Thanks again in advance!
It may be because of white-space between elements. Apply image {display: block;} for images to remove this problem.