CSS rollover image <p>I would like the top half of this image to display by default, and then use some CSS to make the image shift upward so that the bottom half shows when the mouse hovers over it. Here is the code and what I've tried, but it is not working. Can anyone help me make this code work?</p> <p>HTML:</p> <pre><code>&lt;div id="next"&gt; &lt;a href="page2.html"&gt;&lt;img src="images/next3.png" alt="next page"&gt;&lt;/a&gt; &lt;/div&gt; </code></pre> <p>CSS:</p> <pre><code>#next a:hover{background: url('images/next3.png') 0 -45px;} </code></pre> <p><img src="https://i.stack.imgur.com/OOGtn.png" alt="enter image description here"></p> <p>EDIT: HTML:</p> <pre><code> &lt;div id="next"&gt; &lt;/div&gt; </code></pre> <p>CSS:</p> <pre><code>#next { height:40px; width:160px; background-image:url('images/next3.png'); } #next:hover{background-position: 100% 100%;} </code></pre>