hover effect style : demo 33

HTML

                        

CSS

                        .box{
                            overflow: hidden;
                            position: relative;
                            box-shadow:0 0 5px #bebebe;
                        }
                        .box img{
                            width:100%;
                            height:auto;
                        }
                        .box .social-links{
                            position:absolute;
                            top:-100%;
                            right:0;
                            height: 100%;
                            margin:0;
                            padding: 5px;
                            background:#2e2e2e;
                            transition: top 0.50s linear 0s;
                        }
                        .box:hover .social-links{
                            top:0px;
                        }
                        .box .social-links li{
                            list-style: none;
                            margin-bottom: 10px;
                        }
                        .box .social-links li:last-child{
                            margin-bottom: 0;
                        }
                        .box .social-links li a{
                            color:#fff;
                            background:#000;
                            font-size:21px;
                            display: block;
                            padding:12px;
                            text-align: center;
                        }
                        .box .social-links li a.fa-facebook:hover{
                            background:#3b5998;
                        }
                        .box .social-links li a.fa-google:hover{
                            background:#942e32;
                        }
                        .box .social-links li a.fa-twitter:hover{
                            background:#3B88C3;
                        }
                        .box .social-links li a.fa-instagram:hover{
                            background:#007bb6;
                        }
                        @media only screen and (max-width:990px) {
                            .box{ margin-bottom:20px; }
                            .box .social-links li a{ padding:10px; }
                        }
                        @media only screen and (max-width:479px) {
                            .box .social-links li a{ font-size: 15px; }
                        }
                    
License Terms