이미지에 CSS 전환이 작동하지 않습니다.

Question

내 웹 사이트 상단에 갤러리가 있습니다. 페이지를 아래로 스크롤하면 갤러리가 더 작은 버전으로 표시됩니다.

큰 버전 :

작은 버전 :

난 당신이 300 픽셀 (갤러리 초기 높이)를 스크롤 할 때 당신이 얻을, jQuery를 함께이 만든 약 100px 높이의 작은 크기.

#gallery { 
    overflow: hidden; 
    width: 100%; 
    height: 305px; 
    white-space: nowrap; 
    vertical-align: middle; 
    display: inline-block; 
    background-color:white; 
    -webkit-transition: all ease 0.5s; 
    transition: all ease 0.5s; 
} 
#gallery img { 
    height: 300px; 
    width: auto; 
    padding: 2px; 
    vertical-align: middle; 
    -webkit-transition: all ease 0.5s; 
    transition: all ease 0.5s; 
} 

가 스크롤 된 :

초기 :

은 그 일부 전환을 설정 한 내가 탐색 화살표에 대해 동일한 코드를 가지고

#fixed_gallery { 
    overflow: hidden !important; 
    width: 100% !important; 
    white-space: nowrap !important; 
    vertical-align: middle !important; 
    display: inline-block !important; 
    position: fixed !important; 
    z-index: 53 !important; 
    height: 100px !important; 
    background-color:white; 
    -webkit-transition: all ease 0.5s; 
    transition: all ease 0.5s; 
} 

#fixed_gallery img { 
    height: 95px !important; 
    width: auto !important; 
    padding: 2px !important; 
    -webkit-transition: all ease 0.5s; 
    transition: all ease 0.5s; 
} 

그들은 스케일을 전환과 함께 .. 일종의 이것과 함께 잃어버린 : \!

이 전환을 작동 시키려면 어떻게해야합니까? 갤러리가 작은 버전으로 전환하면 멋진 전환으로 이미지가 작아지기를 바랍니다.

참조 URL : 실제로 이미지 크기를 조정하지 않기 때문에 이미지에 http://ehad.mediaheads.nl/blog/ & http://jsfiddle.net/fzjqyhcw/

Answer 1

하는 CSS 전환이 작동하지 않습니다.

시도이 같은 것을 할 수 있도록 클래스를 추가 (대신 부모의 ID 전환) :

#gallery { 
    ... 
    position: relative; 
} 

#gallery img { 
    ... 
    -webkit-transition: all ease 0.5s; 
    transition: all ease 0.5s; 
} 

#gallery.fixed-gallery { 
    .... 
    position: fixed; 
} 

#gallery.fixed-gallery img { 
    .... 
    height: 95px; 
}