hover effect style : demo 109

willimson

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mattis augue in odio suscipit, at.

read more

Kristiana

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mattis augue in odio suscipit, at.

read more

Steve Thomas

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mattis augue in odio suscipit, at.

read more

HTML

                        

willimson

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mattis augue in odio suscipit, at.

read more

Kristiana

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mattis augue in odio suscipit, at.

read more

CSS

                        .box{
                            text-align: center;
                            box-shadow: 0 0 5px #7e7d7d;
                            overflow: hidden;
                            position: relative;
                        }
                        .box img{
                            width: 100%;
                            height: auto;
                        }
                        .box .box-layer{
                            position: absolute;
                            top: 0;
                            left: 0;
                            bottom: 0;
                            right: 0;
                            -o-transition: all 0.3s linear 0.3s;
                            -moz-transition: all 0.3s linear 0.3s;
                            -ms-transition: all 0.3s linear 0.3s;
                            -webkit-transition: all 0.3s linear 0.3s;
                            transition: all 0.3s linear 0.3s;
                        }
                        .box:hover .box-layer{
                            box-shadow: inset 0 0 25px 250px rgba(35,31,31,0.7);
                        }
                        .box .box-content{
                            width: 100%;
                            height: 100%;
                            background: transparent;
                            padding-top: 25px;
                            color: #fff;
                            position: absolute;
                            top: 0;
                            left: 0;
                            opacity: 0;
                            -webkit-transform: rotate(180deg);
                            -moz-transform: rotate(180deg);
                            -o-transform: rotate(180deg);
                            -ms-transform: rotate(180deg);
                            transform: rotate(180deg);
                            -o-transition: all 0.3s linear 0s;
                            -moz-transition: all 0.3s linear 0s;
                            -ms-transition: all 0.3s linear 0s;
                            -webkit-transition: all 0.3s linear 0s;
                            transition: all 0.3s linear 0s;
                        }
                        .box:hover .box-content{
                            opacity: 1;
                            -webkit-transform: rotate(0deg);
                            -moz-transform: rotate(0deg);
                            -o-transform: rotate(0deg);
                            -ms-transform: rotate(0deg);
                            transform: rotate(0deg);
                            -moz-transition-delay: 0.5s;
                            -webkit-transition-delay: 0.5s;
                            -o-transition-delay: 0.5s;
                            -ms-transition-delay: 0.5s;
                            transition-delay: 0.5s;
                        }
                        .box .title{
                            font-size: 21px;
                            font-weight: 700;
                            text-transform: uppercase;
                            border-bottom: 1px solid #fff;
                            padding-bottom: 20px;
                            margin-top: 20px;
                        }
                        .box .description{
                            font-size: 14px;
                            font-style: italic;
                            padding: 0 10px;
                            margin: 15px 0;
                        }
                        .box .read-more{
                            display: block;
                            width: 120px;
                            padding: 10px 0;
                            background: #e44242;
                            border-radius: 5px;
                            font-size: 14px;
                            color: #fff;
                            text-transform: capitalize;
                            margin: 0 auto;
                            transition: all 0.3s ease 0s;
                        }
                        .box .read-more:hover{
                            background: #c62020;
                        }
                        @media only screen and (max-width:990px){
                            .box{ margin-bottom: 30px; }
                        }
                        @media only screen and (max-width:479px){
                            .box .box-content{ padding-top: 0; }
                        }
                        @media only screen and (max-width:360px){
                            .box .title{
                                margin-top: 10px;
                                padding-bottom: 10px;
                            }
                        }
                    
License Terms