searched through related topics but still can't get the answer.
I basically have a gallery with 32 images in it, when I hover over one image it only overlays it's original "box" but the rest of the 31 images is on top of the enlarged hovered image...
So I want to know how I can overlay all the images in my gallery as well as position it so that it stays in my content container and not display it outside my container.
Thanks in advance.
try using z-index in css. Set it to a large value say 9999 to overlay above all elements on the page. Refer http://www.w3schools.com/cssref/pr_pos_z-index.asp
Related
I am trying to create an image map where there is one main image, and when you hover over certain areas different images come up.
Something like this How to apply Hovering on html area tag? but instead of creating an outline it would show different images.
I do not want to usse jQuery and would prefer to rely on CSS and HTML.
Thanks in advance.
You could cover smaller blank images over the large main image and use the hover code separately for each image
The non hover image is a "blank" png and the hover is the desired result
Just use the code for each "blank" image with the main image in the background with z-index of "0"
As said in previous answer, you could do this by using the z-index property. But try setting the main image's z-index as 0, and all small images(that you want to show over main image) as lower than 0.
And finally, activate by swapping the z-index between values lower or higher than 0 on mouse hover.
Hope this helps :)
I'm in need of a sliding gallery that spans the width of the page but darks out the other images but highlights the one in the middle on show. Hopefully I explained it enough. I can do a full width slider but I need a full width gallery slider. Thumbnails not so important.
No longer using this. using other methords that seem to work for now.
Thanks anyway
I got a page which has a background image and some floating images over that. These images are linked to the background image that is why i want to show the floating image on the exact point on background (Will be cleared in screenshot below).
Screenshot
As you can see in above image image named religion is above a temple in background image and so the people and safari but the mail problem is expedition image which on resolution change floats to left and replaced from the top of the mountain peak in background image.
Please help me to get this working on all resolution.
Demo Link
It looks like the expedition image is changing its position in relation to the actual page instead of the background image like all of the other images are. You could try putting all of the images inside a div, so when the page resizes it changes the size of the div (if you are using %'s to define the dimensions of the div). This might keep all of the images placed where you want them to stay.
First time on stackoverflow, also my first time with HTML and CSS.
Basically I want a transparent image to be kind of "hooked" on to one specific point on the background, i.e. if I resize the browser window, the image should maintain its position relative to the background and should get smaller accordingly.
The reason I need this is because the image is animated and positioned to a certain spot on the background.
The easiest way I could show it is by actually showing it so: www.opinionoto.com
As you can see I want the speech bubble to always be right beside her face and maintain its position no matter what device or browser size.
This would be great help for me, I'm a super begginer! Thanks in advanced!
why not use multiple background images and position the second one accordingly where ever you need it?
Does the bubble move after the initial move? Can you just make the background a GIF image?
I'm working on my first website and I've stumbled across a problem.
How do i make my main contentBox cover the subNav? Img Here
You can set the z-index property.
To get an image over another image:
Using CSS, absolutely position your image and set the top value to 0 for both images.
However, I am not sure you are asking the correct question as in your image, your content areas seem to be above the area you want them to be placed.
Also - are your web page areas all images?