moving images on hover with css

Question

is it possible tho have this hover effect http://apotheke-hh.de/index.php?option=com_content&view=category&layout=blog&id=11&Itemid=2 with css, working in all major browsers?

For others who read this and if the link is broken - see attached images.

Regards Torsten!

hover image one

Answer 1

I suppose you can for all major browsers, but it depends on the versions of course, here is an example:

HTML

<div class="all">
    <div class="col one"></div>
    <div class="col two"></div>
    <div class="col three"></div>
</div>

CSS

.col {
   float:left;
    width: 33.3333%;
    height: 150px;
    transition:width 300ms ;
}

.all:hover .col{
    width:25%;
}
.all:hover .col:hover {
    width: 50%;
}

and the live on on JSFiddle: http://jsfiddle.net/pavloschris/mrXPu/

The only 'weird' rule is transition which has a very good support as seen in Can I Use

Answer 2

Most probably you'll need JS to achieve this effect! CSS only solution isn't possible in all major browsers.