2

What I'm Doing: Taking this:

#prod-img {
    width: 33%;
    max-width: 33%;
    margin-right: 3%;
    display: inline-block;
    float: left;
}

and trying to transition to this:

#prod-img:hover, #prod-img:active{
    width: auto;
    float: none;
    display: block;
    max-width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}

Here is a jsFiddle of what this looks like in action.

Problem: CSS Transitions from a percent to initial is great unless you can't use max-width. I need to use max-width to actually cap the width so I can't do what is suggested here. I can't use width because all of the images have different widths.

What I've Tried: Using width, margin, and height. I also tried using jQuery .addClass() and .css() but absolutely nothing happened when I moused over.

Desired Result: A silky-smooth CSS transition from small and floating left to large and centered on images of any size.

Here's what the HTML looks like (I'm using angular to spool off lots of these images):

<div>
    <img id="prod-img" src="{{product.url}}" alt="{{product.name}}" />
</div>
Community
  • 1
  • 1
dlkulp
  • 2,204
  • 5
  • 32
  • 46
  • 1
    `float` is not a transitionable/animatable property as per [W3C Spec](http://www.w3.org/TR/css3-transitions/#animatable-properties) and so I don't think you change it from `float: left` to `float: none` and get it transitioned. – Harry Sep 15 '15 at 10:05
  • I have noticed that but the width and max-width do change (just not to anything concrete) which is why I'm hoping I can transition – dlkulp Sep 16 '15 at 00:20

1 Answers1

0

As you have not provided respective HTML, I assumed and created something like this.

#prod-img img{    
    margin:0px;
    width:33%;
    transition:2s;
    
}
#prod-img:hover img, #prod-img:active img{    
    width:400px; /*width must be specified*/
    transform:scale(1.2); /*scale as much as you need*/
    margin-left:calc(50% - 200px); /* Calculate the half of the image width */
}
<div id="prod-img">
    <img src="https://i.stack.imgur.com/3NQEB.png?s=328&g=1">
</div>

Hope this help you.!

CodeRomeos
  • 2,428
  • 1
  • 10
  • 20
  • Sorry to nitpick but I still don't think this meets OP's requirements because you are using a set `width` whereas OP seems to be wanting to apply only a `max-width` instead of a set width. However, I'll leave it to OP to decide if this is useful for them :) – Harry Sep 15 '15 at 10:34
  • yep, I need this class to work on many images of different sizes so I can't use a set width. I'll update the question to clear things up a bit. – dlkulp Sep 16 '15 at 00:06