Transition of multiple divs with fixed width

Question

A couple of hundreds div's are dynamically created on my page, because they have all different fixed width in N px.

F.e. a couple:

<div class='show' style='width:121px'></div>
<div class='show' style='width:13px'></div>
<div class='show' style='width:58px'></div>

etc.

In my css I try to make the transitions:

<style type="text/css">
.show {
  float: left;
  background: rgba(120,120,120,0.5);
  transition: width 2s, height 2s;
  -webkit-transition: width 2s, height 2s;
}
.show:hover {
  width:300px;
  height:200px;
}
</style>

This works fine for the height, but not for the width, of course, because it's fixed.

Is it possible to get the effects going, even with fixed width? If not, can you please advice me how I should solve this problem?

inline styles are always most-preferable. You can use JS to change them, but I suggest using out-of-line styles (CSS blocks or files) to begin with. — Itay, Feb 12 '14 at 06:25

score 0 · Accepted Answer · answered Feb 12 '14 at 06:32

You could be hacky and write your CSS rule with !important:

.show {
  width:300px !important;
  height:200px;
}

But a better way would be to target them with jQuery, but to do so using an event that waits for them to be loaded in the DOM if these divs are being added dynamically.

$('.show').css('width', '300px');

Transition of multiple divs with fixed width

1 Answers1