Использование CSS для анимации изображения в поле

Question

Я пытаюсь анимировать изображение при зависании.

Изображение должно постоянно находиться в пределах коробки. Он должен иметь небольшую непрозрачность. Когда изображение зависнет, оно будет увеличено, а непрозрачность будет увеличена до 1, всего за короткое время 0,3 с вместо всех одновременно.

CSS-я написал это:

.t_box { 
    width: 250px; 
    height: 160px; 
    background-color: #ccc; 
    border: 5px solid #FF0000; 
    position: relative; 
    z-index: 40; 
} 

.t_box img { 
    max-height: 100%; 
    max-width: 100%; 
    opacity: 0.6; 
    transition: opacity 0.3s ease-in-out; 
    -moz-transition: opacity 0.3s ease-in-out; 
    -webkit-transition: opacity 0.3s ease-in-out; 
    -o-transition: opacity 0.3s ease-in-out; 
} 

.t_box img:hover { 
    opacity: 1; 
    -ms-transform: scale(1.5); /* IE 9 */ 
    -webkit-transform: scale(1.5); /* Chrome, Safari, Opera */ 
    transform: scale(1.5); 

    transition: opacity 0.3s ease-in-out; 
    -moz-transition: opacity 0.3s ease-in-out; 
    -webkit-transition: opacity 0.3s ease-in-out; 
    -o-transition: opacity 0.3s ease-in-out; 
} 

Как теперь, непрозрачности исчезает в/на 0,3 секунды, но масштаб изображения все сразу и не оставаться в рамках обернутая коробка.

Вот скрипка: http://jsfiddle.net/uungtt8q/

Answer 1

Вам нужно всего лишь правила перехода на нормальное состояние изображения, а не как на нормальное состояние и состояние парения:

.t_box img { 
    max-width: 100%; 
    opacity: 0.6; 
    transition: all 0.3s ease-in-out; 
    -moz-transition: all 0.3s ease-in-out; 
    -webkit-transition: all 0.3s ease-in-out; 
    -o-transition: all 0.3s ease-in-out;vertical-align:bottom 
} 
.t_box img:hover { 
    opacity: 1; 
    -ms-transform: scale(1.5); 
    /* IE 9 */ 
    -webkit-transform: scale(1.5); 
    /* Chrome, Safari, Opera */ 
    transform: scale(1.5); 
} 

jsFiddle example

Чтобы скрыть изображение от выхода из родительского div, просто добавьте overflow: hidden в раздел:

.t_box { 
    width: 250px; 
    background-color: #ccc; 
    border: 5px solid #FF0000; 
    position: relative; 
    z-index: 40; 
    overflow:hidden; 
}