Image hover effect

WolfLord
WolfLord
edited June 2014 in Campaign Portal Building
Hey guys im wondering if you can help me out. I'm trying to find a way to make the images i use for my floating nav bar change to a different image when you hover over each one. Anyone know an easy way to accomplish this? Preferably via CSS so i dont have to replace the code on every page (my nav bar is in the form of code on each individual page) but if i do have to that would be a big deal.

Here is the code i use on each page for the nav bar:

@



"!http://i1233.photobucket.com/albums/ff386/danbadour/Alexander_Civ5_zps00d58e58.png!":https://heroes-of-hellas.obsidianportal.com/
"!http://cdn.obsidianportal.com/assets/28871/SB_Story.png!":https://heroes-of-hellas.obsidianportal.com/wikis/story
"!http://cdn.obsidianportal.com/assets/28867/SB_People.png!":https://heroes-of-hellas.obsidianportal.com/wikis/people
"!http://cdn.obsidianportal.com/assets/28868/SB_Places.png!":https://heroes-of-hellas.obsidianportal.com/wikis/places
"!http://cdn.obsidianportal.com/assets/28869/SB_Factions.png!":https://heroes-of-hellas.obsidianportal.com/wikis/factions
"!http://cdn.obsidianportal.com/assets/28870/SB_Rules.png!":https://heroes-of-hellas.obsidianportal.com/wikis/rules
"!http://cdn.obsidianportal.com/assets/28872/SB_Miscellany.png!":https://heroes-of-hellas.obsidianportal.com/wikis/miscellany
"!http://i1233.photobucket.com/albums/ff386/danbadour/Trireme_Civ5_zps3fc18ebb.png!"://heroes-of-hellas.obsidianportal.com/



@

"Age of Heroes":https://heroes-of-hellas.obsidianportal.com/
"Avatar: Conquest of the Imperial Order":https://avatar_adventures.obsidianportal.com/
"COTM November 2011":http://blog.obsidianportal.com/november-11-campaign-of-the-month-avatar-conquest-of-the-imperial-order/?utm_source=rss&utm_medium=rss&utm_campaign=november-11-campaign-of-the-month-avatar-conquest-of-the-imperial-order

Comments

  • WolfLord
    WolfLord
    Posts: 278
    !http://i1233.photobucket.com/albums/ff386/danbadour/navbar_zpsee8abff9.png!
  • Basileus
    Basileus
    Posts: 585
    What is the end effect you are trying to achieve? "Text" glow? Icon change?
  • WolfLord
    WolfLord
    Posts: 278
    yup exactly haha basically get those words to glow bronze when hovered over.
  • SkidAce
    SkidAce
    Posts: 830 edited June 2014
    CSS:

    @.overtext {position:absolute;top:34%;left:0px;text-align:center;font-size:large;font-weight:bold;text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black, 0px 0px 4px black;width:220px;color:SkyBlue;}
    .overtext:hover {color:yellow;}@

    Makes the letters change color on my main wiki page.

    "Alfaysia":https://alfaysia.obsidianportal.com/wikis/main-page

    And this is the code on the page...

    @
    CHARACTERS
    MAGIC
    LIFE IN ALFAYSIA


    REGIONS AND GEOGRAPHY
    POWERS AND DEITIES
    COSMOLOGY


    HISTORY
    ORGANIZATIONS
    RUNNING THE GAME


    MONSTERS AND CREATURES
    MAPS
    TABLES AND RULES
    @
    Post edited by SkidAce on
  • WolfLord
    WolfLord
    Posts: 278
    Hmm... I've been messing around with this but thus-far to no avail. I've been able to make txt change color when hovered over with your code skid, but my goal is to make one image change to another image when you hover over it. Do either of you guys know code for something like that?
  • SkidAce
    SkidAce
    Posts: 830
    I had a guy favorited who had something like that, pop ups on his map I think. I will look around.

    Personally, I 'm not sure how to accomplish that.
  • Kallak
    Kallak
    Posts: 1,090
    @TolsimirWolfblood,

    The issue I note right away with respects to your copy/pasted code is that there are no "class" identifiers for your divs or images, which makes targeting them via CSS to provide rollover effects significantly more difficult. Off the top of my head, I don't see any attributes that you can select off of in your code block, so I'm going to assume you'll end up having to edit your per-page code to add them, and if you're going to do that, you might as well just add classes and make life that much easier on yourself.
    All the best,
    - Kallak
  • SkidAce
    SkidAce
    Posts: 830
    @Kallak

    That code is suggested by Wolfhound at "Dresden Files Dallas":https://dfd.obsidianportal.com/wikis/main-page tutorials and was tweaked to my use as best I could.

    I have learned enough coding to understand what you are saying about identifiers, but not enough to implement it myself.

    And I continue to admire "DANgerous Kalamar 4":https://dangerous-kalamar-4.obsidianportal.com/ as a fantastic job of world info and background. Its been on my fav list since the beginning.
  • Kallak
    Kallak
    Posts: 1,090
    @SkidAce,

    Thanks for the positive feedback, it is much appreciated. I still have to fix some things, add the final log entry and start gearing up for Kalamar 5, but my current work schedule is causing some issues ATM. That said, the code you posted for text hovers works just fine, but unfortunately for TolsimirWolfblood, his sidebar uses images of text rather than text, which is why the hover coloration/"Tribox" setup you posted won't work for him. Fixing his issue isn't difficult, as all one would need to do is add classes to target with, but if he does that, he'll have to go into every page on his site and make the alterations over and over again - which I assume he's hoping to avoid (and with good reason, I've done it before, it sucks).

    Sadly, unless there's some method for styling images via the "src" attribute that I'm presently unaware of, I think he has no alternative.
    All the best,
    - Kallak
  • WolfLord
    WolfLord
    Posts: 278
    Thanks guys! Sorry for the slow response im on vacation so im going to be a little slow posting. It actually turns out that there is another part of my html code ive been wanting to change on all of my pages for a while so i wouldnt be opposed to changing it on every page. Tedious but not difficult. If you guys know any way I could do this with simple copy paste code, that would be perfectly fine! =D
  • Basileus
    Basileus
    Posts: 585
    @a[href*="example"]@

    Or

    @img[src*="example"]@

    Need to work in a :hover pseudo-selector.

    Haven't fiddled with it at all, so some troubleshooting required, no doubt.
  • Basileus
    Basileus
    Posts: 585 edited June 2014
    Two options will save you having to change any per-page HTML: gradient backgrounds (no new images, but annoying CSS), or create new images to add as background on hover.

    1) GRADIENT BACKGROUNDS

    Okay, so this is a pain in the arse. For each image you want to have a bronze glow effect, copy this code:

    @.campaign-public-layout img[src*="image.ext"]:hover {background: radial-gradient(center, ellipse cover, goldenrod 0%, transparent 75%); background: -moz-radial-gradient(center, ellipse cover, goldenrod 0%, transparent 75%); background: -webkit-gradient(radial, center center, 0px, center center, 75%, color-stop(0%,goldenrod), color-stop(75%,transparent)); background: -webkit-radial-gradient(center, ellipse cover, goldenrod 0%,transparent 75%); background: -o-radial-gradient(center, ellipse cover, goldenrod 0%,transparent 75%); background: -ms-radial-gradient(center, ellipse cover, goldenrod 0%,transparent 75%);}@

    Replace "image.ext" with a portion of the image source URL that is unique. In your case, something like "28871/SB_Story.png".

    I've used a gradient to give a nice soft-edged background. You must have the various browser specific background settings for the gradients, because nobody is using the W3C standard yet. Search and replace "goldenrod" to change the color at the center, and fiddle with the "75%" to change how large the glow is - just note that 100% will look weird because it fills to corners, not edges.

    2) BRONZED IMAGES

    Alternatively, you could create "bronzed" versions of each image with a yellowed glow and do something like:

    @.campaign-public-layout img[src*="image.ext"]:hover {background-image: url("image_bronzeglow.ext");}@

    Which will make a bronze glow pop under each image on hover. As before, replace "image.ext" and "image_bronzeglow.ext" with URLs for your own images. This will look better and have cleaner code than the first option, but does require creating a second copy of each image.

    I played with the z-index but wasn't able to get anything to "pop over".


    EDIT: That may be the worst explanation ever given, so let me know if you need clarification on something.
    Post edited by Basileus on
  • WolfLord
    WolfLord
    Posts: 278
    Perfect! It took me a minute but i was able to decipher your magic script and i think i can get it working with this code =P I will make sure to post once i have it done to show results!
  • WolfLord
    WolfLord
    Posts: 278
    Alright it should be up and running now! Gonna keep tweaking with it but definitely have a running version :) Thanks Basileus and everyone else it is looking great!
  • Basileus
    Basileus
    Posts: 585 edited June 2014
    I must say, it looks pretty good. Now I'm kind of jealous.
    Post edited by Basileus on
  • WolfLord
    WolfLord
    Posts: 278
    Hahaha, jealous of your own creation? Outrageous!
  • Kallak
    Kallak
    Posts: 1,090
    @ Basileus,

    I had not considered the use of "src*" as opposed to just "src" for attribute selection, well done. Noted for future reference.
    All the best,
    - Kallak
  • PhoenixMark
    PhoenixMark
    Posts: 90
    Not sure if "THIS":https://shimmering-kingdoms-fate.obsidianportal.com/wikis/the-lands-of-shimmering-kingdoms is the kind of thing you are looking for. I just started working on a brand new wiki on the game's 3rd iteration. I wanted to get all fancy-like. Shimmering Kingdoms is so very far from being ready, but if it helps, take a gander.

    I stole the code from Thorvaldr, and he has a tutorial "HERE":https://tyellador.obsidianportal.com/wikis/races-page-effect

    If I am wrong in what you are looking for, sorry. I am still learning this stuff.

    "PhoenixMark":http://www.obsidianportal.com/profile/PhoenixMark

    "CRIMSON SKIES":http://www.obsidianportal.com/campaigns/crimson-skies
    "COTM June 2012":http://blog.obsidianportal.com/crimson-skies-junes-campaign-of-the-month/

    Also "Sactown Blues":http://www.obsidianportal.com/campaigns/sactown-blues
  • WolfLord
    WolfLord
    Posts: 278
    Oh that looks sweet Phoenix, I will definitely have to poke around through that code I love that kind of stuff, rly makes the wiki pop
Sign In or Register to comment.

March 2024
Wrath of the Highborn

Read the feature post on the blog
Return to Obsidian Portal

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Discussions