All for Joomla All for Webmasters

Hover da imagem com embaçamento

Veja o exemplo abaixo:

Cole o código abaixo no seu CSS:

.blurimg {-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;}
 
.blurimg: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; -webkit-filter: blur(2px); -moz-filter: blur(2px); -o-filter: blur(2px); filter: blur(2px);}

Em seguida, cole o código aonde você quer que apareça a imagem:

<img src="http://LINK_DA_IMAGEM.jpg" class="blurimg">

Dúvidas? Ask-me!

Obrigada ao Mundo de Bolinhas.