hover effect style : demo 47

Web Developer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur ea est expedita incidunt ipsum libero magni modi placeat quia repellat.

Web Designer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur ea est expedita incidunt ipsum libero magni modi placeat quia repellat.

Web Developer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur ea est expedita incidunt ipsum libero magni modi placeat quia repellat.

HTML

                        

Web Developer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur ea est expedita incidunt ipsum libero magni modi placeat quia repellat.

Web Designer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur ea est expedita incidunt ipsum libero magni modi placeat quia repellat.

CSS

                        .box{
                            position: relative;
                            overflow: hidden;
                        }
                        .box img{
                            width: 100%;
                            height: auto;
                            transform-origin: left center 0;
                            transform: perspective(400px) rotateY(0deg);
                            transition: all 0.5s ease 0s;
                        }
                        .box:hover img{
                            transform: perspective(400px) rotateY(90deg);
                        }
                        .box .box-content{
                            width: 100%;
                            height: 100%;
                            position: absolute;
                            top: 0;
                            background: #00b796;
                            padding: 30px 25px;
                            text-align: center;
                            transform-origin: right center 0;
                            transform: perspective(400px) rotateY(-90deg);
                            transition: all 0.5s ease 0s;
                        }
                        .box:hover .box-content{
                            transform: perspective(400px) rotateY(0deg);
                        }
                        .box .title{
                            font-size: 20px;
                            font-weight: bold;
                            color: #fff;
                            margin-bottom: 20px;
                            text-transform: capitalize;
                        }
                        .box .title:after{
                            content: "";
                            display: block;
                            margin-top: 20px;
                            border-bottom: 1px solid #fff;
                        }
                        .box .description{
                            font-size: 14px;
                            line-height: 23px;
                            color: #fff;
                        }
                        @media only screen and (max-width: 990px){
                            .box{ margin-bottom:15px; }
                        }
                        @media only screen and (max-width: 359px){
                            .box .title{ margin: 10px 0; }
                            .box .box-content{ padding: 15px; }
                        }
                    
License Terms