교육/카페24 소스
카페24 메인페이지 중분류 상품 롤오버시 천천히 반투명 이미지 넣기
매일매일 여러가지 이유로 좋은 날
2019. 6. 25. 17:08
반응형
각 상품분류 예를 들어
<!--@css(/css/module/product/2969/listmain_3.css)-->
링크로 들어가서
img에는 opacity 부분을 더하고 아래 hover를 예시처럼 추가해준다.
.xans-product-3 img { vertical-align:middle; opacity: 1; filter: alpha(opacity=100); transition:0.3s; }
.xans-product-3 img:hover { opacity: 0.3; filter: alpha(opacity=30); transition:0.3s;}
흰색으로 뿌옇게 만들고 싶다면 아래와 같이
.Item .ImgBox::after {
content:"";
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
background:#ffffff;
opacity:0;
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
transition: opacity 0.3s, transform 0.3s;
}
.Item .ImgBox:hover::after { opacity: 0.3; filter: alpha(opacity=30); transition:0.3s;}
반응형