Converting an Edge animation to just CSS3 - css

Question

I'm trying to make this Edge animate animation http://www.instagib.dk/mainlinks.html into pure css. I don't know if it possible, but it could be awesome for some tips or help.
I have a fiddle, where I'm trying to do it.
"http://jsfiddle.net/MikkelMadsen/9KjL8/"
HTML:
<div class="product-wrap">gå til varen
<div class="produkt-img-bg">
<div class="produkt-img"><img src="http://www.instagib.dk/anatomical_sole.png" width="300" height="140"/>
</div>
</div>
<div class="produkt-text">Anatomical</div>
<div class="slide">
<div class="slide-hover"></div>
</div>
</div>
CSS:
product-wrap {
width:300px;
height:290px;
display: table-cell;
vertical-align: bottom;
}
.produkt-img-bg {
width:300px;
height:155px;
background:url(http://www.instagib.dk/anatomical_bg.png) no-repeat;
}
.produkt-img{
width:300px;
height:140px;
}
.produkt-img:hover{
-webkit-transition: opacity 1s linear;
-moz-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
filter: alpha(opacity=30);
opacity:0.5;
background-color:#57b6dd;
}
.produkt-img img {
width:300px;
height:140px;
-webkit-transition: all 0.5s ease; /* Safari and Chrome */
-moz-transition: all 0.5s ease; /* Firefox */
-ms-transition: all 0.5s ease; /* IE 9 */
-o-transition: all 0.5s ease; /* Opera */
transition: all 0.5s ease;
}
.produkt-img:hover img {
width:300px;
height:140px;
-webkit-transform:scale(1.1); /* Safari and Chrome */
-moz-transform:scale(1.1); /* Firefox */
-ms-transform:scale(1.1); /* IE 9 */
-o-transform:scale(1.1); /* Opera */
transform:scale(1.1);
}
.produkt-text{
width:300px;
height:123px;
}
.slide{
width:300px;
height:12px;
background-color:#B8B7B7;
}
.slide-hover{
width:300px;
height:12px;
}
.slide-hover:hover{
-webkit-animation: slider 0.5s normal forwards linear;
-moz-animation: slider 0.5s normal forwards linear;
-o-animation: slider 0.5s normal forwards linear;
animation: slider 0.5s normal forwards linear;
animation-iteration-count: 1;
width:300px;
height:12px;
background-color:#000;
}
#-webkit-keyframes slider {
from {
width: 0%;
}
to {
width: 100%;
}
}
Hoping for css wizard to help me out:)

Answer 1

You Effect converted into css >> Hover Effect
HTML
<div class="product-wrap">
<div class="image-wrap">
<div class="img-container">
<div class="produkt-img">
<img src="http://www.instagib.dk/anatomical_sole.png" width="300" height="140">
<div class="title">Arch Mid<br> <span class="subtitle">Subtitile</span>
</div>
<div class="overlay">Product Name</div>
</div>
<div class="pricetag">250,00 Kr.</div>
<div class="graybar"></div>
<div class="blackbar"></div>
</div>
</div>
css
.product-wrap {
background:url(http://www.instagib.dk/anatomical_bg.png) no-repeat;
width:300px;
height:290px;
display: table-cell;
vertical-align: bottom;
position:relative;
border:1px solid #ccc;
transition:all 0.4s ease-out;
font-family:sans-serif;
transition:all 1s ease;
cursor:pointer;
}
.product-wrap:hover img {
transform:scale(1.1);
transition:all 0.42s ease;
}
.product-wrap:hover .overlay {
opacity:1;
}
.product-wrap:hover .blackbar {
width:100%;
}
.image-wrap {
width:300px;
height:155px;
}
.produkt-img {
position:absolute;
top:0;
transition:all 1s ease;
}
.product-wrap img {
transition:all 0.42s ease;
}
.overlay {
position:absolute;
top:0;
width:100%;
height:98%;
background:rgba(123, 217, 253, 0.6);
opacity:0;
transition:all 0.6s ease;
color:#fff;
font-size:28px;
line-height:5;
vertical-align:middle;
text-align:center;
}
.graybar {
position:absolute;
bottom:0;
right:0;
height:13px;
width:100%;
background-color:#cecece;
}
.blackbar {
position:absolute;
bottom:0;
left:0;
height:13px;
width:0%;
background-color:#000;
transition:all 0.3s ease-in;
}
.pricetag {
padding-right:2px;
position:absolute;
bottom:13px;
left:0;
height:30px;
width:100%;
font-size:22px;
text-align:right;
}
.title {
padding-right:2px;
position:absolute;
bottom:13px;
top:160px;
left:0;
height:30px;
width:100%;
font-size:35px;
text-align:center;
}
.subtitle {
color:#ccc;
font-size:18px;
}