Question 42471 in Html Question posted in
Some basic documentation can be found here.

how do i make multiple image-links move when hovered over? (html/css)

chibi dude with 5 text boxes around them

so, i want to make each of these elements move down a bit when hovered over. each of them are separate images and link to a different page. they all belong to one div, but don’t have divs themselves. how do i get them all to individually move when hovered over??

whenever i try to do divs/classes with tutorials i read online, all the buttons still just stay in place. this is what my code looks like when everything is just static like the image shown before. (sorry if my code is rly janky im new to html)

html part:

<body>

<div id="directory_buttons">
            <a href="https://google.com">
                <img src="images/recs_button.png"
                     style="position:absolute;
                            top:450px;
                            left:220px;
                            width:150px;">
                </a>
            <a href="https://google.com">
                <img src="images/dude_button.png"
                     style="position:absolute;
                            top:240px;
                            left:400px;
                            width:400px;"/>
                </a>
            <a href="https://google.com">
                <img src="images/items_button.png"
                     style="position:absolute;
                            top:290px;
                            left:250px;
                            width:150px;"/>
                </a>
            <a href="https://google.com">
                <img src="images/comichive_button.png"
                     style="position:absolute;
                            top:140px;
                            left:340px;
                            width:140px;">
                </a>           
            <a href="https://google.com">
                <img src="images/letters_button.png"
                     style="position:absolute;
                            top:80px;
                            left:510px;
                            width:140px;">
                </a>
            <a href="https://google.com">
                <img src="images/arts_button.png"
                     style="position:absolute;
                            top:120px;
                            left:690px;
                            width:140px;">
                </a>
        </div>
</body>

css part:

<style>
    #directory_buttons{
        display: inline-block;
        height: 500px;
        width: 800px;
        margin: auto;
        
        position: absolute;
        left: 300px;
        top: 700px;
        }
</style>
Tags:

2

Answers


  1. 0

    I recommend giving each image link its own unique div with a unique ID and using the :hover selector to shift them down. Also, # is only for ID selectors, . is for classes. Something like this:

    <div id="id_1">
    <a href="https://google.com">
        <img src="images/dude_button.png"/>
    </a>
<div>

    #id_1 {
  position:absolute;
  top:240px;
  left:400px;
  width:400px;
}

#id_1:hover {
  top:260px;
}

    You may also find this answer useful.

    Login or Signup to reply.
  2. 0

    For this, I would use the selector #directory-buttons a:hover to select the links. Then, use the translate property to move it down a few pixels.

    #directory-buttons a:hover {
  translate: 0 -10px;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search