CSS Hover Масштабирование скрывает скрытый контент, а затем снова скрывается

Question

Я пытаюсь увеличить связанное изображение и уменьшить непрозрачность при наведении. У меня есть изображение в контейнере, чтобы сделать его кругом с граничным радиусом, а контейнер имеет переполнение, установленное в скрытое. У меня все работает, за исключением того, что когда я нахожусь, полное изображение появляется в течение короткой секунды, прежде чем переполнение снова будет скрыто. Вот код-код: http://codepen.io/jphogan/pen/WbxKJG

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

Вот CSS, как я его создал сейчас, хотя я прошел через несколько итераций, чтобы попытаться решить эту проблему. Я ценю любую помощь. Благодаря!

.solutions_role_container { 
    text-align:center; 
} 

.role_img_container { 
    width: 70%; 
    margin: 0 auto; 
} 

a.solutions_role_image { 
    background:#000; 
    border-radius: 50%; 
    overflow: hidden; 
    display: block; 
    border: 1px solid #B1C3DA; 
    box-shadow: 0 4px 10px #C6C6C6; 
} 

.solutions_role_image img { 
    width:100%; 
    -moz-transition: opacity 0.4s ease-in-out, transform 0.2s ease-in-out; 
    -o-transition: opacity 0.4s ease-in-out, transform 0.2s ease-in-out; 
    -webkit-transition: opacity 0.4s ease-in-out, transform 0.2s ease-in-out; 
    transition: opacity 0.4s ease-in-out, transform 0.2s ease-in-out; 
    display:block; 
    overflow:hidden; 
    transform:scale(1); 
} 

a.solutions_role_image:hover img { 
    opacity:0.7; 
    transform:scale(1.08); 
} 

Answer 1

Добавить эти правила role_img_container:

border-radius: 50%; 
overflow: hidden; 
z-index: 2; 
position: relative; 

В a и img тегах больше не нужны никакие CSS для переполнения или радиуса границы. Вы можете добавить z-index: 1 в solutions_role_img, чтобы быть в безопасности, но я не думаю, что это необходимо