hover effect style : demo 79

Williamson

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem corporis eos fugit incidunt libero minima minus repellendus tempora. Aspernatur, nisi!

Read More

Kristiana

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem corporis eos fugit incidunt libero minima minus repellendus tempora. Aspernatur, nisi!

Read More

Steve Thomas

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem corporis eos fugit incidunt libero minima minus repellendus tempora. Aspernatur, nisi!

Read More

HTML

                        

Williamson

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem corporis eos fugit incidunt libero minima minus repellendus tempora. Aspernatur, nisi!

Read More

Kristiana

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem corporis eos fugit incidunt libero minima minus repellendus tempora. Aspernatur, nisi!

Read More

CSS

                        .box{
                            background: #0c0119;
                            box-shadow: 1px 1px 2px #e6e6e6;
                            text-align: center;
                            overflow: hidden;
                            position: relative;
                        }
                        .box img{
                            width: 100%;
                            height: auto;
                            transition: all 0.4s ease-in-out 0.2s;
                        }
                        .box:hover img{
                            opacity: 0;
                            transform: rotate(720deg) scale(0);
                        }
                        .box .box-content{
                            width: 100%;
                            height: 100%;
                            position: absolute;
                            top: 0;
                            left: 0;
                            background-color: rgba(238, 195, 180,0.7);
                            opacity: 0;
                            overflow: hidden;
                            transform: rotate(0deg) scale(1);
                            transition: all 0.3s ease-out 0s;
                        }
                        .box:hover .box-content{
                            opacity: 1;
                            transform: translateY(0px) rotate(0deg);
                            transition-delay: 0.4s;
                        }
                        .box .title{
                            font-size: 20px;
                            font-weight: 700;
                            color: #fff;
                            background: rgba(0, 0, 0, 0.8);
                            margin: 30px 0 0;
                            padding: 10px;
                            transform: translateY(-200px);
                            transition: all 0.2s ease-in-out 0s;
                        }
                        .box:hover .title{
                            transform: translateY(0px);
                            transition-delay: 0.7s;
                        }
                        .box .description{
                            font-size: 12px;
                            font-style: italic;
                            color: #fff;
                            padding: 20px 20px 30px;
                            transform: translateY(-200px);
                            transition: all 0.2s ease-in-out 0s;
                        }
                        .box:hover .description{
                            transform: translateY(0px);
                            transition-delay: 0.6s;
                        }
                        .box .read{
                            display: inline-block;
                            font-size: 14px;
                            color: #fff;
                            background: #000;
                            box-shadow: 0 0 1px #000;
                            padding: 7px 14px;
                            transform: translateY(-200px);
                            transition: all 0.2s ease-in-out 0s;
                        }
                        .box:hover .read{
                            transform: translateY(0px);
                            transition-delay: 0.5s;
                        }
                        @media only screen and (max-width: 990px){
                            .box{ margin-bottom: 30px; }
                        }
                        @media only screen and (max-width: 480px){
                            .box .description{ padding: 20px; }
                        }
                        @media only screen and (max-width: 360px){
                            .box .title{ margin: 10px 0 0; }
                            .box .description{ padding: 10px 10px; }
                        }
                    
License Terms