So I'm working on my first website, I'm trying to make an image gallery that shows thumbnails of images and enlarges them when you hover over them, I made the sizes of the images 100px*100px through the html itself then I used this css code:
img:hover {
width: 100%;
height: 100%;
}
obviously I'm missing something because when the images are enlarged they move the other images inline away which causes glitches because then you're no longer hovering over it. I tried fiddling about with the z-index but it didn't work, I tried putting them in spans with hidden overflow but I faced the same problem, what should I do?
You can take the hovered images out of the flow of the document with absolute positioning.
img:hover{
width:100%;
height:100%;
position: absolute;
top:0;
right:0;
}
Be sure to set the position of the container to relative.
fiddle here
Related
You can preview the site at https://enigterry.github.io/nwtest.html . This is link to my code https://github.com/enigterry/enigterry.github.io/blob/main/nwtest.html
The issue is with z-index. You need to add z-index higher than 0 (that is being set for the hero) but to be safe say 99. Also for the z-index to work you need to set the position to relative. Also another issue is the black background added to the container which spreads across the entire page. Remove that and apply to the .w3-content. You will still need to work on the padding to make it look better.
.w3-content {
max-width: 980px;
background-color: #000;
position: relative;
z-index: 99;
}
To have a responsive design, I made this <img> to have max-width:37%;. But when I open the jsFiddle window far enough to make it wide enough, the image extends over it's containers size and won't fit anymore.
This is a screenshot I made:
But I want the overlapping sides not to be shown, like this (photo edited):
If you want to see it in action, use my fiddle.
The image should not be seen further than the boundaries of its containers are. How can I prevent that the image is bigger than its container?
I assume that you want the entire image to stay visible. So, you need to set the max-height property to 100%.
.mbox img {
max-height: 100%;
max-width: 37%;
position: absolute;
right: 0;
z-index: -1;
}
Here is a jsfiddle.
Update: Since you want the image to keep the max-width:37% you need to hide the overflown part.
I added a div that wraps the div.mbox_content and the img. I gave to this div the class mbox_wrapper. You also need to add the z-index:2 property to the <h2>.
.mbox_wrapper {
overflow:hidden;
position:relative;
}
.mbox h2 {
z-index:2;
}
Here is an updated jsfiddle.
Just need to change the z-index property
you need to apply a max-height tag to the css..
Then the image won't be able to exceed the height of the containing div.
max-height: 100%;
I am using codeigniter on a project. I have an over lap in DIVs.
(source: childrensdaycaresoftware.com)
In the image you can see that the overlap blocks the button. The CSS that controls this is
.fam {
position: relative;
left: 20px;
width: 400px;
}
If I make it fixed or absolute, it throws off all the work that I have done. I would have to redo the whole page.
Is there a way to send the Family Info block behind the menu button?
The css for these two DIVs are not in the same css file.
You should be able to make the z-index for the button, or its container, a higher number to elevate it above the other div.
.button{
z-index:5;
}
for example.
I have the following element in my initial page concept:
http://tinyurl.com/bcmcxp9
The ribbon is a PNG image. What I'd like to be able to do is position this image exactly over the border of a box-shadowed div (representing the page content), without affecting the page width.
I've tried a couple of techniques.
By using position:absolute, I've been able to achieve the visual effect I was looking for, but it brings up the dreaded horizontal scrollbars! I want the edge of the div (not the edge of the image) to represent the edge of the page.
#banner-ribbon {
background-image: url(ribbon-right.png);
background-repeat: no-repeat;
position: absolute:
width: 419px;
height: 114px;
left: 700px;
top: 400px;
}
By using a div that sits between the content wrapper and the background, I've been able to position the image in the right place without affecting the horizontal scrollbars (sort of, I might need a little javascript to absolute-position it relative to the center), but I can't raise the image's z-index above its child divs!
#banner-ribbon-wrapper {
background-image: url(ribbon-right.png);
background-repeat: no-repeat;
background-position: 90% 400px;
z-index: 70; /* does nothing */
}
Any ideas?
It sounds like the image is extending the boundaries of the page, causing the horizontal scroll bars. One way to fix this may be to set a width for your page and then hide anything that goes outside of it. Something like this may work for you:
body {
width: 100%;
overflow-x: hidden;
}
Example jsFiddle
Give your content div
position: relative
and to your ribbon
position: absolute
right:0
Make sure your image don't extend boundaries uncontrollably.
Working sample on JsFiddle:
http://jsfiddle.net/BrvJk/
I have a background <div> that is positioned in the middle of the page.
Above this I have a <div> with a text inside.
If the page is viewed in fullscreen, everything seems fine.
But if the page is viewed in a small window, the text disappears.
How can I make the text always staying in the front?
Code:
http://jsfiddle.net/w2T79/
Images:
"normal view:" http://www.suckmypic.net/26632/83735f21.png
"small view:" http://www.suckmypic.net/26633/7be8fc00.png
Give the parent-div an id ('container' for example), then add the code below to your CSS:
#container {
position: relative;
}
.txt {
position: relative;
z-index: 99999;
}
Maybe you can provide us a link to the page you are working on, because in jsFiddle only 'text' is visible, and no image.
That's because you have a margin-top of 70 px and the upper div disappears under the backgroud.
Do a position: relative and an high z-index and you get what you want
This you can achieve by giving position:relative;z-index:1000; to <p> tag.
Check here:
http://jsfiddle.net/w2T79/4/
Hope you want in this way.