hover effect style : demo 37

Web designer

Lorem ipsum dolor sit amet, consectetur adipisicing elit.?Lorem ipsum dolor sit amet, consectetur adipisicing elit?

Web Developer

Lorem ipsum dolor sit amet, consectetur adipisicing elit.?Lorem ipsum dolor sit amet, consectetur adipisicing elit?

Web designer

Lorem ipsum dolor sit amet, consectetur adipisicing elit.?Lorem ipsum dolor sit amet, consectetur adipisicing elit?

HTML

                        

Web designer

Lorem ipsum dolor sit amet, consectetur adipisicing elit.?Lorem ipsum dolor sit amet, consectetur adipisicing elit?

CSS

                        .box-bg{
                            overflow: hidden;
                        }
                        .box{
                            position:relative;
                        }
                        .box .pic{
                            position: relative;
                            z-index: 1;
                            transform-origin: 95% 50% 0;
                            transition: all 0.5s ease 0s;
                        }
                        .box .pic:after{
                            content: "";
                            position: absolute;
                            top: 50%;
                            left:95%;
                            width: 8px;
                            height: 8px;
                            border-radius: 50%;
                            background: rgba(0, 0, 0, 0.8);
                            box-shadow: 0 0 1px rgba(255, 255, 255, 0.9);
                            margin: -4px 0 0 -4px;
                        }
                        .box:hover .pic{
                            transform:rotate(-140deg);
                        }
                        .box .pic img{
                            width:100%;
                            height:auto;
                            border-radius:50%;
                        }
                        .box .content{
                            position: absolute;
                            top: 0;
                            width: 100%;
                            height: 100%;
                            border-radius: 50%;
                            padding: 70px 20px;
                            background: #b9607e;
                        }
                        .box .title{
                            text-align:center;
                            margin-bottom:5%;
                            text-transform:uppercase;
                        }
                        .box .title a{
                            color:#fff;
                            transition: all 0.3s ease 0s;
                        }
                        .box .title a:hover{
                            color:#333;
                        }
                        .box .description{
                            color:#fff;
                            text-align:center;
                            text-transform:uppercase;
                        }
                        @media only screen and (max-width: 990px) {
                            .box{
                                margin-bottom:20px;
                            }
                        }
                    
License Terms