.featured_works{ background: url("../images/protfolio_bg.jpg") no-repeat fixed; background-position: center; text-align: center; position: relative; z-index: 1; padding-bottom: 100px; &:after{ content: ""; position: absolute; top: 0; background-color: rgba(0, 0, 0, .9); left: 0; right: 0; bottom: 0; display: block; z-index: -1; } display: block; overflow: hidden; padding-bottom: 100px; .tittle{ h2{ color: #fff; } h4{ color: #fefefe; } } .featured_gallery{ padding-top: 60px; .gallery_iner{ position: relative; overflow: hidden; img{ max-width: 100%; } &:after{ content: ""; position: absolute; background-color: rgba(248, 184, 29, .70); display: block; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; opacity: 0; @include transition; } .gallery_hover{ position: absolute; top: 45%; left: 0; transform: translateY(-50%); right: 0; text-align: center; z-index: 2; h4{ color: #fff; font: 700 14px $roboto; text-transform: uppercase; padding-bottom: 18px; position: relative; right: -100%; @include transition; } a{ width: 122px; font: 400 18px/35px $roboto; text-align: center; display: block; border-radius: 10px; background: #333333; color: #fff; position: relative; left: -100%; @include transition; text-transform: uppercase; margin: 0 auto; &:hover, &:focus{ background: #fff; color: $bc; } } } &:hover, &:focus{ &:after{ opacity: 1; } .gallery_hover{ h4{ right: 0; } a{ left: 0; } } } } } }