I am able to translate an image, via a transform, and I can also, independently, change the image size. I would like to make the change in image size also be a transform, but am encountering problems. I have the following tags, to hold and manipulate an image.
<div id="viewPort" class="viewer medium_4_3 pos00_00">
<img id="img" src="imgURL" class="img_medium"/>
</div>
The viewer
class contains all the CSS except size and positioning. The class medium_4_3
is one of several possible that each contain a height
and width
property. The last class, “pos00_00” is one of a large collection of positioning classes with a range of translation values. An example follows:
.viewer.pos20_60 img {
transform: translate(-20%, -60%);
transition: transform 1000;
}
By removing and adding “pos” classes, I translate the image with the following Javascript code fragment (where the desired positioning classes are contained in the variables):
viewPort.classList.remove(posClassToReplace);
viewPort.classList.add(currentPosClass);
To change the size of the image, I am using a series of CSS classes that specify a range of widths:
.img_small
width: 300;
opacity: 0;
}
.img_medium {
width: 600;
opacity: 0;
}
.img_large {
width: 1000;
opacity: 0;
}
The Javascript that handles the switching for the image similarly removes and adds classes to the classList for img.classList
.
Forgot to mention: the opacity values are defaults that are manipulated in Javascript, using a setInterval
method for fading in or out.
The changes in the image size are instantaneous. I’d like to make them transition, similar to the way the translation values are transitioned. But so far I’ve been unable to do so. For example, I tried rewriting the CSS for the image sizing classes as follows:
.img_medium {
transform: scale(4.25); /* img.jpg: 2550 pixels width, desired: 600 */
transition: transform 1000;
opacity: 0;
}
However, this leaves the image on the screen at the full 2550 width, instantaneously, with no transform animation visible.
I clearly am missing something about how to go about this.
Is this a situation where one should instead look at making another setInteraval
method (similar for fading in and out) to directly alter the image’s width
property? I think I’d rather use transform, if it can be made to work.