How can I move an image upwards in HTML?

Question

I'm trying to get an image to move upwards. The problem is that the code I've added doesn't work.

img src="arrow_inv.png" {
      animation-duration: 2.4s;
      animation-name: arrow;
    }

    @keyframes arrow {
      from {
        float: right; margin: 28em -4em 1em 1em;
      }

      to {
        float: right; margin: 8em -4em 1em 1em;
      }
    }

<img src="arrow_inv.png" style="float: right; margin: 28em -4em 1em 1em;" width="100px" height="75px">

Does anyone know how I can fix this?

Answer 1

You need to use img[src="..."] . You can read some examples of attribute selector on MDN . Next time when debugging simple cases, you can simplify it as much as possible, and make it work, and then add more to it. For example, in this case you can make it just img { ... } since there is only one image, and see that it worked, and you will know the part img src="arrow_inv.png" needs fixing.

You may or may not want the right negative margin depending on what you'd like to do.

 img[src="https://i.imgur.com/j7Ie7pg.jpg"] { animation-duration: 2.4s; animation-name: arrow; } @keyframes arrow { from { float: right; margin: 28em -4em 1em 1em; } to { float: right; margin: 2em -4em 1em 1em; } }

 <img src="https://i.imgur.com/j7Ie7pg.jpg" style="float: right; margin: 28em -4em 1em 1em;" width="100px" height="75px">