003.Hover Effects


Tags:
ambbhanadi

Ambbahanadi

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="images/img-1.jpg">
                <div class="box-content">
                    <h3 class="title">Williamson</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="images/img-2.jpg">
                <div class="box-content">
                    <h3 class="title">Miranda Roy</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(#fe8c00, #f83600);
     opacity: 0;
     position: absolute;
     left: 0;
     top: 0;
     bottom: 0;
     right: 0;
     z-index: 1;
     transition: all 0.3s ease 0s;
 }
 .box:hover:before{
     opacity: 0.9;
     right: 12px;
     left: 12px;
     top: 12px;
     bottom: 12px;
 }
 .box img{
     width: 100%;
     height: auto;
     transform: scale(1.1);
     transition: all 0.3s ease 0s;
 }
 .box:hover img{
     filter: grayscale(70%);
     transform: scale(1);
 }
 .box .box-content{
     color: #fff;
     text-align: center;
     width: 100%;
     opacity: 0;
     transform: translateX(-50%);
     position: absolute;
     bottom: -30px;
     left: 50%;
     z-index: 2;
     transition: all 0.3s ease 0s;
 }
 .box:hover .box-content{
     opacity: 1;
     bottom: 20px;
 }
 .box .title{
     font-size: 25px;
     font-weight: 400;
     letter-spacing: 0.5px;
     text-transform: uppercase;
     margin: 0;
 }
 .box .post{
     font-size: 16px;
     text-transform: lowercase;
     letter-spacing: 1px;
     display: block;
 }
 .box .icon{
     padding: 0;
     margin: 0;
     list-style: none;
     opacity: 0;
     transform: translateX(-50%);
     position: absolute;
     left: 50%;
     top: 25px;
     z-index: 1;
     transition: all 0.25s ease-in;
 }
 .box:hover .icon{ opacity: 1; }
 .box .icon li{
     margin: 0 15px;
     display: inline-block;
     transition: all 0.3s ease 0s;
 }
 .box:hover .icon li{ margin: 0 2px; }
 .box .icon li a{
     color: #f83600;
     background-color: #fff;
     font-size: 15px;
     text-align: center;
     line-height: 38px;
     height: 35px;
     width: 35px;
     border-radius: 50%;
     display: block;
     transition: all 0.3s ease 0s;
 }
 .box .icon li a:hover{
     color: #fff;
     background: #f83600;
     box-shadow: 0 0 10px -3px rgba(0,0,0,0.7);
 }
 @media only screen and (max-width:990px){
     .box{ margin: 0 0 30px; }
 }