Banner Overlay Effect

<style>
#banner { padding: 20px 0; background: url(../images/img.jpg) no-repeat top; background-size: cover; position: relative;  background-position: 50% 30%;    min-height: 500px;}
#contact-page:before { position: absolute; content: ""; left: 0; right: 0; top: 0; bottom: 0; background: rgba(0,0,0,0.6);}
</style>
<section id="banner">
<h3>Banner Overlay Effect </h3>
</section>

On Mouse hover circle Radius

<style>
body {height: 100%;background-color: #f2f2f2;}
.portfolio-grid {list-style: none;padding: 0;margin: 0 auto;text-align: center;width: 100%;}
.portfolio-grid li {display: inline-block;margin: 5px 5px 5px 5px;vertical-align: top;   width:250px; height:250px;}
.portfolio-grid li.blue a{ background:#0000FF;}
.portfolio-grid li.orange a{ background:#FF6600}
.portfolio-grid li.black a{ background:#333;}
.portfolio-grid li.red a{ background:#FF0000;}
.portfolio-grid li > a{ font-size:36px; color:#fff; text-align:center; text-decoration:none; font-family:Verdana, Arial, Helvetica, sans-serif; width:250px; height:250px;}
.portfolio-grid li > a { border: none;outline: none;display: block;position: relative;   transition: all 0.3s ease-in-out;    -moz-transition: all 0.3s ease-in-out;   -webkit-transition: all 0.3s ease-in-out;   -o-transition: all 0.3s ease-in-out;}
.portfolio-grid li > a:hover {  border-radius: 50%;  z-index: 9999;  width:250px; height:250px;}
.portfolio-grid li > a h3{ font-size:36px; color:#fff; padding:90px 0 0 0;}
.animated{-webkit-animation-duration:1s;-moz-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both;}
@-webkit-keyframes flipInX {
    0% {
        -webkit-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
    
    40% {
        -webkit-transform: perspective(400px) rotateX(-10deg);
    }
    
    70% {
        -webkit-transform: perspective(400px) rotateX(10deg);
    }
    
    100% {
        -webkit-transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}
@-moz-keyframes flipInX {
    0% {
        -moz-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
    
    40% {
        -moz-transform: perspective(400px) rotateX(-10deg);
    }
    
    70% {
        -moz-transform: perspective(400px) rotateX(10deg);
    }
    
    100% {
        -moz-transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}
@-o-keyframes flipInX {
    0% {
        -o-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
    
    40% {
        -o-transform: perspective(400px) rotateX(-10deg);
    }
    
    70% {
        -o-transform: perspective(400px) rotateX(10deg);
    }
    
    100% {
        -o-transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}
@keyframes flipInX {
    0% {
        transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
    
    40% {
        transform: perspective(400px) rotateX(-10deg);
    }
    
    70% {
        transform: perspective(400px) rotateX(10deg);
    }
    
    100% {
        transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}

.flipInX {
-webkit-backface-visibility: visible !important;
-webkit-animation-name: flipInX;
-moz-backface-visibility: visible !important;
-moz-animation-name: flipInX;
-o-backface-visibility: visible !important;
-o-animation-name: flipInX;
backface-visibility: visible !important;
animation-name: flipInX;
}
</style>
<div id="portfolio">
<ul class="portfolio-grid">
<li class="blue">
<a href="#" class="animated flipInX">
<h3>Blue</h3>
</a>
</li>
<li class="red">
<a href="#" class="animated flipInX">
<h3>Red</h3>
</a>
</li>
<li class="orange">
<a href="#" class="animated flipInX">
<h3>Orange</h3>
</a>
</li>
<li class="black">
<a href="#" class="animated flipInX">
<h3>Black</h3>
</a>
</li>

</ul>

</div>