001.Hover Effects


ambbhanadi

Ambbhanadi

Web designer

Ambbhanadi

Web designer

We are looking for suitable and beautiful design codes for our friends who are writing websites. If you want to use it, you can download it. I wish you all the best.
If you have a design that you really want, write a comment below.
We will post at a convenient time.

HTML

 (Icon Fonts Used : Fontawesome & CSS Framwork: Bootstrap)

<!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css /> -->
<div class="container">
    <div class="row">
        <div class="col-md-4 col-sm-6">
            <div class="box">
                <img src="https://i.ibb.co/JHF8HcK/template.jpg">
                <div class="box-content">
                    <h3 class="title">Ambbhanadi</h3>
                    <span class="post">Web designer</span>
                </div>
                <ul class="icon">
                    <li><a href="#"><i class="fa fa-search"></i></a></li>
                    <li><a href="#"><i class="fa fa-link"></i></a></li>
                </ul>
            </div>
        </div>
        <div class="col-md-4 col-sm-6">
            <div class="box">
                <img src="https://i.ibb.co/JHF8HcK/template.jpg">
                <div class="box-content">
                    <h3 class="title">Ambbhanadi</h3>
                    <span class="post">Web designer</span>
                </div>
                <ul class="icon">
                    <li><a href="#"><i class="fa fa-search"></i></a></li>
                    <li><a href="#"><i class="fa fa-link"></i></a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

CSS

.box{
     background-color: #000;
     font-family: 'Hind', sans-serif;
     overflow: hidden;
     position: relative;
 }
 .box:before{
     content: '';
     border: 1px solid #fff;
     transform: scaleY(0);
     position: absolute;
     left: 12px;
     top: 12px;
     bottom: 27px;
     right: 12px;
     z-index: 1;
     transition: all 0.5s ease 0s;
 }
 .box:hover:before{ transform: scaleY(1); }
 .box img{
     width: 100%;
     height: auto;
     transition: all 0.5s ease 0s;
 }
 .box:hover img{
     opacity: 0.2;
     transform: scale(1.1);
     transform-origin: left top;
 }
 .box .box-content{
     color: #fff;
     text-align: center;
     width: 90%;
     filter: blur(5px);
     opacity: 0;
     transform: translateX(-50%) translateY(50%);
     position: absolute;
     bottom: 50%;
     left: 50%;
     z-index: 2;
     transition: all 0.5s ease 0.2s;
 }
 .box:hover .box-content{
     filter: blur(0);
     opacity: 1;
 }
 .box .title{
     font-size: 25px;
     font-weight: 600;
     letter-spacing: 0.5px;
     text-transform: uppercase;
     margin: 0;
 }
 .box .post{
     color: #4cd137;
     font-size: 16px;
     font-style: italic;
     text-transform: capitalize;
     display: block;
 }
 .box .icon{
     padding: 0;
     margin: 0;
     list-style: none;
     opacity: 0;
     transform: translateX(-50%) scale(0);
     position: absolute;
     left: 50%;
     bottom: 10px;
     z-index: 1;
     transition: all 0.3s ease 0.3s;
 }
 .box:hover .icon{
     opacity: 1;
     transform: translateX(-50%) scale(1);
 }
 .box .icon li{
     margin: 0 3px;
     display: inline-block;
 }
 .box .icon li a{
     color: #000;
     background-color: #fff;
     font-size: 15px;
     text-align: center;
     line-height: 38px;
     height: 35px;
     width: 35px;
     display: block;
     transition: all 0.3s ease 0s;
 }
 .box .icon li a:hover{
     color: #000;
     background: #4cd137;
 }
 @media only screen and (max-width:990px){
     .box{ margin: 0 0 30px; }
 }