That’s just a minor adjustment with a media query and will look fine across the whole range of devices. It was just a proof of concept and you just needed to tweak a little.
I’ve updated the codepen with my image and it scales fine.
Here’s it as seen on a small device with the letter ‘I’ rolled over.
Ok make two images for each letter. One normal and one rollover image. make sure both images are the same size and use an image size that represents the largest you would want it seen at (note that you can vary the width of individual letters (like ‘I’) but the height must remain the same for all images ).
I’ve made letters A,B,C and their rollovers.
i.e.
I made them at 90px x 100px which seems large enough to me.
Once you have made the images put all the normal states in the html like this:
<ul id="lettersan">
<li><a class="leta" href="#a"><img src="images/leta.gif" width="90" height="100" alt="Leter A"></a></li>
<li><a class="letb" href="#b"><img src="images/letb.gif" width="90" height="100" alt="Leter B"></a></li>
<li><a class="letc" href="#c"><img src="images/letc.gif" width="90" height="100" alt="Leter C"></a></li>
<li><a class="letd" href="#d"><img src="images/letd.gif" width="90" height="100" alt="Leter D"></a></li>
<li><a class="lete" href="#e"><img src="images/lete.gif" width="90" height="100" alt="Leter E"></a></li>
<li><a class="letf" href="#f"><img src="images/letf.gif" width="90" height="100" alt="Leter F"></a></li>
<li><a class="letg" href="#g"><img src="images/letg.gif" width="90" height="100" alt="Leter G"></a></li>
<li><a class="leth" href="#h"><img src="images/leth.gif" width="90" height="100" alt="Leter H"></a></li>
<li><a class="leti" href="#i"><img src="images/leti.gif" width="90" height="100" alt="Leter I"></a></li>
<li><a class="letj" href="#j"><img src="images/letj.gif" width="90" height="100" alt="Leter J"></a></li>
<li><a class="letk" href="#k"><img src="images/letk.gif" width="90" height="100" alt="Leter K"></a></li>
<li><a class="letl" href="#l"><img src="images/letl.gif" width="90" height="100" alt="Leter L"></a></li>
<li><a class="letm" href="#m"><img src="images/letm.gif" width="90" height="100" alt="Leter M"></a></li>
<li><a class="letn" href="#n"><img src="images/letn.gif" width="90" height="100" alt="Leter N"></a></li>
</ul>
The images are set to a max-width of 100% which means that hey will render at natural height until such time as they don’t fit anymore and will then scale smaller as required. The height of the image is set to auto in the css to allow the image to maintain the correct aspect ratio.
You don’t need to put the text letters A,B,C etc text in the anchor because the alt attribute of the image will provide that information semantically. After all the image is really content in this case and probably should not be a background image.
However we will make the rollover a background image as that is only decoration.The rollovers will be absolutely placed under the image and then we simply switch opacity on hover to a, hide the real image and b, to reveal the rollover.
The rollover image takes up the same size as the normal image (because we absolutely placed it there) but the background image would be the wrong size which is why we use background-size:100% in order to make the background image fit exactly the space required. The aspect ratio is already correct because the normal image still holds the space open even though it is invisible on hover.
#lettersan{
list-style:none;
margin:1em 0;
padding:0;
display:flex;
}
#lettersan a{display:block;position:relative;}
#lettersan a img{max-width:100%;height:auto;transition:.5s ease;}
#lettersan a:after{
content:"";
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
opacity:0;
background-repeat:no-repeat;
transition:.5s ease;
background-size:100%;
}
.leta:after{background-image:url(images/leta-over.gif)}
.letb:after{background-image:url(images/letb-over.gif)}
.letc:after{background-image:url(images/letc-over.gif)}
/* and so on for every letter */
/* rollover magic */
#lettersan a:hover img{opacity:0}
#lettersan a:hover:after {opacity:1}
As you can see the CSS is much simplified without the need for all those numbers.
Here’s a full working example for the letters A, B & C only (I didn’t have time to make the whole alphabet).
http://www.pmob.co.uk/temp2/letters4.html
Just ‘view source’ to see the code as I have left it all in the head for ease of use.
The letters will render at their natural size if their is room but once the window width is full of letter the letters will scale smaller as required.
The downside of this multi image approach is of course the extra overhead in loading the extra images as opposed to the one sprite in the other example.
