I have a hidden list on a page (opacity:0;visibility:hidden;) that is currently necessary for my menu.
My problem is that even though the z-index of the drop down part of the menu is -1 and the z-index of the content div is 50, the text inside of the content div only draws to the right of the menu. The css style display:none is not an option due to horrible resizing of elements that I don't want to deal with. Many Google and Stack Overflow searches produced no helpful results.
I have tried a variety of display settings including inline, float:left, and others that may have fixed the problem, but they didn't.
JSFiddle here which clearly defines the problem (try the second menu to see the cutoff point):
http://jsfiddle.net/nimsson/311g9h16/5/
I would like to know either
a) the reason behind this functionality
b) a workaround / solution
or both.
Thanks,
nimsson
Simply workaround You have here: http://jsfiddle.net/311g9h16/6/
I've just change #content {position: absolute} but why display: none is not an option?? Resizing should be no problem when You set height of dropdown.
Moreover, You can do this effect with some CSS - take a look: http://www.cssterm.com/css-menus/horizontal-css-menu/simple-drop-down-menu
try this: http://jsfiddle.net/311g9h16/7/
all I did was changing the way you use positioning and adjust the width to get the text to align left.
For info on position properties go here: http://www.w3schools.com/cssref/pr_class_position.asp
#content {
background-color: rgba(204,0,0,0.4);
border: 5px solid rgba(204,51,0,1);
border-radius: 10px;
position: absolute;
bottom: 500px;
color: white;
text-align: left;
width: 500px;
z-index: 50;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
}
You could add another div around the #content and re-set the page for the containing divs,
<div id="background">
.... </div>
css
#background{
z-index:-1;
position: absolute;
width:100%;
height:100%;
}
Related
I've got this code...
<img class="logo" src="img/logo.jpg"> <!-- Logo size is 96x96 -->
...and this
.logo {
transition: .5s;
}
.logo:hover {
transition: .5s;
width: 128px;
height: 128px;
}
It resizes on hovering, but not with transitioning. I just hover it and it instantly resizes, and I have no idea why does transition not work.
There are several things wrong with the CSS causing it not to transition.
First, as #WaisKamal said, you need to set initial states to transition from. Images size automatically in HTML but that's not a valid starting point for CSS.
Second, you need to define WHAT properties are being transitioned.
So you would need to add width and height. Or you can use the all identifier:
.logo {
display:block; //make sure the image is a block element
width: 96px;
height: 96px;
transition: all 0.5s linear;
}
.logo:hover {
width: 128px;
height: 128px;
}
Now that will work but it's going to be kind of janky since animating height/width cause page repaints.
Instead, I would suggest using a transform on the image.
.logo {
display:block; //make sure the image is a block element
// initial size is fine here because we're using a transform
transition: transform 0.5s ease-in-out;
}
.logo:hover {
transform: scale(2) // decimal notation 2 = 200% = 128x128px
}
There is no need to define the same transition property for the image and the hover pseudoclass. If you don't define transition in .logo:hover, it will take the previously set value of half a second.
The problem here is that you must specify an initial width and height for the image in order to have it resize smoothly.
I try to get a slide effect with angular and ngAnimate.
I works nicely as a fade-in/fade-out effect with opacity.
.show-animation {
-webkit-transition: 1s all linear;
transition:all linear 1s;
opacity: 1;
}
.show-animation.ng-hide {
opacity: 0;
}
See example: https://jsfiddle.net/1bnpqpy8/10/
But when I try to use the max-height attribute for a slide effect it does not work anymore.
.show-animation {
-webkit-transition: 1s all linear;
transition:all linear 1s;
max-height: 25px;
}
.show-animation.ng-hide {
max-height: 0;
}
See example: https://jsfiddle.net/1bnpqpy8/11/
Why does ngAnimate not work with max-height?
What do I do wrong?
You are missing an important css property: overflow.
overflow tells a div what to do if the contents are greater than height (or max-height). The default value is visible and since one of your inner divs has a set height (timelineVoid set to 20px), this will force the div to be visible.
You need overflow (specifically overflow-y) set to hidden in your show-anomation div to allow content to be hidden:
overflow-y: hidden;
here is the fiddle: https://jsfiddle.net/5mr8azvn/
I'm trying to create a website that does the same thing this website does. www.treasurelimo.com If you scroll down on the homepage and look at 'popular destination'. When you hoover over the images the blue area expands and more info is seen.
I'm using wordpress but don't want to use any plugins. Right now I have those images being populated from other posts. Here is how mine works. Here is my site: www.sealfitdev.demosite.us/coaching-staff I got the CSS to place the words inside of picture, I just need it to expand when I hoover over it. Can anyone help me or point me to a post that shows how I can do that? I was looking over the bootstrap documentation and I wasn't successful. Thanks
You can accomplish the effect using CSS transitions (see some basic examples here).
See an example of this for your use-case at this JSFiddle (not a particularly clean example, but it should illustrate the concept).
I've taken the markup from your site and simplified it a little for clarity.
<div class="employee-thumb pull-left">
<div class="inner">
<img width="150" height="150" src="http://i.forbesimg.com/media/lists/people/elon-musk_416x416.jpg" />
<div class="info">
<p>Elon Musk</p>
<p>Additional information including buttons</p>
</div>
</div>
</div>
Now in the CSS, we can set .info to be absolutely positioned within the relative positioned parent, .inner. Since .inner's overflow is hidden the content can be pushed outside our visibility by adjusting the absolute positioning.
.inner {
position: relative;
overflow: hidden;
max-width: 150px;
}
.inner .info {
background-color: rgba(255,255,255,0.7);
position: absolute;
bottom: -4em;
}
On hovering over .inner, .info, the absolute positioning of bottom returns to 0, sliding the content up.
.inner:hover .info {
bottom: 0em;
}
And we animate the whole thing using a CSS transition.
.inner .info {
transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease; -o-transition: all 0.3s ease;
}
I am using the method outlined here to fade in a background image on hover of an element.
My codepen example:
http://codepen.io/anon/pen/vqtjf
HTML:
<div><span></span></div>
CSS:
div {
position: relative;
width: 219px;
height: 218px;
background: url(https://dl.dropboxusercontent.com/u/3454522/home-option-icon-off.png) no-repeat;
}
span {
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background: url(https://dl.dropboxusercontent.com/u/3454522/home-option-icon-energy.png) no-repeat;
opacity: 0;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
}
div:hover span {
opacity: 1;
}
The problem I'm having is that in Firefox (Mac) the background image of the span is not quite aligned with the background image of the span so when it fades in you can see a small movement (In the codepen the shift is vertical but in my project where the code is amongst a whole lot of other junk I actually had a horizontal shift). If you resize the Firefox window the problem is fixed.
A screencast of the effect can be seen here:
https://dl.dropboxusercontent.com/u/3454522/firefox-fadebg-problem.mp4
(View at 100% to see the problem which is subtle).
Any idea on whats causing this or how to fix?
I think it's a regression in how Firefox renders images with opacity animation, especially when the images has been resized with HTML width/height attributes (usually by more than half).
The effect can be very subtle like a slight off-setting (~1 px) or a kind of antialiasing.
STR:
1. Open the testcase I joined
2. Move the mouse over the images to animate the opacity
3. Try at different zoom levels to observe the off-setting/antialiasing
WORKAROUND: adding "box-shadow: #000 0em 0em 0em;" to images fixes the bad rendering.
source: https://bugzilla.mozilla.org/show_bug.cgi?id=745549
I had the same problem. Solved it by adding the following to the images css.
transform: translate3d(0,0,0);
I have designed a navigation bar with 5 page 'links' that have equal width. When hovered over these reveal a drop-down with more links relevant to that page. See the navigation jsFiddle. This works perfectly.
The problem
When I placed the navigation bar into my site it doesn't work as intended. The drop-down animations lag quite a lot and there are white bars that randomly appear at the sides of the page (Windows 7 Ultimate, Chrome 24, other OS's and browsers untested). See the site here.
The white bars
Example markup
<nav id="nav">
<ul id="nav1">
<li>
<span>Games</span>
<div>
<span>All Games</span>
<span>Free Games</span>
...
</div>
</li>
...
</ul>
</nav>
Animation CSS
#nav1 > li > div {
position: absolute;
margin: 5px 0 5px -45px;
top: 0;
left: 50%;
max-height: 30px;
width: 90px;
opacity: 0;
overflow: hidden;
-webkit-transition:
width 500ms,
max-height 500ms,
opacity 200ms ease 400ms,
margin-left 500ms;
}
#nav1 > li:hover > div {
max-height: 200px;
width: 200px;
opacity: 1;
margin-left: -100px;
-webkit-transition:
width 500ms,
max-height 1s ease 500ms,
opacity 200ms,
margin-left 500ms;
}
What I tried
After unsuccessfully spending an hour looking for the problem, I decided to make a jsFiddle of my entire site to see if that would identify the problem. To my surprise it works fine in the jsFiddle.
Edit: After more testing I have determined that the problem occurs when a transition on the width or height of #nav1 > li > div completes. It is also definitely related to the transitions. Not sure if this helps.
My question
If anyone could provide some insight into the problem, it would be much appreciated. I have absolutely no clue what the cause of the problem is or how to fix it.
Note: The navigation is currently only animated in Chrome.
The problem is:
#mainbar
Get rid of that and see if your problems don't go away. But it's more than that. This encompasses the entire width of the DOM:
width:100%;
And it has a higher z-index than the #wapper el, which is only taking up a part of the page. The #mainbar el is overlaying the areas on the side where #wrapper isn't. But because there isn't anything there (style-wise) you get the default white of the browser bg; hence, the white bars on the side.
If you think I'm wrong, set
#mainbar{width:700px;}
You'll see your white bars have expanded to new uncovered regions. :P
Simple solution:
#wrapper{z-index:0;}
That should solve it.