M. Boeckx M. Boeckx - 5 months ago 14
HTML Question

CSS3 Transition - expand visible part of image

I want to use CSS3 to make a transition but I'm new to the subject and can't really see how I'm supposed to get started on my idea. I did some research, but I had a very specific thougt in mind and there's not that much examples of that available.

I want to make a transition that only shows the first card at the beginning, but when hovered on, the image box spreads slowly so the other cards appear.

This is the image

Does anyone have an idea on how to do this? It would be a great help and a nice lesson for me.

Thanks in advance

Answer

Create a <div class="cards"> element with background of your image:

div.cards {
  width: 43px;
  /* width of one card */
  height: 65px;
  background: url(http://i.stack.imgur.com/ivCAY.png) 0 0 no-repeat;
  -webkit-transition: width 2s;
  transition: width 2s;
}
/* then on hover: */

div.cards:hover {
  width: 550px;
  /* width of full image */
}
<div class=cards />

Comments