Posted on

002.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>
	.box{
     background-color: #774691;
     font-family: 'Hind', sans-serif;
     overflow: hidden;
     position: relative;
 }
 .box img{
     width: 100%;
     height: auto;
     transition: all 0.5s ease 0s;
 }
 .box:hover img{
     opacity: 0.5;
     filter: blur(2px);
 }
 .box .box-content{
     color: #fff;
     background-color: rgba(0,105,233,0.8);
     padding: 15px 30px 10px;
     border-radius: 30px 30px 30px 0;
     box-shadow: 0 0 5px rgba(0,0,0,0.7), 0 0 0 10px #fff;
     opacity: 0;
     transform-origin: left bottom;
     transform: scale(0);
     position: absolute;
     bottom: 10px;
     left: 10px;
     z-index: 2;
     transition: all 0.5s ease 0s;
 }
 .box:hover .box-content{
     opacity: 1;
     transform: scale(1);
 }
 .box .title{
     font-size: 20px;
     font-weight: 600;
     letter-spacing: 0.5px;
     text-transform: uppercase;
     margin: 0;
 }
 .box .post{
     font-size: 16px;
     font-style: italic;
     text-transform: capitalize;
     display: block;
 }
 .box .icon{
     padding: 0;
     margin: 0;
     list-style: none;
     opacity: 0;
     transform: scaleY(0);
     position: absolute;
     right: 10px;
     top: 10px;
     z-index: 1;
     transition: all 0.5s ease 0s;
 }
 .box:hover .icon{
     opacity: 1;
     transform: scaleY(1);
 }
 .box .icon li a{
     color: #000;
     background-color: #fff;
     font-size: 15px;
     text-align: center;
     line-height: 38px;
     height: 35px;
     width: 35px;
     margin: 5px 0;
     border-radius: 50%;
     display: block;
     transition: all 0.3s ease 0s;
 }
 .box .icon li a:hover{
     color: #fff;
     background: rgb(0,105,233);
 }
 @media only screen and (max-width:990px){
     .box{ margin: 0 0 30px; }
 }