2014-06-12 2 views
0

내 포트폴리오의 일부 이미지가 '희미한'상태로 표시되고 마우스를 100 % 불투명도로 가리키고 싶습니다.이미지 전환 효과가 작동하지 않음

나는 CSS가 제대로 작동한다고 생각했지만 이미지가 희미한 것처럼 보일 뿐이지 만 아무 것도 떠오르지 않으면 아무 일도 일어나지 않습니다.

미리 도움을 주셔서 감사합니다.

MY HTML :

<div class="portfolioimages"><div class="images-responsive"> 
     <img src="images/portfolio/brand/platinum-logo.jpg" /><img src="images/portfolio/brand/platinum-stationery.jpg" /> 
     <img src="images/portfolio/brand/speed-trades-stationery.jpg" /><img src="images/portfolio/brand/speed-trades-logo.jpg" /> 
     <img src="images/portfolio/brand/crumbs-cupcakes-logo.jpg" /><img src="images/portfolio/brand/crumbs-cupcakes-stationery.jpg" /> 
     <img src="images/portfolio/brand/adam-and-gaskell-stationery.jpg" /><img src="images/portfolio/brand/adam-and-gaskell-logo.jpg" /> 
     <img src="images/portfolio/brand/es-logo.jpg" /><img src="images/portfolio/brand/es-stationery.jpg" /> 
     </div></div> 

내 CSS :

.images-responsive { 
    cursor:pointer; 
    opacity:0.7; 
    transition:0.5s; 
    -webkit-transition:0.5s; 
    -moz-transition:0.5s; 
    -o-transition:0.5s; 
} 

.images-responsive: hover { 
    opacity:1; 
    transition:0.5s; 
    -webkit-transition:0.5s; 
    -moz-transition:0.5s; 
    -o-transition:0.5s; 
} 
+0

도 필터 추가 알파 (불투명도 = 100);/* IE8 및 그 이전 버전 */ –

답변

0

div에 이미지에만 CSS를 적용하고 있지 않습니다. 있어야

.images-responsive img { 
cursor:pointer; 
opacity:0.7; 
transition:0.5s; 
-webkit-transition:0.5s; 
-moz-transition:0.5s; 
-o-transition:0.5s; 

}

.images-responsive img: hover { 
opacity:1; 
transition:0.5s; 
-webkit-transition:0.5s; 
-moz-transition:0.5s; 
-o-transition:0.5s; 

}

2

여기 hover 앞에 공간을 제거

.images-responsive: hover { 

당신은 공백없이이 필요합니다

.images-responsive:hover { 

Here's a kitten to demonstrate.

+0

+1 새끼 고양이를 위해서 .. :) –

관련 문제