Не пойму transition

[vasya_pupok]

Здарова всем.

Написал вот такой вот кодик:

<!--Начало блока-->

                            <div class="item-block">

                                <div class="item-block-img">

                                    <a href="">

                                        <img src="https://www.vivatao.com/taoimages/img04/bao/uploaded/i4/T1a7tSXuhbXXXXXXXX_!!0-item_pic.jpg_200x200.jpg" alt="">

                                    </a>

                                </div>

                                <div class="item-block-title">

                                    <a href="">фыв</a>

                                </div> 

                                <div class="item-block-price">

                                    <a href="">55 268 дол</a>

                                </div>

                                <div class="item-block-price2">

                                    <a href="">Перейти к товару</a>

                                </div>

                            </div>

                            <!--Конец блока-->

у него вот такой вот css

[CSS].item-block {

    overflow: hidden;

    float: left;

    width: 23%;

    border: 1px solid #C9CBCD;

    padding: 5px;

    margin: 0 2% 2% 0;

}

 

.item-block:hover {

    border: 1px solid #c0392b;

}

 

.item-block-img {

    overflow: hidden;

}

 

.item-block-img img {

    width: 100%;

    height: 150px;

}

 

.item-block-title {

    text-align: center;

    margin: 2px 0;

    height: 40px;

}

 

.item-block-title a {

    text-decoration: underline;

    display: block;

    color: #3d74aa;

}

 

.item-block:hover > .item-block-title a {

    color: #c0392b;

}

 

.item-block-desc {

    overflow: hidden;

    text-align: center;

    margin: 2px 0;

    height: 40px;

}

 

.item-block-price { 

    overflow: hidden;

}

 

.item-block-price a {

    background: #5aa8d1;

    background: -moz-linear-gradient(top,  #5aa8d1 0%, #2493c3 50%, #3d74aa 100%);

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5aa8d1), color-stop(50%,#2493c3), color-stop(100%,#3d74aa));

    background: -webkit-linear-gradient(top,  #5aa8d1 0%,#2493c3 50%,#3d74aa 100%);

    background: -o-linear-gradient(top,  #5aa8d1 0%,#2493c3 50%,#3d74aa 100%);

    background: -ms-linear-gradient(top,  #5aa8d1 0%,#2493c3 50%,#3d74aa 100%);

    background: linear-gradient(to bottom,  #5aa8d1 0%,#2493c3 50%,#3d74aa 100%);

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5aa8d1', endColorstr='#3d74aa',GradientType=0 );

    color: #fff;

    padding: 5px;

    border-bottom: 3px solid #225688;

    text-align: center;

    display: block;

}

 

.item-block-price2 { 

    overflow: hidden;

}

 

.item-block-price2 a {

    background: #5aa8d1;

    background: -moz-linear-gradient(top,  #5aa8d1 0%, #2493c3 50%, #3d74aa 100%);

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5aa8d1), color-stop(50%,#2493c3), color-stop(100%,#3d74aa));

    background: -webkit-linear-gradient(top,  #5aa8d1 0%,#2493c3 50%,#3d74aa 100%);

    background: -o-linear-gradient(top,  #5aa8d1 0%,#2493c3 50%,#3d74aa 100%);

    background: -ms-linear-gradient(top,  #5aa8d1 0%,#2493c3 50%,#3d74aa 100%);

    background: linear-gradient(to bottom,  #5aa8d1 0%,#2493c3 50%,#3d74aa 100%);

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5aa8d1', endColorstr='#3d74aa',GradientType=0 );

    color: #fff;

    padding: 5px;

    border-bottom: 3px solid #225688;

    text-align: center;

    text-decoration: none;

    display: none;

}

 

.item-block:hover > .item-block-price {

    display: none;

} 

 

.item-block:hover > .item-block-price2 a {

    background: #f68410;

    background: -moz-linear-gradient(top,  #f68410 0%, #C87827 100%);

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f68410), color-stop(100%,#C87827));

    background: -webkit-linear-gradient(top,  #f68410 0%,#C87827 100%);

    background: -o-linear-gradient(top,  #f68410 0%,#C87827 100%);

    background: -ms-linear-gradient(top,  #f68410 0%,#C87827 100%);

    background: linear-gradient(to bottom,  #f68410 0%,#C87827 100%);

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f68410', endColorstr='#C87827',GradientType=0 );

    display: block;

    border-bottom: 3px solid #a75d12;

}[/CSS]

как сделать что бы при наведении кнопка перейти к товару появлялась плавно и исчезала плавно?

 

Всем спс

[parnas]

Сделайте Fiddle. А так ничего не понятно.

[vasya_pupok]

Сделайте Fiddle. А так ничего не понятно.

http://jsfiddle.net/o5xs74x5/

[vasya_pupok]

Неужели никто не знает ?

[npofopr]

Сделать её через opacity и visibility.

+ скорее всего придется через absolute прятать её под низ.

css вроде как не умеет display: none - block анимировать. Вам или js применять или делать как я описал выше.

[vasya_pupok]

Сделать её через opacity и visibility.

+ скорее всего придется через absolute прятать её под низ.

css вроде как не умеет display: none - block анимировать. Вам или js применять или делать как я описал выше.

Можете показать пример на основе кода который выше, с утра голову ломаю не могу догнать

[Switch74]

Задам сразу интересующий меня вопрос по данной теме:

при попытке анимировать появление блока скажем через opacity, у которого меняется display, анимация не происходит

почему так происходит и на что можно заменить display?

 

для боле мене адекватной анимации появления использовал изменение max-,min- width,height

[npofopr]

Примерно так http://jsfiddle.net/npofopr/o5xs74x5/17/ можно