hover effect style : demo 50

Williamson

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae libero orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sed vestibulum.

Miranda joy

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae libero orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sed vestibulum.

Steve Thomas

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae libero orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sed vestibulum.

HTML

                        

Williamson

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae libero orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sed vestibulum.

CSS

                        .box{
                            position: relative;
                            perspective: 1000px;
                        }
                        .box .box-img{
                            transform: rotateY(0);
                            transition: all 0.50s ease-in-out 0s;
                        }
                        .box:hover .box-img{
                            transform: rotateY(-90deg);
                        }
                        .box .box-img img{
                            width: 100%;
                            height: auto;
                        }
                        .box .box-content{
                            width: 100%;
                            height: 100%;
                            position: absolute;
                            top: 0;
                            left: 0;
                            padding: 60px 20px;
                            text-align: center;
                            background: rgba(0,0,0,0.7);
                            transform: rotateY(90deg);
                            transition: all 0.50s ease-in-out 0s;
                        }
                        .box:hover .box-content{
                            transform: rotateY(0);
                        }
                        .box .title{
                            font-size: 20px;
                            color: #fff;
                            text-transform: uppercase;
                        }
                        .box .description{
                            font-size: 14px;
                            line-height: 24px;
                            color: #fff;
                        }
                        .box .title:after,
                        .box .description:after{
                            content: "";
                            width: 80%;
                            display: block;
                            border-bottom: 1px solid #fff;
                            margin: 15px auto;
                        }
                        .box .social-links{
                            margin: 0;
                            padding: 0;
                            list-style: none;
                        }
                        .box .social-links li{
                            display: inline-block;
                            margin: 0 10px;
                        }
                        .box .social-links li a{
                            font-size: 20px;
                            color: #a6a6a6;
                        }
                        .box .social-links li a:hover{
                            text-decoration: none;
                            color: #fff;
                        }
                        @media only screen and (max-width: 990px) {
                            .box{  margin-bottom:20px; }
                        }
                        @media only screen and (max-width: 479px) {
                            .box .box-content{ padding: 20px; }
                        }
                    
License Terms