Creo en los ángeles

 

Todos somos ángeles

 

¡Es un ángel!

 

HTML

<div class="portfolio">
<div class="pentagon"><a href="#"> <span class="mask">&nbsp;</span> <img src="https://img-fotki.yandex.ru/get/4421/122885204.d9/0_6c55a_b5d557f2_orig" alt="" /> </a>
<div class="portfolio-title">
<h4>Creo en los &aacute;ngeles</h4>
</div>
</div>
<div class="pentagon"><a href="#"> <span class="mask">&nbsp;</span> <img src="http://www.omartasatt.ru/_ph/16/2/844056267.jpg?1424605507" alt="" /> </a>
<div class="portfolio-title">
<h4>Todos somos &aacute;ngeles</h4>
</div>
</div>
<div class="pentagon"><a href="#"> <span class="mask">&nbsp;</span> <img src="http://www.omartasatt.ru/_ph/16/2/23819240.jpg?1424605061" alt="" /> </a>
<div class="portfolio-title">
<h4>&iexcl;Es un &aacute;ngel!</h4>
</div>
</div>
<!-- clearfix -->
<div class="clearfix">&nbsp;</div>
</div>

CSS

<style type="text/css"><!--
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;
}body{line-height:1;}ol,ul{list-style:none;}blockquote,q{quotes:none;
}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;
}table{border-collapse:collapse;border-spacing:0;}body{margin:0 auto;font:1em/1.3em Helvetica,sans-serif;}.clearfix{clear:both;}.portfolio{text-align:center;}.portfolio .pentagon{
 float:left;
 margin:20px;
 width:205px;
}.pentagon .portfolio-title{
 position:relative;
 float:left;
 width:100%;height:20px;
 overflow:hidden;
 margin-top:20px;
}
 .pentagon .portfolio-title h4{
 position:relative;
 line-height:20px;
 width:100%;
 text-align:center;
 font-weight:bold;
 color:#777;
}.portfolio-title h4 span{
 width:100%;
 position:absolute;
 margin:0 auto;
 left:0;
 color:#4EA838;
 top:20px;
}
 .portfolio .pentagon a{float:left;width:200px;
 height:200px;overflow:hidden;
 display:block;position:relative;
}
 .portfolio .pentagon a img{
 position:absolute;
 left:-75px;
 top:0;-webkit-filter:grayscale(100%);
 -moz-filter:grayscale(100%);-o-filter:grayscale(100%);
 -ms-filter:grayscale(100%);filter:grayscale(100%);
 -webkit-transition:300ms ease-out;-moz-transition:300ms ease-out;-o-transition:300ms ease-out;transition:300ms ease-out;-webkit-backface-visibility:hidden;
}
 .portfolio .pentagon a img.hovering{
 left:-50px;
 -webkit-filter:grayscale(0%);
 -moz-filter:grayscale(0%);
 -o-filter:grayscale(0%);
 -ms-filter:grayscale(0%);
 filter:grayscale(0%);
}
 .portfolio .pentagon a span.mask{
 width:300px;
 height:300px;
 position:absolute;
 top:-50px;
 left:-50px;z-index:2;
 background:url("http://i.imgur.com/TRCbYrJ.png") no-repeat;-webkit-transition:-webkit-transform 300ms ease-out;-moz-transition:-moz-transform 300ms ease-out;-o-transition:-o-transform 300ms ease-out;
 transition:transform 300ms ease-out;-webkit-backface-visibility:hidden;
}
 .portfolio .pentagon a span.mask:hover{
 -webkit-transform:rotate(30deg);
 -moz-transform:rotate(30deg);
 -ms-transform:rotate(30deg);-o-transform:rotate(30deg);transform:rotate(30deg);
}
--></style>