Избегайте анимации CSS, чтобы покинуть область просмотра

Question

Я пытаюсь настроить веб-дизайн с помощью плит, который должен уменьшаться при наведении указателя мыши. Он в основном работает нормально. Но плитки на краю экрана, очевидно, выходят за пределы области просмотра. Есть ли способ решить это без JavaScript?

#tiles article { 
 
    width: 150px; 
 
    height: 225px; 
 
    position: relative; 
 
    float: left; 
 
    margin: 5px; 
 
    vertical-align: top; 
 
} 
 
#tiles div.growingtile { 
 
    position: absolute; 
 
    top:0; 
 
    left:0; 
 
    width: 150px; 
 
    height: 225px; 
 
    overflow: hidden; 
 
    transition: all 0.5s ease-in-out; 
 
    -webkit-transition: all 0.2 ease-in-out; 
 
} 
 
#tiles div.growingtile:hover { 
 
    z-index: 100; 
 
    left: -75px; 
 
    top: -10px; 
 
    width: 300px; 
 
    height: 320px; 
 
    overflow: visible; 
 
    background-color: yellow; 
 
}

<section id="tiles"> 
 
    <article> 
 
    <div class="growingtile"> 
 
     <p>This is just a demo text.</p> 
 
    </div> 
 
    </article> 
 
    <article> 
 
    <div class="growingtile"> 
 
     <p>This is another demo text.</p> 
 
    </div> 
 
    </article> 
 
</section>

Для примера представьте себе галерею плитки простирающийся на несколько строк. Все средние плитки ведут себя точно так, как я хочу. Однако левая часть плитки не должна менять левое значение. Хотя это просто для самой первой плитки, я ищу решение для каждые самой левой и, вероятно, самой правой плитки.

Если нет решения только для CSS. Самое простое решение, которое я сейчас представляю, это добавить обработчик зависания ко всем плиткам, который при необходимости настраивает смещение плитки. Я также приветствую любые более простые идеи.

Answer 1

Я могу определенно заставить его работать для вашего первого ребенка, используя класс psedo :first-child.

Вы также можете добавить функцию для :last-child или :nth-child().

#tiles article { 
 
    width: 150px; 
 
    height: 225px; 
 
    position: relative; 
 
    float: left; 
 
    margin: 5px; 
 
    vertical-align: top; 
 
} 
 
#tiles div.growingtile { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 150px; 
 
    height: 225px; 
 
    overflow: hidden; 
 
    transition: all 0.5s ease-in-out; 
 
    -webkit-transition: all 0.2 ease-in-out; 
 
} 
 
#tiles div.growingtile:hover { 
 
    z-index: 100; 
 
    left: -75px; 
 
    top: -10px; 
 
    width: 300px; 
 
    height: 320px; 
 
    overflow: visible; 
 
    background-color: yellow; 
 
} 
 
#tiles article:first-child div.growingtile:hover { 
 
    left: 0; 
 
}

<section id="tiles"> 
 
    <article> 
 
    <div class="growingtile"> 
 
     <p>This is just a demo text.</p> 
 
    </div> 
 
    </article> 
 
    <article> 
 
    <div class="growingtile"> 
 
     <p>This is another demo text.</p> 
 
    </div> 
 
    </article> 
 
</section>