Маска при наведении, шаг 3 [3/31] Куча вопросов

Курсы §24. Мастерская: декоративные эффекты. Часть 2
1

Зачем классу overlay задавать
transform: scale(1);
если он и так изначально 1?

Зачем задавать классу overlay z-index 1, если абсолютное позиционирование и так идет поверх статического?

Не лучше ли overlay задать ширину и высоту 100%, а не подгонять под размеры .shape .details?

Кстати почему мы подгоняем их под размеры .shape .details, а не контейнера shape?

Итого:

.overlay {
    position: absolute;
    top: 0;
    left: 0;    
    width: 100%;
    height: 100%; 
    font-size: 0;
    background-repeat: no-repeat;      
    transition: transform 0.6s ease-out;
}

Против:

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 310px;
    height: 310px;
    font-size: 0;
    background-repeat: no-repeat;
    background-position: 0 0;
    outline: 0;
    transform: scale(1);
    transition: transform 0.6s ease-out;
}

.shape .details на 10 пикселей больше своего контейнера по ширине и высоте в целях выравнивания.
Не лаконичней ли и не гибче ли будет сделать выравнимание при помоще маргинов, дабы каждый раз при изменении ширины и высоты родителя, не менять ширину и высоту детей, а просто подправить маргин, при этом параметры родителя нас волновать не будут и их не надо будет искать?

Итого:

.shape .details {
    display: none;
    width: 100%;
    height: 100%;
    margin: 0 5px;
    padding-top: 30%;
    color: #ffffff;
    background-color: rgba(75, 90, 120, 0.9);
}

.shape:hover .overlay {
    transform: scale(1.07);
}

Против:

.shape .details {
    display: none;
    width: 310px;
    height: 310px;
    padding-top: 60px;
    color: #ffffff;
    background-color: rgba(75, 90, 120, 0.9);
}
1 лайк