카페24 메인페이지 중분류 상품 롤오버시 천천히 반투명 이미지 넣기

 

 

각 상품분류 예를 들어

<!--@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;}