O efeito "hover" não funciona quando eu decido fazer data-bind do modelo para a view usando colchetes

Por que o efeito do "hover" não funciona quando eu faço o data-bind, do modelo para view, usando colchetes? Testando, eu vi que funciona se eu usar as chaves duplas, como no ÂngularJS.

foto.component.html - Deste modo não funciona o hover

<img class="img-responsive center-block efeito" [src]="url" [alt]="titulo">

foto.component.html - Deste modo funciona

<img class="img-responsive center-block efeito" src="{{url}}" alt="{{titulo}}">

foto.component.ts

import { Component, Input } from '@angular/core';

@Component({
    moduleId: module.id,
    selector: 'foto',
    templateUrl: './foto.component.html',
    styleUrls: ['./foto.component.css']
})


export class FotoComponent {
    @Input() titulo: string;
    @Input() url: string;
    descricao: String;
    _id: string;
}

foto.component.css

.efeito:hover{
    transition: all 0.5s;
    transform: scale(1.15);
}

.efeito{
    transition: all 1s;
}

Só pra complementar, eu notei na parte 1 do curso, quando implementamos a tela de cadastrar novas fotos, que quando eu usava colchetes no data-bind e não tinha valor nenhum para a URL, o local da imagem ficava com um simbolo de foto quebrada, mas se eu usasse chaves duplas ficava legal, ou seja, só exibia a foto quando eu colocava a URL no campo.