004.Hover Effects


Tags:
ambbhanadi

Ambbhanadi

Web designer

ambbhanadi

Web designer

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{
     font-family: 'Hind', sans-serif;
     overflow: hidden;
     position: relative;
 }
 .box:before{
     content: '';
     background: linear-gradient(to right, transparent, #192a56);
     opacity: 0;
     position: absolute;
     left: 0;
     top: 0;
     bottom: 0;
     right: 0;
     z-index: 1;
     transition: all 0.25s ease-in;
 }
 .box:hover:before{
     opacity: 0.7;
     right: 40px;
 }
 .box img{
     width: 100%;
     height: auto;
     transition: all 0.25s ease-in;
 }
 .box:hover img{ transform: translateX(-40px); }
 .box .box-content{
     color: #fff;
     text-align: right;
     opacity: 0;
     position: absolute;
     bottom: 10px;
     right: 10px;
     z-index: 2;
     transition: all 0.25s ease-in;
 }
 .box:hover .box-content{
     opacity: 1;
     transform: translateX(-50px);
 }
 .box .title{
     font-size: 22px;
     font-weight: 700;
     text-transform: uppercase;
     margin: 0;
 }
 .box .post{
     font-size: 16px;
     font-style: italic;
     text-transform: capitalize;
     letter-spacing: 1px;
     display: block;
 }
 .box .icon{
     padding: 0;
     margin: 0;
     list-style: none;
     opacity: 0;
     transform: translateY(-50%);
     position: absolute;
     top: 50%;
     right: 0;
     transition: all 0.25s ease-in;
 }
 .box:hover .icon{ opacity: 1; }
 .box .icon li{ margin: 5px 0; }
 .box .icon li a{
     color: #192a56;
     background-color: transparent;
     font-size: 15px;
     text-align: center;
     line-height: 40px;
     height: 37px;
     width: 40px;
     display: block;
     transition: all 0.3s;
 }
 .box .icon li a:hover{
     color: #fff;
     background: #192a56;
 }
 @media only screen and (max-width:990px){
     .box{ margin: 0 0 30px; }
 }