hover effect style : demo 1

web design

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sagittis porta ante.

web design

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sagittis porta ante.

web design

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sagittis porta ante.

web design

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sagittis porta ante.

HTML

                    

web design

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sagittis porta ante.

CSS

                    .box{
                        position: relative;
                        text-align: center;
                        color:#fff;
                    }
                    .box-img:before{
                        content: "";
                        position: absolute;
                        top:0;
                        left:0;
                        width: 100%;
                        height: 100%;
                        box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.6) inset, 0 1px 2px rgba(0, 0, 0, 0.3);
                        transition: all 0.3s ease-in-out 0s;
                    }
                    .box-img img{
                        width: 100%;
                        height: auto;
                    }
                    .content{
                        position: absolute;
                        top:0;
                        left:0;
                        width: 100%;
                        height:100%;
                        padding: 0 30px;
                        background: rgba(160, 97, 186, 0.9);
                        box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.6) inset, 0 1px 2px rgba(0, 0, 0, 0.3);
                        opacity: 0;
                        transition: all 0.8s ease-in-out 0s;
                    }
                    .content > .title{
                        font-size: 22px;
                        text-transform: uppercase;
                        margin-top: 50px;
                        padding-bottom: 15px;
                        border-bottom: 1px solid rgba(255, 255, 255, 0.5);
                    }
                    .content > .description{
                        font-size: 13px;
                    }
                    .box:hover .content{
                        opacity: 1;
                    }
                    @media only screen and (max-width: 990px){
                        .box{
                            margin-bottom: 20px;
                        }
                    }