hover effect style : demo 100

willimson

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam condimentum sagittis nibh eu ullamcorper. Fusce.

read more

Kristiana

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam condimentum sagittis nibh eu ullamcorper. Fusce.

read more

Steve Thomas

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam condimentum sagittis nibh eu ullamcorper. Fusce.

read more

HTML

                        

willimson

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam condimentum sagittis nibh eu ullamcorper. Fusce.

read more

Kristiana

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam condimentum sagittis nibh eu ullamcorper. Fusce.

read more

CSS

                        .box{
                            text-align: center;
                            overflow: hidden;
                            position: relative;
                        }
                        .box img{
                            width: 100%;
                            height: auto;
                        }
                        .box .box-layer{
                            width: 180px;
                            height: 120px;
                            background: rgba(44, 150, 117, 0.8);
                            margin: 0 auto;
                            position: absolute;
                            top: 35%;
                            left: 0;
                            right: 0;
                            -moz-transition: transform 0.2s linear 0s, opacity 0.2s linear 0.35s;
                            -webkit-transition: transform 0.2s linear 0s, opacity 0.2s linear 0.35s;
                            -o-transition: transform 0.2s linear 0s, opacity 0.2s linear 0.35s;
                            -ms-transition: transform 0.2s linear 0s, opacity 0.2s linear 0.35s;
                            transition: transform 0.2s linear 0s, opacity 0.2s linear 0.35s;
                        }
                        .box:hover .box-layer{
                            -moz-transform: scale(5);
                            -ms-transform: scale(5);
                            -o-transform: scale(5);
                            -webkit-transform: scale(5);
                            transform: scale(5);
                            opacity: 0;
                            -webkit-transition-delay: 0.55s;
                            -moz-transition-delay: 0.55s;
                            -o-transition-delay: 0.55s;
                            -ms-transition-delay: 0.55s;
                            transition-delay: 0.55s;
                        }
                        .box .box-circle{
                            width: 82px;
                            height: 82px;
                            margin: auto;
                            position: relative;
                            top: 19px;
                            -moz-transition: transform 0.4s linear 0s;
                            -ms-transition: transform 0.4s linear 0s;
                            -webkit-transition: transform 0.4s linear 0s;
                            -o-transition: transform 0.4s linear 0s;
                            transition: transform 0.4s linear 0s;
                        }
                        .box:hover .box-circle{
                            -moz-transform: rotate(360deg);
                            -ms-transform: rotate(360deg);
                            -o-transform: rotate(360deg);
                            -webkit-transform: rotate(360deg);
                            transform: rotate(360deg);
                        }
                        .box .layer{
                            width: 80px;
                            height: 80px;
                            border-radius: 50%;
                            background: transparent;
                            position: absolute;
                            top: 0;
                            left: 0;
                        }
                        .box:hover .layer{
                            -webkit-border-radius: 0px;
                            border-radius: 0px;
                        }
                        .box .left-layer{
                            border-left: 2px solid #fff;
                            -o-transition: all 0.15s linear 0.3s;
                            -ms-transition: all 0.15s linear 0.3s;
                            -moz-transition: all 0.15s linear 0.3s;
                            -webkit-transition: all 0.15s linear 0.3s;
                            transition: all 0.15s linear 0.3s;
                        }
                        .box .top-layer{
                            width: 80px;
                            border-top: 2px solid #fff;
                            -moz-transition: all 0.15s linear 0.2s;
                            -o-transition: all 0.15s linear 0.2s;
                            -ms-transition: all 0.15s linear 0.2s;
                            -webkit-transition: all 0.15s linear 0.2s;
                            transition: all 0.15s linear 0.2s;
                        }
                        .box .right-layer{
                            border-right: 2px solid #fff;
                            -moz-transition: all 0.15s linear 0.1s;
                            -o-transition: all 0.15s linear 0.1s;
                            -ms-transition: all 0.15s linear 0.1s;
                            -webkit-transition: all 0.15s linear 0.1s;
                            transition: all 0.15s linear 0.1s;
                        }
                        .box .bottom-layer{
                            width: 80px;
                            border-bottom: 2px solid #fff;
                            -moz-transition: all 0.15s linear 0s;
                            -ms-transition: all 0.15s linear 0s;
                            -webkit-transition: all 0.15s linear 0s;
                            -o-transition: all 0.15s linear 0s;
                            transition: all 0.15s linear 0s;
                        }
                        .box .icon i{
                            position: absolute;
                            left: -2px;
                            right: 0;
                            font-size: 25px;
                            color: #fff;
                            line-height: 82px;
                        }
                        .box .box-content{
                            width: 100%;
                            height: 100%;
                            position: absolute;
                            top: 0;
                            left: 0;
                            color: #fff;
                            opacity: 0;
                            -moz-transition: all 0.2s linear 0s;
                            -ms-transition: all 0.2s linear 0s;
                            -o-transition: all 0.2s linear 0s;
                            -webkit-transition: all 0.2s linear 0s;
                            transition: all 0.2s linear 0s;
                        }
                        .box:hover .box-content{
                            opacity: 1;
                            -moz-transition-delay: 0.85s;
                            -ms-transition-delay: 0.85s;
                            -o-transition-delay: 0.85s;
                            -webkit-transition-delay: 0.85s;
                            transition-delay: 0.85s;
                        }
                        .box .title{
                            width: 80%;
                            margin: 20% auto 0;
                            background: rgba(44, 150, 117, 0.8);
                            font-size: 22px;
                            font-weight: 400;
                            text-transform: uppercase;
                            padding: 6px 0;
                            position: relative;
                        }
                        .box .title:before{
                            content: "";
                            display: block;
                            border: 20px solid transparent;
                            border-top: 20px solid rgba(44, 150, 117, 0.8);
                            position: absolute;
                            top: 100%;
                            left: 42%;
                        }
                        .box .description{
                            width: 80%;
                            font-size: 14px;
                            font-weight: 400;
                            padding: 6px 10px;
                            background: rgba(44, 150, 117, 0.8);
                            margin: 40px auto 0;
                        }
                        .box .btn{
                            display: inline-block;
                            padding: 7px 20px;
                            margin: 30px auto 0;
                            border-radius: 5px;
                            background: #80541b;
                            font-size: 15px;
                            color: #fff;
                            text-transform: capitalize;
                            box-shadow: inset 0 0 7px 1px rgba(0,0,0,0.2);
                        }
                        @media only screen and (max-width:990px){
                            .box{ margin-bottom: 30px; }
                        }
                        @media only screen and (max-width:360px){
                            .box .title{ margin: 10% auto 0; }
                        }
                    
License Terms