hover effect style : demo 12

Lorem ipsum dolor

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

Vestibulum vel arcu

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

web designing

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

HTML

                        

Lorem ipsum dolor

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

CSS

                        .box{
                            position:relative;
                            overflow: hidden;
                        }
                        .box .box-img img{
                            width:100%;
                            height:auto;
                            border-radius:50%;
                            transform:rotate(0deg);
                            transition:transform 0.30s ease;
                        }
                        .box:hover .box-img img{
                            transform:rotate(90deg);
                        }
                        .box .content{
                            position:absolute;
                            top:100%;
                            width: 100%;
                            height: 100%;
                            border-radius:50%;
                            color:#fff;
                            text-align:center;
                            padding: 28% 3%;
                            background:rgba(64, 212, 126,0.6);
                            transition:all 0.5s ease 0s;
                        }
                        .box:hover .content{
                            top:0;
                        }
                        .box .title{
                            margin-bottom:5%;
                            text-transform:uppercase;
                        }
                        .box .description{
                            font-size: 14px;
                        }
                        @media only screen and (max-width: 990px) {
                            .box{
                                margin-bottom:20px;
                            }
                        }
                    
License Terms