In my page, I have 3 placeholder images under my portfolio section. What I want is for the images to get wider and taller when they are hovered. However, I also have a fixed header set with a z-index of 1000 (for obvious reasons). The issue is that for some reason, even though I have set my containers to position: relative with a z-index of -1, the images still appear over my header when I scroll down. Here is my codepen snippet:
https://codepen.io/PatrickVegas/full/RVapzR/
* { font-family: 'Raleway', sans-serif; }* HEADER/HOME ---------------------------------*/
What can I do? Thanks!
Add the position: relative; and z-index: 9999; to your css class container-header will fix the problem you have with those images.
.container-header {
position: relative;
z-index: 9999;
...
}
https://codepen.io/hdl881127/pen/eWzzBp
Most of the time when you can't position something, try to move up to the parent and see what's in there. In your case here <div class="portfolio" id="portfolio"> are sibling with your nav menu <div class="container-header" id="home">, you can't position them if you only add index to their child element.
take a look at this img, it provide tons of information about position:
I know there are lots of answer in stack-overflow but this link helped me alot when I think about this.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
Related
Using bootstrap 3 I've got two columns (sm-3 and sm-9). The left column is position: fixed and contains a link with a tooltip. The z-index of the tooltip (without being specified) seems to be browser specific.
What is (in general) the best way to define the z-index of the tooltip? I'm looking for a clean solution that works in all common browsers.
FIDDLE
Internet Explorer 11 (left) Chrome 48 / Edge 25 (right)
HTML:
<div class="container">
<div class="col-sm-3" id="left">
<a id="tooltipButton" href="#" data-toggle="tooltip" title='Long Text'>Show Tooltip</a>
</div>
<div class="col-sm-9 col-sm-offset-3" id="right">
Content
</div>
</div>
CSS:
#left { position: fixed; }
#right { background-color: #ddd; }
JS:
$('#tooltipButton').tooltip({
trigger: 'click',
html: true,
placement: 'right',
});
A few things I've tried (CSS):
.tooltip { z-index: 10; } // Doesn't work
.tooltip .tooltip.in { z-index: 10; } // Doesn't work
.tooltip .tooltip-inner { z-index: 10; } // Doesn't work
Is there a clean solution without adding more divs and without changing the attributes of the left or right div? E.g. #left { z-index: 10; } seems to work but changes the attributes and the overlapping behavior of the left div.
FIDDLE
If you give an element a position other than static it forces it to appear above any element that is still static. It's a rather unknown behavior of z-index. Therefore if a parent element has a position other than static all it's children will have their own stacking scope. It works almost like layers.
This article has an amazing write up about it: What no-one told you about z-index
So in your example all the tooptip code is appearing in the container that has it's own stacking scope and is therefore forced under the next container. If you add z-index:999; to the #left container you will see it is fixed. This is because that container (and it's contents) are now forced higher than the next.
JSFIDDLE
The other thing you could do is remove position:relative from the #right container so it doesn't have it's own stacking scope and then it works again.
JSFIDDLE v2
I don't think this helps much with your problem as I don't think you can hack you way out of it. It is much more common practice that tooltip code is injected into the bottom of the page so that it naturally stacks above everything else.
I am facing an issue with a div not being displayed when it is toggled from display: none; to display: block;
HTML:
<div class="menus-container" style="display: block; top: 50px; height: 277px;">
.. some pretent content, which shows up in another place on the website ...
</div>
Which is toggled by js by a plugin JS which is minified so I cannot list the js, but I see in the developer toolbar that the style changes work.
I see that it has a height, I see that it has a width and a z-index of about 99999.To be sure I assigned in the developer tool bars all parent elements as well an z-index: 999 !important;
Still that div wont show up... any ideas? If you want to look at the example follow this link (redacted) - it only happens at a width of less than 850px.
The problem here isn't a z-index issue, it's that the menu is appearing outside of its parent, the header element, which has overflow set to hidden. Setting the overflow to visible reveals the menu. You'll want to do some other things too, like give the menu a solid background color so it's easier to read.
<header class="main-header collapsed-gallery-page-menu" style="overflow: visible;">
On the demo link below, I am using jQuery slideUp and you will notice after it slides up, there is a quick jump of the content.
Do you know why this is? My html is valid (with the exception of the select option not having a label attribute..which I am still figuring out...). Do I have something positioned incorrectly?
http://demo.phppointofsalestaging.com/index.php
(Click login --> Sales -->Show Item Grid THEN Hide Item Grid to see the bug)
this inline style
<div style="margin-top: 39px;" id="content">
and line 724 of unicorn.css
#content {
...
margin-top: -39px;
...
}
... are conflicting with each other.
If you remove both, the page doesn't jump.
You have set a margin-top on the content div of 39px. This is only visible when you slide down the item grid. It seems to 'jump' when sliding back up because of this margin. Try setting the margin to 0px;
<div id="content" style="margin-top:0px;">
I played around a little bit and this is being caused by the margin-top:39px on your #content div, if you remove that and use top:39px instead of margin-top:39px on the #content element instead it doesn't jerk either - but it also causes the button to jump a bit on slideUp and slideDown so you will need to tweak the css of the button wrapper area like so:
To fix the button jumping issue:
#show_hide_grid_wrapper {
position: relative;
text-align: right;
padding: 10px;
}
As prev. answers mention, you have margin-top 39px on #content. Setting it to 0 will solve the problem, but it will also remove your beautiful dark gray section above the content. To get it back, add this to your CSS:
#content:before {
content: '';
display: block;
width: 100%;
height: 39px;
background: YOUR GRAY COLOR;
}
I am doing a javascript slider for practice.
However, the picture in the slider is not centered.
Here's the link: http://eddieli.org/flee/
Which part of the coding have I done wrong?
The pictures are not aligned with the slider...
Thanks for helping.
well, i added position: relative; left: -40px; to the li of the sliders #container #left_col #slider li, and they get aligned, i don`t know which size images are, but you must always check the starting position before doing the slider itself, you must check all styles fit right.
I am trying to figure out how to create an image gallery like the one illustrated below so I can place it onto my website. I am wondering if anyone can point me in the right direction for a tutorial? I have found a lot of nice galleries that will display my images, but none of them displays the images like in the filmstrip style I am after.
Requirements of gallery:
When clicking on the arrows, the gallery strip will either shift
left/right by one picture
Hovering over the image will darken the image, and display some
caption about the image
I just answered a question where someone was using carouFredSel. This jQuery plugin looks like it would work pretty well, though I do not think it has the built-in hover effect. To be honest though, that is the easier part.
The trick is to make the width slightly larger than the images to show, which leads to the partial images on each side.
Here is a jsfiddle to illustrate.
UPDATE:
The OP asked if the page nav links could be repositioned. I modified the jsfiddle to work this way. The additions were as follows:
.list_carousel {
position: relative;
}
#prev2 {
position: absolute;
top: 35px;
left: 0;
}
#next2 {
position: absolute;
top: 35px;
right: 0;
}
If you have a relatively positioned container element, you can absolutely position child elements. I added relative positioning to the list_carousel container, then I could absolutely position the nav arrows within the container. Change the top value to position vertically, and left/right to position horizontally.
I also removed the pager all together, as it was not a requirement based on the original example. If you change the page arrows to images it is pretty much what you want.
MORE UPDATES
I decided to take it one step further and make the hover effect work more like the example. See the new jsfiddle. The changes are:
Added span wrappers around all text within list items
Added $(".list_carousel li span").hide(); to hide all the spans
Modified hover event to toggle spans
I also added some CSS to position the span text:
.list_carousel li {
position: relative;
}
.list_carousel li span {
position: absolute;
bottom: 0;
display: block;
text-align: center;
width: 100%;
}
FINAL UPDATE (I PROMISE!)
I decided to go all in and add the transparency layer too: jsfiddle
Hover modifications:
$(this).prepend($("<div class='hover-transparency'></div>")); and $(this).find("div:first").remove(); to add/remove transparency layer on hover in/out.
CSS modifications:
.hover-transparency {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.60);
}
These style the transparency layer. Change to suit your taste.
Something like jCarousel should do the trick. Once you have the carousel functionality in place, you can add in the hover affect via CSS and a span that contains the caption.
I was just looking at ContentFlow Plugin which is JavaScript based.
They include a separate library of additional plugin you can use that takes care of your Slideshow requirements, in particularity this one HERE. When you use the mousewheel over the 3 images, it scrolls by 1. That said, you can mod the plugin to do the same when the arrow buttons are clicked.
Sample plugin markup looks like:
{
shownItems: 3, //number of visible items
showCaption: true // show item caption
width: 100, // relative item width
height: 100, // relative item height
space: 0.4 // relative item spacing
}
To address that the captions should be visible only on mouse hover, I would set showCaption to always be true along with using a jQuery .hover(); Event Listener that will use .show(); and .hide(); on the caption Class Name .caption when required. Also, using jQuery to set the opacity can be done within the .hover(); event too.
The latest version of ContentFlow v1.0.2 supports multiple instances on the same webpage if that's ever required.