hover effect style : demo 58

Williamson

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam provident quam quasi qui ut voluptatibus!

read more

Kristiana

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam provident quam quasi qui ut voluptatibus!

read more

Steve Thomas

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam provident quam quasi qui ut voluptatibus!

read more

HTML

                        

Williamson

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam provident quam quasi qui ut voluptatibus!

read more

CSS

                        .box{
                            position: relative;
                            overflow: hidden;
                        }
                        .box img{
                            width: 100%;
                            height: auto;
                        }
                        .box .box-content{
                            width: 100%;
                            height: 100%;
                            position: absolute;
                            top: 0;
                            left: 0;
                            opacity: 0;
                            text-align: center;
                            transform: translateY(-100%);
                            transition: all 0.3s ease-in-out 0.3s;
                        }
                        .box:hover .box-content{
                            transform: translateY(0);
                            opacity: 1;
                        }
                        .box .content{
                            width: 100%;
                            height: 100%;
                            background: rgba(0, 0, 0, 0.6);
                            box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.3) inset;
                            padding: 22% 10%;
                            transform: scale(0.4,0.4);
                            transition: all 0.35s ease-in-out 0.6s;
                        }
                        .box:hover .content{
                            transform: scale(1,1);
                        }
                        .box .title{
                            font-size: 18px;
                            font-weight: bold;
                            color: #fff;
                            text-transform: uppercase;
                        }
                        .box .title:after{
                            content: "";
                            display: block;
                            width: 50%;
                            border-bottom: 1px solid #fff;
                            margin: 10px auto;
                        }
                        .box .description{
                            font-size: 14px;
                            color: #fff;
                            line-height: 25px;
                        }
                        .box .read{
                            font-size: 14px;
                            color: #fff;
                            border: 1px solid #fff;
                            text-transform: capitalize;
                            padding: 10px 15px;
                            display: inline-block;
                            border-radius:  20px 0 20px 0;
                            transition: all 0.4s ease 0s;
                        }
                        .box .read:hover{
                            text-decoration: none;
                            border-radius: 0 20px 0 20px;
                        }
                        @media screen and (max-width:990px){
                            .box{ margin-bottom:20px; }
                        }
                        @media screen and (max-width:360px){
                            .box .content{ padding: 15% 10%; }
                        }
                    
License Terms