This is my html: http://pastebin.com/K3YW2uU5
which doesn't seem to work, how do I make a hover image in wikia?
This is my html: http://pastebin.com/K3YW2uU5
which doesn't seem to work, how do I make a hover image in wikia?
Myessss.... because you don't have the template yet.
Now that the template is on your wiki, it should start working.
Now that the template is on your wiki, it should start working.
So is making pages like this essential like making a new file for a site?
I'm not sure I understand the question.
If you mean in order to achieve image changes on hover, no. You can put different code into Special:CSS if you only have a few images that need to change, but you have to hard-code every one of them and no one but admins can edit it …which is bad for a wiki. If you create this template on your wiki and use it instead, then anyone can make any image change on hover, not just the ones you hard-code into the CSS as an admin.
Ummmm... haha, I just realized I sent you to the "Minimal" wiki, and not the "Minimum" wiki... Sorry. You have to create the template on YOUR wiki. Not the one I sent you to accidentally 😃
I'm off before I make anymore silly mistakes 😛
I'm not sure I understand the question.
If you mean in order to achieve image changes on hover, no. You can put different code into Special:CSS if you only have a few images that need to change, but you have to hard-code every one of them and no one but admins can edit it …which is bad for a wiki. If you create this template on your wiki and use it instead, then anyone can make any image change on hover, not just the ones you hard-code into the CSS as an admin.
Ummmm... haha, I just realized I sent you to the "Minimal" wiki, and not the "Minimum" wiki... Sorry. You have to create the template on YOUR wiki. Not the one I sent you to accidentally 😃
I'm off before I make anymore silly mistakes 😛
Hmmm... seems this method is flawed due to Wikia's lazy-loading of images: Images that aren't visible don't load right away, they load when you scroll to them. I'm not sure why the first one works (it worked for me too). The others work if you have your cursor over them and then scroll, even a little bit. Suddenly they are visible and you're scrolling, so they get to load. The same kind of thing happens on pages where you scroll down and images load as they appear in your view, instead of trying to load them all at once when you open the page.
I bet there's a way to get around that... I'll see what I can figure out.
Ah, okay. This works basically the same way, but uses a different method so it won't get caught up in lazy-loading of images.
.imgUnder { overflow: visible; display: inline-block; position: relative } .imgOver { display: block; visibility: hidden; width: inherit; height: inherit; overflow: hidden; position: absolute; top: 0; left: 0; right: 0; bottom: 0 } .imgUnder:hover .imgOver { visibility: visible;}
Instead of hiding the hover image with "display:none" and showing it on hover with "display:block" (which makes it lazy-load), this hides it with "visibility:hidden" and shows it with "visibility:visible" (and you have change the display property to block instead of none, obviously).
I bet there's a way to get around that... I'll see what I can figure out.
Ah, okay. This works basically the same way, but uses a different method so it won't get caught up in lazy-loading of images.
.imgUnder { overflow: visible; display: inline-block; position: relative } .imgOver { display: block; visibility: hidden; width: inherit; height: inherit; overflow: hidden; position: absolute; top: 0; left: 0; right: 0; bottom: 0 } .imgUnder:hover .imgOver { visibility: visible;}
Instead of hiding the hover image with "display:none" and showing it on hover with "display:block" (which makes it lazy-load), this hides it with "visibility:hidden" and shows it with "visibility:visible" (and you have change the display property to block instead of none, obviously).
^_^ it worked, I tried googling all the first lines in the css ex: .imgUnder , .imgOver, img.under and found nothing helpful , I am really new to css and html and finding just the right code to put in is like 80% of the battle is there a better way to find this information or do I just kind have to know it ? I don't really feel like i'm problem solving when editing in wikia more like getting to a stuck point and having to basically ask someone else for the answer :<
Asking for the answer is a good way to learn! I recommend it. ...but I can understand not wanting to wait for a response.
.imgUnder and .imgOver are just names I made up when I wrote this (because one image would be 'under' and one would be 'over'). I could have used .frog and .justice if I wanted. They're just arbitrary names, so Googling won't turn up much. If if happens to be a popular snippet of CSS, then searching the class selectors might turn up some good results, but otherwise, no, it's just whatever the person wanted to call it. For example, if you searched around for the selector ".WikiaPage" you might find something useful because lot's of people will have posted here-and-there about styling an element with the class "WikiaPage" ;)
For other types of CSS selectors besides classes (and IDs), the names are fixed, like HTML elements. Then there are also psuedo-elements like :hover :active ::before ::after etc. Those are all fixed as well.
I kind of explained how to work with CSS on Wikia here, though I probably could have done a better job of it. Still, you might find that brief post illuminating.
The best strategy I can offer is to have a specific outcome for your code in mind, and then search around and ask for how to do that specific thing. Once you've tried out several things, the code will just start to make sense to you and you'll be writing your own.
Here is another css hover image:
img { opacity: 0.4; /* It cannot be higher than 0.6 */ -webkit-transition: opacity 0.2s linear; -moz-transition: opacity 0.2s linear; -o-transition: opacity 0.2s linear; transition: opacity 0.2s linear; } img:hover { opacity: 1; }
.imgUnder and .imgOver are just names I made up when I wrote this (because one image would be 'under' and one would be 'over'). I could have used .frog and .justice if I wanted. They're just arbitrary names, so Googling won't turn up much. If if happens to be a popular snippet of CSS, then searching the class selectors might turn up some good results, but otherwise, no, it's just whatever the person wanted to call it. For example, if you searched around for the selector ".WikiaPage" you might find something useful because lot's of people will have posted here-and-there about styling an element with the class "WikiaPage" ;)
For other types of CSS selectors besides classes (and IDs), the names are fixed, like HTML elements. Then there are also psuedo-elements like :hover :active ::before ::after etc. Those are all fixed as well.
I kind of explained how to work with CSS on Wikia here, though I probably could have done a better job of it. Still, you might find that brief post illuminating.
The best strategy I can offer is to have a specific outcome for your code in mind, and then search around and ask for how to do that specific thing. Once you've tried out several things, the code will just start to make sense to you and you'll be writing your own.
oooooooooooooh those so the .imgUnder are just classes , I thought they were like a specific command used in css :p and everything under it is what I should have been googling also no were in the css does it say "hover" so why do I hav to put hover| in the code for the hover images to work?
There is "hover" in the CSS: .imgUnder:hover .imgOver {}. That basically means, "When I hover over an element with the class 'imgUnder,' look for an element inside it with the class 'imgOver' and apply these styles." In this case, it's adding "visibility:visible;"
Where you put the word "hover" in the code of the wiki page was to use the template named Template:Hover. That's what the double-braces mean: {{Hover}}
means to transclude the content found at Template:Hover. You could, of course, just write out the long form of the code every time you wanted to use a hover image; you don't need the template. All that template really does is make it easy to insert all the code you need. Basically, it's just one div inside another, each with an image inside:
<div class="imgUnder> <img src="under.jpg"> <div class="imgOver"> <img src="over.jpg"> </div> </div>
…and that creates HTML like this:
image 'under.jpg'
image 'over.jpg'
…and then the CSS steps in and says "Make that element with image 'over.jpg' move and stretch to completely cover the element it's contained in: the element with image 'under.jpg.' Since it's covering the other image now, also make it completely invisible so you only see the image underneath. Now, if anyone should put their cursor over the bottom image, make the top image visible instead."
In a normal HTML website, you wouldn't have to bother with all this mess: You would just define the two images in a website's CSS and it would be fine. But, on a wiki, only admins have access to the CSS. You want other visitors to be able to edit as much as possible, so you don't want to limit this to only admins if possible.
This solution with the template defining the images and the CSS just telling it how to respond allows anyone to set up and/or edit the images in the hover effect. It's a kind of goofy, roundabout way to do it compared to just using CSS, but it allows for greater freedom in editing for non-admins.