Featured and Most Popular images

I have an issue that I've spent hours trying to sort out (by trying all sorts of combinations of code) and finally I've decided to confess my ignorance and ask for help.

In the Home Page 'Featured Product' and 'Most Popular' sections I have changed the size of the image boxes to be 100px high by 90px wide.

I want the boxes to show only a part of the image, as the photos themselves are landscape-style, and I've made the boxes portrait-style. I thought adding "overflow: hidden;" would make the extra bit of the image disappear, but instead the picture is being stretched to fit the box (which is not what I want).

Here's my code (in default_home.css):

#featuredWrapper .box .popularImage, #featuredWrapper .box .featuredImage{
border: 2px solid #fff;
height:100px;
width: 90px;
overflow: hidden;

I know it's a silly thing that I should be able to figure out myself, but your assistance would be appreciated.

My site is at : index.php

This is not a supported modification in power store.

it requires another span and using background position to mask the portion of the image.

see the following page for details on using background position to mask an image:
css_imagetech1.html