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: 777

    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: 4 edited December 1

    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: 777

    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: 4

    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.