Since there are more than one state change (that is, opacity: 0.5 initially before the transform is completed and then opacity: 1 after the transform is completed, you cannot do it with transition alone because the transition can only change the opacity value once and retain it. You either need to use CSS3 animations or alter the styling using JS with transitionend event.
Below is a sample snippet with CSS3 animations where on hover the image gets opacity: 0.5 and this state is retained till the 99% keyframe. All this happens while the image goes from not having any transform to transform: scale(2,2). Then at the 100% frame, the transform is retained as it is but opacity is changed from 0.5 to 1.
#imagecontainer {
border: 2px solid red;
width: 251px;
height: 251px;
opacity: 1;
position: absolute;
}
#image {
width: 250px;
height: 250px;
border: 2px solid black;
position: absolute;
opacity: 1;
}
#image:hover {
opacity: 0.5;
animation: opacitynscale 1s ease-in-out forwards;
}
@keyframes opacitynscale {
99% {
transform: scale(2, 2);
opacity: 0.5;
}
100% {
transform: scale(2, 2);
opacity: 1;
}
<div id='imagecontainer'>
<img id='image' src='http://lorempixel.com/250/250/nature/1' />
</div>
The downside of using CSS animation instead of transition for this is that unlike transition, the animation wouldn't automatically produce the reverse effect on hover out (that is, it would snap back to original state and not gradually go back). Another animation must be written for the reverse effect.
If you can't use CSS3 animation for whatever reasons (including the aforementioned) then you can do it with a bit of JavaScript by using the transitionend event.
var img = document.getElementById('image'),
mousein = false;
img.addEventListener('transitionend', function() { /* this event is fired when transition is over */
if (mousein)
img.style.opacity = 1; /* changes element's opacity to 1 */
else
img.style.opacity = null; /* remove inline style on hover out, otherwise it will override others */
});
/* to determine if mouse is over image or not */
img.addEventListener('mouseover', function() {
mousein = true;
});
img.addEventListener('mouseout', function() {
mousein = false;
});
#imagecontainer {
border: 2px solid red;
width: 251px;
height: 251px;
opacity: 1;
position: absolute;
}
#image {
width: 250px;
height: 250px;
border: 2px solid black;
position: absolute;
opacity: 1;
transition: transform 1s ease-in-out;
}
#image:hover {
opacity: 0.5;
transform: scale(2, 2);
}
<div id='imagecontainer'>
<img id='image' src='http://lorempixel.com/250/250/nature/1' />
</div>
