Интересует такая штука – как заставить блок расширяться плавно при наведении, то есть иконка становится видимой по мере того, как в течение анимации до конца выезжает кнопка справа?
body {
font-family: "Roboto";
font-weight: 100px;
}
.cat-block {
position: relative;
display: inline-block;
}
.cat-block .category {
background-color: rgba(255, 255, 255, 0);
padding: 3px 8px 3px 8px;
box-shadow: 0px 0px 35px 0px rgba(1, 2, 4, 0.25);
float: left;
-webkit-transition: .2s ease-out;
-o-transition: .2s ease-out;
-moz-transition: .2s ease-out;
transition: .2s ease-out;
margin: 0;
z-index: 3;
}
.cat-block .category img {
width: 13px;
padding-right: 5px;
display: none;
}
.cat-block .category:hover img {
display: inline;
}
.cat-block .category a {
font-size: 16px;
font-weight: 300;
color: #3b3b3b;
text-align: right;
text-decoration: none;
}
.cat-block .category:hover {
box-shadow: 0px 0px 21px 0px rgba(1, 2, 4, 0.25);
background-color: rgba(255, 255, 255, 1);
}
.cat-block .category:active {
background-color: rgba(255, 255, 255, 1);
}
.cat-block .category:nth-of-type(1) {
border-radius: 10px 0 0 10px;
padding-left: 14px;
}
.cat-block .category:nth-of-type(4) {
border-radius: 0 10px 10px 0;
padding-right: 14px;
}
Ответ
@andrey-fedorov прав, сделать плавность с помощью css/display:none невозможно, это можно сделать при помощи jQuery например. А вот если изменять ширину от 0 до заданной, то с помощью css это сделать можно вот так:
body {
font-family: "Roboto";
font-weight: 100px;
}
.cat-block {
position: relative;
display: inline-block;
}
.cat-block .category {
background-color: rgba(255, 255, 255, 0);
padding: 3px 8px 3px 8px;
box-shadow: 0px 0px 35px 0px rgba(1, 2, 4, 0.25);
float: left;
-webkit-transition: .2s ease-out;
-o-transition: .2s ease-out;
-moz-transition: .2s ease-out;
transition: .2s ease-out;
margin: 0;
z-index: 3;
}
.cat-block .category img {
width: 0;
padding-right: 5px;
transition: .3s;
}
.cat-block .category:hover img {
width:13px
}
.cat-block .category a {
font-size: 16px;
font-weight: 300;
color: #3b3b3b;
text-align: right;
text-decoration: none;
}
.cat-block .category:hover {
box-shadow: 0px 0px 21px 0px rgba(1, 2, 4, 0.25);
background-color: rgba(255, 255, 255, 1);
}
.cat-block .category:active {
background-color: rgba(255, 255, 255, 1);
}
.cat-block .category:nth-of-type(1) {
border-radius: 10px 0 0 10px;
padding-left: 14px;
}
.cat-block .category:nth-of-type(4) {
border-radius: 0 10px 10px 0;
padding-right: 14px;
}
Комментариев нет:
Отправить комментарий