005.Hover Effects

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="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{
     background: linear-gradient(#474787,#6f6faa);
     font-family: 'Hind', sans-serif;
     overflow: hidden;
     position: relative;
 }
 .box img{
     width: 100%;
     height: auto;
     transition: all 0.4s ease-in-out;
 }
 .box:hover img{
     opacity: 0;
     transform: perspective(700px) rotateX(180deg);
 }
 .box .box-content{
     color: #fff;
     text-align: center;
     width: 100%;
     padding: 0 10px;
     transform: translateY(50%);
     position: absolute;
     bottom: 50%;
     left: 0;
     transition: all 0.45s ease 0s;
 }
 .box .title{
     background-color: rgba(255,255,255,0.3);
     font-size: 25px;
     font-weight: 700;
     text-transform: uppercase;
     padding: 6px 5px 1px;
     margin: 0 0 7px;
     opacity: 0;
     transform: translateY(15px);
     transition: all 0.25s linear;
 }
 .box .post{
     background-color: rgba(255,255,255,0.3);
     font-size: 16px;
     font-weight: 400;
     text-transform: capitalize;
     letter-spacing: 0.5px;
     padding: 1px 10px 0;
     display: inline-block;
     opacity: 0;
     transform: translateY(-15px);
     transition: all 0.25s linear;
 }
 .box:hover .title,
 .box:hover .post{
     opacity: 1;
     transform: translateY(0);
 }
 .box .icon{
     padding: 0;
     margin: 0;
     list-style: none;
     opacity: 0;
     transform: translateX(-50%);
     position: absolute;
     bottom: 10px;
     left: 50%;
     transition: all 0.25s linear;
 }
 .box:hover .icon{ opacity: 1; }
 .box .icon li{
     margin: 0 2px;
     display: inline-block;
 }
 .box .icon li a{
     color: #555;
     background: #fff;
     font-size: 16px;
     text-align: center;
     line-height: 40px;
     height: 38px;
     width: 38px;
     border-radius: 50%;
     display: block;
     transition: all 0.3s ease-in-out;
 }
 .box .icon li a:hover{ text-shadow: 3px 3px 1px rgba(0, 0, 0, 0.4); }
 @media only screen and (max-width:990px){
     .box{ margin: 0 0 30px; }
 }