Image link that changes on hover

Marion_C
Marion_C

Hello,

I've purchased Ascendent membership yesterday, so I've been trying to learn CSS for my campaign. I've managed to do simple stuff, but it's still kind of a mess.

For my wiki, I'm trying to use image links that change on hover by using two different images.

Here's what I have so far (I found the code on stackoverflow), but the CSS appears like normal text on the page, and the image link is not there. What am I missing ? Can't we mix HTML and CSS ?

Sorry if I made super dumb mistakes, I don't understand CSS well yet.


<a href="https://poudlardetlamagiedesfondateurs.obsidianportal.com/wikis/aventures"; class="aventures"></a>

.aventures {
display:block;
width: 500px;
background: url('https://i.imgur.com/oicf9eF.png') ;
}

.aventures:hover {
display:block;
width:500px;
background-image: url('https://i.imgur.com/NODzJyE.png');
}

Thanks in advance

Comments

  • SkidAce
    SkidAce
    Posts: 830

    My code is so barbaric, the best I can reccomend is for you to use the inspect function of your browser, and check out my main wiki menu.

    The boxes change on hover, and as I recall, it was based on switching images.

     

    https://unconquered-kingdoms.obsidianportal.com/wikis/main-page

  • Marion_C
    Marion_C
    Posts: 6 edited December 2018

    Thank you ! I managed to do what I wanted using some of your code and mixing it with codes from other places.

    I had not understood that the parts where we define new classes are supposed to be in the general campaign CSS ! 

    I still have some problems : the image moves on hover, and the scroll-background doesn't repeat (but only on this page), so if you have suggestions for that I would be grateful.

    I think the images aren't recognized as "main content", so the background doesn't repeat for them. I tried with text and it does repeat.

    What I put in the campaign CSS : 


    a img.hover {
    display: none;
    }
    a img.default {
    display: inline-block;
    }
    a:hover img.hover {
    display: inline-block;
    }
    a:hover img.default {
    display: none;
    }
    .size1 {position:relative;width:350px;display:block; margin-left: auto; margin-right: auto;}
    .left {position:absolute;left:20px}

    .overtext {position:absolute;top:50%; width: 100%; text-align:center;font-size:large;font-weight:bold;color:white;}

    .overtext:hover {color:yellow;}

    Here's what's on the page : 


    <div class=left><div class=size1>
    <a href="https://poudlardetlamagiedesfondateurs.obsidianportal.com/wikis/aventures">;
    <img class="default" src="https://i.imgur.com/oicf9eF.png"/; width=300px>
    <img class="hover" src="https://i.imgur.com/NODzJyE.png"/; width=300px>
    <span class="overtext"><span class="caps">AVENTURE - RESUMES</span></span>
    </a></div></div>

    And here's the result

    Post edited by Marion_C on
  • SkidAce
    SkidAce
    Posts: 830

    I believe a clunky fix would be to put breaks in the article itself to push the bottom of the article below your menu boxes.

  • Marion_C
    Marion_C
    Posts: 6

    That's what I did on my home page  and my main wiki page  and it seems to be working, thanks !   

    I'm still going to try and figure out why this happens though.

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