Galeria imagens hexagonál

Eu aqui com mais uma partilha... Como pode visualizar na imagem ,trago um código com efeito na imagem em forma hexagono e efeito hover. O autor do código original é One div então os créditos são dele,eu fiz algumas mudanças e resultado e este. Veja exemplo de como fica :Entre aqui

Vamos então ao tutorial...

Antes de tudo faça 1 cópia s template...

Vamos aplicár css entre seu template em modelo e procure este código´´

]]></b:skin>

E acima dele coloque este meu´´

h1 {
font-family: Arial Black;
font-size:32px;
padding: 0.2em 0 0.2em 0.2em;
color:#8efbf3 ;
text-shadow: 0 0.06em 0 #424242;
position: relative;
 background: #c0c0c0;
 width: 500px;
}
.btheader {
position: relative;
}
.titulobt_item {
width: 200px;
height: 230px;
position: relative;
display: inline-block;
}
.hexagon2 {
position: absolute;
width: 200px;
height: 400px;
top: -85px;
  margin-left: 0px ;
}
.hexagon {
overflow: hidden;
visibility: hidden;
-webkit-transform: rotate(120deg);
-moz-transform: rotate(120deg);
-o-transform: rotate(120deg);
-ms-transform: rotate(120deg);
transform: rotate(120deg);
cursor: pointer;
}
.hexagon-in1 {
overflow: hidden;
width: 200px;
height: 400px;
-webkit-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-o-transform: rotate(-60deg);
-ms-transform: rotate(-60deg);
transform: rotate(-60deg);
}
.hexagon-in2 {
-webkit-box-shadow: inset 0 0 0 200px rgba(176, 218, 212, 0.48);
box-shadow: inset 0 0 0 200px rgba(176, 218, 212, 0.48);
overflow: hidden;
width: 200px;
height: 400px;
background-repeat: no-repeat;
background-position: 50%;
-webkit-background-size: 125%;
-moz-background-size: 125%;
background-size: 125%;
visibility: visible;
-webkit-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-o-transform: rotate(-60deg);
-ms-transform: rotate(-60deg);
transform: rotate(-60deg);
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.hexagon-in2:hover {
-webkit-box-shadow: inset 0 0 0 0px #B0DAD4;
box-shadow: inset 0 0 0 0px #B0DAD4;
-webkit-filter:contrast(3);
}

Agora feito isso vamos colocar html faça 1 postagem no seu blog e coloque este código´´

<center>
 <div class="btheader">     <h1>GALERIA IMAGENS BT</h1>
        <div class="titulobt_item">         <div class="hexagon hexagon2">
            <div class="hexagon-in1">
                <div class="hexagon-in2" style="background-image: url(https://i.imgur.com/APmB8jk.jpg);">              
                </div>
             </div>
         </div>
         </div>
          <div class="titulobt_item">
          <div class="hexagon hexagon2">
            <div class="hexagon-in1">
                <div class="hexagon-in2" style="background-image: url(https://i.imgur.com/YoxAMeL.jpg);">              
                </div>
             </div>
         </div>
         </div>    
</center>

Agora salve e veja como ficou...

NOTAS:

• encontre este trecho  <h1>GALERIA IMAGENS BT</h1>   troque p/seu
• encontre  link https://i.imgur.com/APmB8jk.jpg troque s/imagem
• encontre link https://i.imgur.com/YoxAMeL.jpg troque s/imagem

Alguma coisa deixe recado...Inté...

Galeria imagens hexagonál

► 0

► efeitos vários

► Cartita