I have a div element containing a paragraph tag of text. When I hover this div, I want the text to come out the div (from behind). I tried negative z-index but it didn't work.
.box p {
display: block;
position: absolute;
top: 0;
right: 0;
opacity: 0;
z-index: -1;
visibility: hidden;
transition: top .3s, opacity .3s, visibility .3s, z-index .3s;
}
.box:hover p {
top: -28px;
opacity: 1;
z-index: 1;
visibility: visible;
}
Two problems. First, you have visibility:hidden in both cases so the element will never show.
The second problem is, the div has no height when the <p> isn't visible or hovered over so you can't hover over it at all.
To fix this to help get you on your way:
div {height:100px;}
.box p {
display: block;
height:300px;
position: absolute;
top: 0;
right: 0;
opacity: 0;
z-index: -1;
transition: top .3s, opacity .3s, visibility .3s, z-index .3s;
}
.box:hover p {
top: -28px;
opacity: 1;
z-index: 1;
}
But that might be the ideal way for you and you'll need to adjust it.
Note that, on hover, you have top: -28px; so it's scrolled slightly off screen on the right hand side.
EDIT:
Another thing I want you to be aware of. z-index is not a transitional property. That is, you cannot transition from zero to 0.1 to 0.2 on your way to a rounded 1.0. z-index is an actual layer and you can only go in whole units from one level to the next.
Related
I created a menu that slides in on hover.
When i move the mouse away from the menu it doesn't return to the pre hover state even though I've specified the container width and height so anywhere the mouse moves outside that it should return.
#menucontrol {
width:500px;
height: 800px;
}
#menucontrol:hover #navdiv {
left: 23px;
transition: all .3s ease-in-out;
opacity: 1.0;
}
#menucontrol:hover #dashes {
transform: rotate(360deg);
transition: all .3s ease-in-out;
opacity: 0;
}
#navdiv {
position: absolute;
top: 68px;
left:-55px;
z-index:999999;
opacity: 0;
width: 555px;
transition: all .3s ease-in-out;
}
The reason this is happening is that your #menucontrol div is taking up the entire page except for the area of your logo. I would suggest trying the :hover psuedo element on your #dashes id. I also noticed your z-indexes are set on some elements and not others. I think this could also be causing you some issues. Without seeing your html it is hard to duplicate and make changes to help you solve this issue.
I have a parent div wrapped around a scaled child div. The child div starts off with transform:scale(0,0); & expands to transform:scale(1,1); when a button is clicked.
.content-wrapper {
display: inline-block;
background-color: #ddf;
padding: 10px;
clear: both;
}
.content {
padding: 10px;
background-color: #fff;
display: flex-block;
overflow: hidden;
transform:scale(0,0);
transform-origin:top;
transition:transform 1s ease-out;
}
.content.open {
transform:scale(1,1);
}
However the parent div content-wrapper stays at the same size of the child div content - even when the child is "closed".
The desired behaviour is when the child div is closed the parent div shrinks to only wrap around the button.
JSFiddle of Example
Is it possible to wrap the parent div around the child div when it's "closed" in this example?
This will be a little challenging because the background color is attached to the content container. I would remove the background color from the main container, then make it a separate div positioned absolute
<div class="content">
...
<div class="content-bg"> //contains your background color
then manipulate that based on your click handler.
I've updated the JSFiddle http://jsfiddle.net/ztxa5kwu/90/
CSS for the new div:
.content-bg{
position: absolute;
background-color: #ddf;
left: 0;
right: 0;
bottom: 0;
top: 0;
z-index: -1;
transition: all .5s ease;
transform-origin: bottom right;
}
Notice the transform-origin: bottom right; to scale the background towards your button. In the JSFiddle, I made the button take on a border the same color as the background, but you could easily edit the size of the new <div class="content-bg"></div> to fit around your button.
Hope that helps, and gets you in the right direction.
Try this:
.content {
background-color: #fff;
overflow: hidden;
transform:scale(0,0);
transform-origin:top;
transition:transform 1s ease-out;
display: block;
padding: 0;
height: 0; width: 0;
}
.content.open {
padding: 10px;
height: auto; width: auto;
transform: scale(1,1);
}
Edit: Play with this:
.content {
padding: 0;
background-color: #fff;
display: block;
overflow: hidden;
transform-origin:top;
transition: transform 1s ease-out, max-width 0.5s ease-out 0.4s, max-height 1s ease-out;
transform: scale(0,0); max-width: 0; max-height: 0;
}
.content.open {
padding: 10px;
transition: transform 1s ease-out, max-width 1s ease-out, max-height 8s ease-out;
transform: scale(1, 1); max-width: 1920px; max-height: 1080px;
}
I found this comment on an older question:
This method only partially achieves the desired effect but doesn't
actually remove the space. The transformed box acts like a
relatively positioned element - the space is taken up no matter how it
is scaled. Check out this jsFiddle which takes your first one and
just adds some bogus text at the bottom. Note how the text below it
doesn't move up when the box height is scaled to zero. – animuson♦ Jul
29 '13 at 20:37
So with that in mind I used the max-height/ max-width hack to get something close to what I was after: http://jsfiddle.net/BaronGrivet/ztxa5kwu/176/
.content {
padding: 10px;
background-color: #fff;
display: flex-block;
overflow: hidden;
transform:scale(0,0);
transform-origin:top;
transition:all 1s ease-out;
max-width: 0;
max-height: 0;
}
.content.open {
transform:scale(1,1);
max-width: 500px;
max-height: 500px;
}
I have a problem with obtaining the effect of the dropdown menu to Wordpress template. I tried already do for many hours and it is unchanged. My knowledge of CSS is not too big, so I ask you for help.
I added to the template function dropdown menu that works on the theme of the child. I would like to get rid of gaps that are unnecessary for items from the sub-menu. Example, I'm interested in the effect as in the case of the "Test 1" and "dropmenu."
Child code:
.sub-menu {
visibility: hidden; /* hides sub-menu */
opacity: 0;
top: 100%;
left: -20px;
height: 0px;
width: 100%;
transform: translateY(-2em);
z-index: -1;
transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s;
}
.menu-item:hover .sub-menu {
visibility: visible; /* shows sub-menu */
opacity: 1;
display: block;
height: 64px;
z-index: 1;
transform: translateY(0%);
transition-delay: 0s, 0s, 0.3s; /* this removes the transition delay so the menu will be visible while the other styles transition */
}
.menu-item {
position: relative;
display: inline-block;
}
Image: explanation
Website: here link
The space is coming from .sub-menu. You have height: 0; on .sub-menu, which is good, but the margin-top on the li's is overflowing and creating that space.
Adding overflow: hidden; to .sub-menu seems to fix it.
I am building a lightbox based on the CSS3 selector :target which selects an element based on the hash in the url. I want to animate the target element on the :target event, but this doesn't seem to work.
Let's say we have a div #banana which is shown when a link to #banana is pressed.
#banana {display: none;}
#banana:target {display: block;}
This works fine. But when trying to animate the element, that doesn't work. See this fiddle.
div#banana {
display: none;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
opacity: 0;
transition: opacity 5s linear 1s;
}
div#banana:target {
display: block;
opacity: 1;
}
The element won't fade in. It is as if the browser skips the animation and immediately triggers the end result.
The problem is that you are changing the display property. The display property can't be transitioned since you can't really animate an element turning from nothing into a block.
The display property can be left out altogether. You will however need to give your element visibility: hidden so that it will not prevent the link from being clicked, then transition it to visibility: visible:
div#banana {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
opacity: 0;
transition: opacity 5s linear 1s;
visibility: hidden;
}
div#banana:target {
opacity: 1;
visibility: visible;
}
Updated fiddle
It's not possible to animate display property. There is simply no gradual stages between none and block.
In your case you can "hide" element by using huge negative top position and revert it back to 0 on target event. Actual transition will be handled by changing opacity.
div#banana {
position: fixed;
left: 0;
top: -1000px;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
opacity: 0;
transition: opacity 1s linear;
}
div#banana:target {
top: 0;
opacity: 1;
}
<div id="banana">
close
</div>
Do you want a banana? Click me!
I have a :before pseudo element displayed on :hover of a particular element.
I'm using font awesome and want to vertically center the content of the :before, but vertical align, margins etc haven't been of much help.
Any ideas?
.tile:before {
font-family: FontAwesome;
font-size: 150px;
color: white;
text-align: center;
border-radius: 15px;
opacity: 0;
z-index: 9999;
width: 100%;
height: 100%;
content: "\f16b";
position: absolute;
background-color: rgba(219,127,8, 0.7);
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.tile:hover:before {
opacity: 1;
}
Here are a few potential suggestions for .tile:before :
1 - use pixel value instead of 100% for height:
height: 100px;
2 - Make sure this is being displayed as an element that can ACCEPT margin, padding, etc.
display: block;
-or-
display: inline-block;
3 - I know you said you tried margins, but did you try padding-top?
padding-top: 20px;
4 - Try setting the overflow to hidden or visible. This often forces elements to behave "better."
overflow:hidden;
I would try all of these TOGETHER and see what happens.
Last, I might try setting a "top:" value since you have "position:absolute;" already. Maybe try this in conjunction with "position:relative;" too.
top: 10px;
Really need all the code (HTML) to tell what would work.
Using :before as the cover background to display on top of the tile element, and an :after with:
.tile:after {
top: 50%;
left: 50%;
/* Both half of font-size */
margin-left: -75px;
margin-top: -75px;
height: 150px;
line-height: 1;
}
Seemed to do the trick. Thanks all.