Special image slider - html

Question

I've seen a very cool slider that I'd like to recreate, however, I wanna try it with pure HTML and CSS first. (Original one is javascript only, but its several years old and from a quite unprofessional source.) This is just a test of concept, so there's no effort put in crossbrowser-stuff etc.
Also, I don't know how to call it so I've no idea how to google it.
The idea is to have let's say 5 pictures in a box with equal widths. On hovering one of these the non-active ones should shrink allowing the active one to be fully displayed. Here's what I tried:
#showcase {
position: relative;
width: 760px; /* 750px + 10px to prevent flickering */
height: 200px;
}
#showcase:hover > .jewelry {
width: 75px;
}
.jewelry {
width: 150px;
height: 100%;
float: left;
transition: width 1s;
}
.jewelry:hover {
width: 450px !important;
}
.jewelryOtherHovered {
width: 75px;
}
#jewelry1 {
margin-left: 5px;
background-color: red;
}
#jewelry2 {
background-color: yellow;
}
#jewelry3 {
background-color: green;
}
#jewelry4 {
background-color: blue;
}
#jewelry5 {
background-color: pink;
}
<div id="showcase">
<div id="jewelry1" class="jewelry" onMouseOver="(0)" onmouseout=""> </div>
<div id="jewelry2" class="jewelry"></div>
<div id="jewelry3" class="jewelry"></div>
<div id="jewelry4" class="jewelry"> </div>
<div id="jewelry5" class="jewelry"></div>
</div>
Needless to say, it doesn't work the way I want it to. Try hovering the yellow block and when its half done go to the green one. That results in a wrong overall width. (Pink one doesn't remain to be stuck on the right side, hope you get what I mean.) Then hover from the red one very fast to the yellow one and then go out of the box at the bottom. In that case this is were the pink one is shown.
Question being, does anyone know how to fix it or does anyone have a better approach? Thanks for your help :-)

Answer 1

What are your reasons for avoiding javascript/jQuery?
From what I understand you want the following:
when none are active: the width to be each 20%
when one is active:
-the active: say 60%
-the others: 10% each
-total: 100%
http://jsfiddle.net/messedUP90/ahmdo124/
I just edited the values. There appears to be a few lines that not necessary that you could cut out.