호버 효과 범위는

Question

는 이봐, 난 작은 호버 효과를 너무 높게 그러나 나는 그렇게 희망 누군가가 나 :(

[here]https://jsfiddle.net/5a4jh4pc/

을 도울 수있는 자신에 의해 제거 할 수없는 것 거기에 버그가 있습니다

이 호버 효과이다. 당신은 우측 이미지에 가까운 경우

호버 폭 화상 사이즈의 100 %에 배치되어 있지 않은

2. 호버 효과도 시작된다. (이것은해야 오직해라. 마우스가 옆에있는 것이 아니라 이미지 위에있을 때의 효과)

누군가가이 문제를 해결할 수 있기를 바랍니다. 미리 감사드립니다!

Answer 1

용기를 특정 크기로 설정하면 hover 효과가 트리거되고 이미지가이 크기의 70 %로 설정됩니다.

오른쪽 컨테이너의 30 %에 hover이 여전히 활성화되어 있지만 이미지는 포함되지 않았 음을 의미합니다.

변경 figurewidth 사용자의 요구

figure { 
display: inline-block; 
    position: relative; 
    float: left; 
    overflow: hidden; 
    width: 300px; 
} 
figcaption { 
    position: absolute; 
    background: black; 
    background: rgba(0,0,0,0.75); 
    color: white; 
    opacity: 0; 
    -webkit-transition: all 0.6s ease; 
    -moz-transition: all 0.6s ease; 
    -o-transition:  all 0.6s ease; 
     font-size: 12px; 
    line-height: 15px; 
} 
figure:hover figcaption { 
    opacity: 1; 
} 
figure:hover:before { 
    opacity: 0; 
} 
.cap-bot img { 
    float:left; 
width:100%; 
} 
.cap-bot:before { width:0%;padding: 10px 10px;bottom: 10px; } 
.cap-bot figcaption { width:100%;padding: 10px 10px;left: 0; bottom: -30%;} 
.cap-bot:hover figcaption {width:100%;padding: 10px 10px;bottom: 0; } 

https://jsfiddle.net/hjhbrosh/

Answer 2

제거 왼쪽과 오른쪽 패딩 당신의 figcaption에 갈래에 맞게하고 오버 플로우 때 다음 줄에 텍스트를 포장 word-wrap: break-word;을 사용하고 사용하기 해당 패딩을 유지하려면 figcaption 안에 div을 넣으십시오.

.cap-bot figcaption { 
    width:70%; 
    padding: 10px 0px; 
    left: 0; 
    bottom: -30%; 
} 
.cap-bot:hover figcaption { 
    width:70%; 
    padding: 10px 0px; 
    bottom: 0; 
} 

확인이 fiddle