Как дезактивировать Css парить на пустой области

Question

У меня есть что-то вроде этого

Я стараюсь дезактивировать парить на красную области, я могу установить позицию IMG к абсолютному, и это происходит, но я полагаю, что ее не правильный путь.

я предоставил полный код здесь https://jsfiddle.net/m6ephL81/1/

<nav id='slideShow_control'> 
       <a href='#'> 
        <figure><img src='img/slide01_thumb.jpg' alt=''><figcaption>توسعه میدان های نفتی توسعه میدان های نفتی</figcaption></figure> 
       </a> 
       <a href='#'> 
        <figure><img src='img/slide02_thumb.jpg' alt=''><figcaption>توسعه میدان های نفتی</figcaption></figure> 
       </a> 
       <a href='#'> 
        <figure><img src='img/slide03_thumb.jpg' alt=''><figcaption>توسعه میدان های نفتی توسعه میدان های نفتی</figcaption></figure> 
       </a> 
       <a href='#'> 
        <figure><img src='img/slide04_thumb.jpg' alt=''><figcaption>توسعه میدان های نفتی</figcaption></figure> 
       </a> 
      </nav> 


#slideShow_control { 
    position: absolute; 
    bottom: 30px; 
    left: 50%; 
    transform: translateX(-50%); 
    z-index: 2; 
} 

#slideShow_control > a { 
    position: relative; 
    display: block; 
    float: left; 
    width: 20px; 
    height: 20px; 
    margin-left: 20px; 
} 

#slideShow_control > a:first-child { 
    margin-left: 0; 
} 

#slideShow_control > a:before { 
    content: ''; 
    display: block; 
    width: 20px; 
    height: 20px; 
    background-color: #09779C; 
} 
#slideShow_control > a:hover:after { 
    content: ''; 
    position: absolute; 
    width: 20px; 
    height: 20px; 
    left:0; 
    top: -20px; 
} 

#slideShow_control > a:hover:before { 
    transition: all 0.2s ease-in-out; 
    background-color: transparent; 
    transform: scale(1.7); 
    box-shadow: 0 0 0 3px #09779C inset; 
} 

#slideShow_control figure { 
    opacity: 0; 
    text-align: center; 
    font-size: 0; 
    position: absolute; 
    bottom: -100%; 
    left: 50%; 
    transform: translateX(-50%) translateY(50%); 
    visibility: hidden; 
    transition: all 0.3s ease-out; 
    z-index: 3; 
    pointer-events: none; 
} 

#slideShow_control figcaption { 
    white-space: nowrap; 
    padding-top: 8px; 
    padding-bottom: 7px; 
    color: #fff; 
    font-size: 0.9rem; 
} 

#slideShow_control img { 
    transition: all 0.3s ease-out; 
} 

#slideShow_control a:hover figure { 
    opacity: 1; 
    visibility: visible; 
    bottom: 30px; 
    transform: translateX(-50%) translateY(0); 
    pointer-events: all; 
} 

Я ценю ваши CSS или JS решения.

Answer 1

Действительно длинный текст делает элемент фигуры шире изображения. Посмотрите на this fiddle, чтобы вы могли визуализировать его. Обратите внимание, что третья цифра огромна, потому что я скопировал и вложил туда еще немного текста.

#slideShow_control figure { 
    background-color:red; 
    max-width:150px; 
} 

Быстрое решение, чтобы сделать коробку только так широко, как ваши изображения, теперь вы должны выяснить, как правильно установить позицию тексте в see here.

При использовании подобных анимаций использование абсолютных позиционированных элементов внутри относительных родителей в порядке. Просто попробуйте выяснить, на кого вы собираетесь навести курсор, поскольку способ, которым вы его реализовали, довольно затруднительно.