2016-09-08 4 views
-2

div에 스타일로 설정 한 이미지가있는 뉴스 항목이 있습니다. 내가 호버에 효과가 작동하지만 작동하지 않는 작품에 감소하도록 설정했습니다. 내가호버에서 CSS 전환이 작동하지 않습니다.

background-size: 100%; 
    -webkit-transition: all .5s ease-in-out; 
    transition: all .5s ease-in-out; 

에서 그리고에 추가 한 DIV 클래스에서

: 나는 여기
background-size: 110% !important; 

을 추가 한 호버는 https://jsfiddle.net/atzgL43v/3/

이상한 것은이에 있음을하는 바이올린입니다 divs 스타일을

style="background-size: cover; background: url('http://i.imgur.com/ppEjVyF.jpg'); 

하지만 표지에 스타일이 적용되지 않으며 중요하지 않으면 이미지의 크기가 조정되지 않습니다. 이것이 작동하지 않는 이유를 모릅니다.

+0

인라인 스타일은'! important'를 사용해서 만 덮어 쓸 수 있습니다 – pwolaq

답변

0

내가 아는 한 백그라운드 크기 속성은 전환에 지원되지 않습니다. 다음으로 가져 :

내가 가지고 해결 방법은 모든 배경 크기의 속성을 제거하고 설정 얻을했다 here

+1

latable'cover.'를 사용하면 애니메이션 가능하지만 그렇지 않습니다 –

+0

멋진 정보! 나는 매일 더 많이 배웁니다 :-) – asimovwasright

1

참조하십시오.

.news-tile-img-post:hover { 
    -ms-transform: scale(1.1); /* IE 9 */ 
    -webkit-transform: scale(1.1); /* Safari */ 
    transform: scale(1.1); /* Standard syntax */ 
} 

이렇게하면 전환이 작동하고 CSS에서! important를 사용할 필요가 없습니다.

관련 문제