Display div over everything - javascript

I'm struggling to display a div on top of everything else.
I've followed other post on SO which say to use z-index and position: absolute.
Here is a screenshot to describe what I mean.
Here are the css attributes on the classes:
#media only screen and (min-width: 600px) {
.cd-single-point .cd-more-info {
position: absolute;
width: 200px;
height: 240px;
padding: 1em;
overflow-y: visible;
z-index: 10;
line-height: 1.4;
border-radius: 0.25em;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}
}
If anyone is able to help me I'd really appreciate it.
The link can be found here https://what-is-wrong-with-this-css.herokuapp.com/.
Thanks

You have issue with overflow in the class .cd-image-wrapper, you need to make it visible like this :
.cd-image-wrapper {
position: relative;
overflow: visible;
z-index: 2;
}

Can you try and increase the z-index: 999;

Try to increase the z-index to 9999
Try to use !important (maybe something is overriding it)
Try to decrease the z-index of the overlaping element (again try with !important)
Try to change something obvious in your media query to make sure that it is currently executed, for example change the background color
Note: this is just to experiment and find the cause of your issue, using "!important" is not recommended

Related

Can't change content and sidebar width

I am trying to change content and sidebar width of my site http://www.howto-connect.com/. Unfortunately, I can't get a positive result. You can laugh at this simple question. But after making changes in CSS is not giving output. Thanks in advance for a help.
Have you tried to delete cache?
If you have a cache plugin on your site, try to delete cache and you can reload your browser without cache as well.
I had a look and it is #sidebar-container { width: 38%; position: relative; }
Answering "I want more space between sidebar and content and decrease the sidebar width"
Your #content is 70%, and #sidebar-container is 30%. Change these to how wide you need the sidebar, then add this css to your #content:
padding-right: 40px;
box-sizing: border-box;
Changing the 40px to how much "more space between sidebar and content" you need.
You can paste this css in your stylesheet
#content {
width: 69%;
}
#sidebar-container {
margin-left: 22px;
width: 28%;
}
If still does not work for you then use ! important like that.
#sidebar-container {
margin-left: 22px !important;
width: 28% !important;
}
It will prioritise your css.

Overlay/fade in a div/text when hovering over an image

I have an <img> that I want to be able to hover over, and when hovering over it I would be able to animate or fade in a div or text to display information of sorts. The information displayed will be overlaid on the image.
I've seen this done on a website before, I can't remember or place where I've seen it, but the idea is very clear in my mind.
I'm sorry I don't have any good attempts at this, I've read around and can't find anything that works for my idea.
I have not understood JS fully, but I can think of a few ideas to try and make it work. I just need a little help to get me in the right direction, before I try and do the rest by myself.
My first idea would be to remove the image directly, then replace it with a div that has that image in background-image with text overlaying it.
document.getElementById("imageBox").onmouseover = function() {
imageMouseOver()};
var image = document.getElementById("imageBox");
var textHere = imagine a lot of html here;
function imageMouseOver() {
document.getElementById("imageBox").parentNode.removeChild(image);
document.getElementById("imageBox").add(textHere);
};
The above doesn't work, and my other ideas would be based off of the initial one, for example:
-instead of removing the image, have the opacity of the image be reduced and something be added over it to simulate that effect
-or, have opacity:0 to the actual overlay to hide it, and onmouseover, just make it appear with opacity:1 and maybe transition: opacity 200ms ease?
Sorry I am asking too much here, but I'm pretty much clueless where to start, could someone point me somewhere for me to get started? Ideally a few examples would be good, or a site explaining it would be great!
Here's an example with CSS using :hover to transition the opacity of your text element.
.wrap {
display: inline-block;
position: relative;
padding: 1em;
background: #fff;
box-shadow: 0 2px 3px rgba(0,0,0,0.5);
}
.text {
background: rgba(0,0,0,0.8);
color: #fff;
transition: opacity .5s;
opacity: 0;
position: absolute;
top: 1em; bottom: 1em; left: 1em; right: 1em;
display: flex;
justify-content: center;
align-items: center;
}
.wrap:hover .text {
opacity: 1;
}
img {
max-width: 100%;
display: block;
}
<div class="wrap">
<img src="http://kenwheeler.github.io/slick/img/fonz1.png">
<div class="text">text overlay</div>
</div>

Element with background color vertical align middle of the parent

I am trying to achieve this "stupid" thing, but I can't find a solution.
I have a certain number of images one above the other, I would try to put background-color which is aligned vertically in the middle of the first and last image.
more difficult to explain than to understand, I made an image explanatory so I think it is more easy to understand
I tried to make a codepen, but without success http://codepen.io/mp1985/pen/BoEMPN
.bg {
background: red;
top: 25%;
position: absolute;
width: 100%;
height: 100%;
bottom:0;
left: 0;
right: 0;
z-index: 100;
backgrund-position: center center;
z-index: 1;
}
do you have any advice or suggestion?
You can't set the parent's height according to an absolutely positioned element. So you have to use fixed lengths rather than percentages.
.container {
height: 900px; // img-height * 4
}
Then, for the background color to align to the center of the first image, add this:
.bg {
top: 150px; // img-height / 2
}
As for horizontally centering the imgs, use
.box-images {
left: 50%;
margin-left: -300px; // img-width / 2
}
Well, I'm not sure I've understood but how you started isn't correct: you want your images at the center of the page, right? Well, to do that they must be positionated with
position: relative;
left:50%;
Then, you created a div as a background. There you can choose: you can create a dinamic background with JS, or add only a certain number of images with a certain known height. I guess you are creating a static page, so set the div with
position: relative;
min-height: 900px; //(imgNum-1)*imgHeight
top: 150px; //imgHeight/2
and with what you have already set.
If you have width problems, min-width and max-width are useful attributes.
In my mind it works. Please comment for issues and rate positive if useful

avoid unwanted scaling for image in parallax scrolling effect

here is my demo, as you can see the image scale so the margin:top of the parallax wrapper can't be dynamic.
demo : http://jsfiddle.net/KsdeX/12/
.wrapper-parallax {
margin-top: 150px;
margin-bottom: 60px;
}
what are the possible solution for this? max width for the img?
yes, i dont really understand whats the problem here, you can just do
img {
position: fixed;
top: 0;
max-width: 350px;
z-index: -1;
background: cyan;
}
and then the image wont scale anymore.. ?
I believe this is what you wanted..
I had to use some javascript in this code, and declared some ids to make it easy for me :p
fiddle

Z-index not working

Take a look at this page I'm working on: http://s361608839.websitehome.co.uk/textcube/
The nav bar is going behind the slider and I wanted it to sit above instead. I've tried setting a high z-index on the #navbar and #navbar-inner and nothing happened.
#navbar{
background: url(../images/nav-bg.png) repeat-x;
height: 55px;
margin: 0;
padding: 0;
z-index: 9999;
}
#navbar-inner{
width: 912px;
margin: 0 auto;
position: relative;
z-index: 9999;
}
I think the javascript slider using CSS style .bx-window and .bx-window are the cause however I have set a low z-index on both, yet I don't see any difference.
Help with this would definately be appeciated.
Cheers
z-index works only with positioned elements (position:absolute, position:relative).
Here's an article http://www.w3.org/TR/CSS2/visuren.html#z-index
In your case, you forgot to add position to one of your element.
Add position:relative to #navbar
It works with either float:... or position:...

Categories

Resources