CSS-маски для hover-эффекта

by Denis Tverdokhlebov

HTML

<div class="shape">
    <a href="#" class="overlay {round|hexagon|pentagon}"></a>    
    <a href="https://www.yandex.ru/">
        <div class="details">
            <span class="heading">{TITLE}</span>
            <hr />
            <p>{DESCRIPTION}</p>        
        </div>  
    </a>
    <div class="bg"></div>    
    <div class="base">
        <img src="http://dbmast.ru/wp-content/uploads/2014/11/hovereffect-15.jpg" alt="" />
    </div>    
</div>

CSS

.shape {
    width: 300px;
    height: 300px;
    position: relative;
}
        
    .shape .overlay {
        display:block;
        width: 310px;
        height: 310px;
        position: absolute;
        top:-5px;
        left:-5px;
        -webkit-transform: scale(1,1);
        -webkit-transition-timing-function: ease-out;
        -webkit-transition-duration: 0.6s;
        -moz-transform: scale(1,1);
        -moz-transition-timing-function: ease-out;
        -moz-transition-duration: 0.6s;
        transform: scale(1,1);
        transition-timing-function: ease-out;
        transition-duration: 0.6s;                
        z-index:500;
        /* allow user to actually perform actions underneath this layer */
        pointer-events:none; 
        background-repeat: no-repeat;
    }
/* different shapes */
.shape .overlay.round {
    background: url(round.png);        
}
.shape .overlay.hexagon {
    background: url(hexagon.png);
}
.shape .overlay.pentagon {
    background: url(pentagon.png);
}            
/* hover effect */
.shape:hover .overlay {
    -webkit-transform: scale(1.07,1.07);
    -webkit-transition-timing-function: ease-out;
    -webkit-transition-duration: 0.3s;
    -moz-transform: scale(1.07,1.07);
    -moz-transition-timing-function: ease-out;
    -moz-transition-duration: 0.3s;
}
.shape:hover .bg {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
  filter: alpha(opacity=80);
  -moz-opacity: 0.8;
  -khtml-opacity: 0.8;
  opacity: 0.8;
  display:block;
}
.shape:hover .details {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  -moz-opacity: 1;
  -khtml-opacity: 1;
  opacity: 1;
    z-index:450;
  display:block;    
}    
        
        
/* content styles */
.shape .bg, 
.shape .details {
    position: absolute;
    width: 500px;
    height:272px;
    display:table-cell;
    vertical-align:middle;
    text-align:center;
    top:0;
    left:0;
    opacity:0;
   ...