Veja o efeito abaixo:
Cole o código abaixo no seu CSS:
.sephia {-moz-border-radius:0 40px;-webkit-border-radius: 0 40px; border-radius:0 40px; -webkit-transition-duration: .50s; -moz-transition-duration: .50s; transition-duration: .50s; box-shadow: 0 0 3px #ff5970; -moz-box-shadow: 0 0 3px #ff5970; -webkit-box-shadow: 0 0 3px #ff5970;}
.sephia:hover {-moz-border-radius:40px 0px;-webkit-border-radius: 40px 0px; border-radius:40px 0px; -webkit-transition-duration: .50s; -moz-transition-duration: .50s; transition-duration: .50s; box-shadow: 0 0 3px #ff5970; box-shadow: 0 0 3px #ff5970; -moz-box-shadow: 0 0 3px #ff5970; -webkit-box-shadow: 0 0 3px #ff5970; filter: sepia(100%); -webkit-filter: sepia(100%); -moz-filter: sepia(100%); -o-filter: sepia(100%); -ms-filter: sepia(100%);}
E cole o código abaixo onde você quiser:
<img src="http://LINK_IMAGEM.jpg" class="sephia" width="470">
Dúvidas? Ask-me!
Obrigada ao Up Design.