To create a smooth transition effect, it's crucial to establish clear starting and ending points. Instead of using "background none," opt for rgba(255,255,255,0) so that both the beginning and end match seamlessly.
Keep in mind that CSS doesn't interpret phrases like "background-color" -> "none" during transitions. It's better to stick with transparent, as "none" isn't a valid CSS value for background-color.
If you're experiencing issues, it could be due to some conflicting parts of your CSS. Eliminating the scaling elements might resolve the problem. Check out my alternative fiddle, which seems to work properly. Perhaps refining your code structure will help achieve the desired outcome? I substituted 'figure' for 'image,' but the behavior should remain consistent. I hope this information proves useful!
Here is your revised demo, and here's my example.
<figure>
<figcaption>without scale</figcaption>
</figure>
<figure class="scale">
<figcaption>with scale</figcaption>
</figure>
--
.trans, figure, figcaption {
-webkit-transition: all .5s linear;
-moz-transition: all .5s linear;
-o-transition: all .5s linear;
transition: all .5s linear;
}
figure {
position: relative;
width: 20em;
height: 10em;
background-color: rgba(255,0,104,1);
}
figure:hover {
background-color: rgba(255,0,104,.2);
}
figcaption {
position: absolute;
width: 100%;
bottom: 0; left: 0;
padding: 2em 1em;
background-color: rgba(255,255,255,.8);
}
figure:hover figcaption {
bottom: 20px;
background-color: rgba(255,255,255,.0);
}
.scale:hover {
-webkit-transform: scale(1.1, 1.1);
-moz-transform: scale(1.1, 1.1);
-ms-transform: scale(1.1, 1.1);
-o-transform: scale(1.1, 1.1);
transform: scale(1.1, 1.1);
}