[CSS] 양쪽 이미지 opacity처리하는 슬라이드

위이미지와같이 양쪽 opacity가 깔리고 그 아래로 슬라이드가 보여지는 디자인 작업시 마크업과 css

슬라이드 마다 다르겠지만 swiper의 경우 슬라이드를 감싸는 div에 overflow:hidden이 걸려있어 양쪽이 안보임.

그럴 경우 overflow:inherit !important; 로 대체했다.

HTML

CSS

.banner_wrap{width:100%;height:530px;margin-top:45px;}
.banner_wrap .banner{position:relative;font-size:0;width:1120px;margin:0 auto;height:530px;overflow:inherit}
.banner_wrap .banner .banner_slider{position:relative;width:1120px;height:460px;margin:0 auto;font-size:30px;}
.banner_wrap .banner a{display:block;}
.banner_wrap .shadow{position:absolute;top:0;width:100%;height:460px;background:rgba(0,0,0,0.7);z-index:1;}
.banner_wrap .left.shadow{right:0;margin-right:1120px;}
.banner_wrap .right.shadow{left:0;margin-left:1120px;}