How do I put an image in front of another?
Replies
So, this is a bit of a stupid question... Or perhaps poorly worded. If I want to move an image to the front, say covering the image with another image, then make it disappear when you hover over something, how would I do this? I know it's possible but I don't know much about coding. There's an example right now I think in one of the current spotlight owners, Hollows. Say I wanted to bring the snake forward on Rumancek but just the snake. It will probably look really stupid and I'll probably end up getting rid of it but for the future, I want to know how to do this. So I'll use him right now.
Here is his coding, idk if anyone actually needs it, but I kind of need to know WHERE or HOW I'd put the code in.
the code
edit okay idk why there's two spoilers but the top one works and i don't have time to figure out what went wrong there
find the div that contains that image, and add "z-index:2" to its code. everything else should have a default z-index of 1, so the one you change should then appear in front of everything else.
To elaborate what Frenchie said, you can add a hover function to a div like this:
hover
{
z-index:NUMBER !important;
}
However, looking at your code, I don't think you can pull this off with your current setup because the snake (that ouroboros in the right half of the layout, right?) is part of the background image. If you want to change it's z-index, but nothing else, you'll have to make it a separate image. Of course, you can achieve pretty much the same effect by changing the opacity of all the items that are on top of it, making them (almost) invisible until they're hovered over.
The way Hollows' profile works is that the image is actually the background and the text box on top of it has a solid white background that only becomes visible on hover. So it's an opacity thing, not a z-index thing ^^
🌸 [flower=Morse] 🌸
To elaborate what Frenchie said, you can add a hover function to a div like this:
hover
{
z-index:NUMBER !important;
}</p><p>However, looking at your code, I don&;t think you can pull this off with your current setup because the snake (that ouroboros in the right half of the layout, right?) is part of the background image. If you want to change it&;s z-index, but nothing else, you&;ll have to make it a separate image. Of course, you can achieve pretty much the same effect by changing the opacity of all the items that are on top of it, making them (almost) invisible until they&;re hovered over.</p>
<p>The way Hollows&; profile works is that the image is actually the background and the text box on top of it has a solid white background that only becomes visible on hover. So it&;s an opacity thing, not a z-index thing ^^
sorry, i missed the part about hovers. you're saying you want the snake to be in front of everything else, but move to the back when you hover over it? creating divs is pretty straightforward; it's basically just creating a new object on the page. you can call it whatever you like. so between the style tags, you would add a chunk of code that looks something like this:
{
position:absolute;
top:XXpx; left:XXpx;
height:XXpx; width:XXpx;
background:url(SNAKE PICTURE URL);
z-index:2}
:hover {z-index:1}obviously replace 'XX' and 'SNAKE PICTURE URL' with the numbers and url you need. but that doesn't actually make the picture appear on the page, so outside of the style tags, you have to add this:
(div id="snake")(/div)the forums are being very annoying about html right now so you will have replace those parentheses with angle brackets: < and >
sorry, i missed the part about hovers. you&;re saying you want the snake to be in front of everything else, but move to the back when you hover over it? creating divs is pretty straightforward; it&;s basically just creating a new object on the page. you can call it whatever you like. so between the style tags, you would add a chunk of code that looks something like this:</p>
<p>
{
position:absolute;
top:XXpx; left:XXpx;
height:XXpx; width:XXpx;
background:url(SNAKE PICTURE URL);
z-index:2}
:hover {z-index:1}obviously replace &;XX&; and &;SNAKE PICTURE URL&; with the numbers and url you need. but that doesn&;t actually make the picture appear on the page, so outside of the style tags, you have to add this:</p><p>
(div id="snake")(/div)the forums are being very annoying about html right now so you will have replace those parentheses with angle brackets: < and > {overflow: hidden!important;}
:hover {overflow-y: scroll!important;}
a:link,a:active,a:visited {color:}
{
position:absolute;
top:50px;
left:625px;
height:200px;
width:200px;
background:url(https://i.gyazo.com/d303be491a18f212d12c5c4c4a83c5a7.png);
z-index:2}
:hover {z-index:1}
</style>
I probably shouldn't be at the end but I don't know where else to put it?
;){kind=link}
wait, okay, sorry, this is a little complicated.
when you create a new div, it is technically located inside the div. so what you want to do is replace your code for with another new div, the same way i explained above. you could call it something like "text" or "main" or whatever. then, put the story text between the div tags, like this:
(div id="text")
STORY STORY STORY
(/div)again, replacing the parentheses with angle brackets. THEN you will have two separate new divs on the page: the story, and the snake. okay, now to complicate things just a little more.
i did a dumb. simply changing the snake's z-index to 1 won't necessarily make it layer behind everything else. so where i told you to write "z-index:2" change that to "z-index:3". then add a z-index of 2 to the rest of the sections (, , , and ). NOW there are three 'layers' to the profile; the snake at layer 3, everything else at layer 2, and when you hover, the snake will pop back to layer 1. aaaand... that SHOULD work?? sorry, this got more confusing than it needed to be.
wait, okay, sorry, this is a little complicated.</p>
<p>when you create a new div, it is technically located inside the div. so what you want to do is replace your code for with another new div, the same way i explained above. you could call it something like "text" or "main" or whatever. then, put the story text between the div tags, like this:</p>
<p>
(div id="text")
STORY STORY STORY
(/div)again, replacing the parentheses with angle brackets. THEN you will have two separate new divs on the page: the story, and the snake. okay, now to complicate things just a little more.</p><p>i did a dumb. simply changing the snake&;s z-index to 1 won&;t necessarily make it layer behind everything else. so where i told you to write "z-index:2" change that to "z-index:3". then add a z-index of 2 to the rest of the sections (, , , and ). NOW there are three &;layers&; to the profile; the snake at layer 3, everything else at layer 2, and when you hover, the snake will pop back to layer 1. aaaand... that SHOULD work?? sorry, this got more confusing than it needed to be.
well that's pretty straightforward; right alongside all the other styling you've given a section, just add "opacity:0.5" or whatever number you like; 1 is fully opaque, and 0 is completely invisible, and you can use any decimal value in between so just play around until it looks good to you. you can also have things change opacity upon hover. so like:
img, .pet_spotlight img {opacity:0.4}
img:hover, .pet_spotlight img:hover {opacity:1}.treasure_item is ONLY for treasure items, that syntax doesn't apply to anything else on the profile. if you're ever unsure of what something is called/what you actually need to be styling with your code, google chrome and firefox both have a function where you can right-click the page and select "inspect" or "inspect element," which brings up a panel that lets you see the page's code; in the top left corner of this panel, there is a button that looks like a square with an arrow in it, which lets you hover over any part of the page to see what its code is.
also, you don't need the "filter:alpha(opacity=100)" bits.