Bilder mit MouseOver-Effekt

Ein Bild über die CSS-Anweisung "transform: scale(...)" bei Mouseover zu skalieren, ist ein netter Effekt. 

Beispiel 1: Bild in Text-Element (kopiert)

Text-Element: Bild nicht skalierbar 

Tabellenelement: eingesetztes Bild skalierbar

html-Code

<a href="https://example.com">
<img class="bild" src="http://u.jimdo.com/www400/o/s7e4c6fd4df740750/img/ibce8d25f3cf58868/1436815431/std/image.jpg" alt="" width="50px" height="50px" />

</a>

CSS-Code

.bild:hover {
        -webkit-transform:scale(1.2);
        transform:scale(1.2);
    }

.bild {
        -webkit-transition: all 0.7s ease;
        transition: all 0.7s ease;
    }

Beispiel 2: Normales Bild-Element (id="cc-m-13031144824")

CSS-Code

#cc-m-13031144824 img:hover {

        -webkit-transform:scale(1.2);
        transform:scale(1.2);
    }

#cc-m-13031144824 img {

        -webkit-transition: all 0.7s ease;
        transition: all 0.7s ease;
    }

Update:

...und hier das Ganze in einem Container: