라이트 박스를 사용하여 마우스를 올려 놓을 때 빛이 필요합니다.

지난 몇 일 동안 찾고 있었고 도움이되는 것을 찾을 수 없었습니다. Lightbox 데모 페이지 (http://lokeshdhakar.com/projects/lightbox2/)에서 사용되는 것과 동일한 광선 효과를 얻으려고합니다. 내 미리보기 이미지 위에 마우스를 가져 가면 같은 종류의 애니메이션이 발생합니다. 그러나 나는 정말로 도움이되는 것을 찾을 수 없습니다. 아무도 그들이 이것을 어떻게 달성했는지 알 수 있습니까?라이트 박스를 사용하여 마우스를 올려 놓을 때 빛이 필요합니다.

출처

2014-04-29 user3587173

이미지의 파란색 윤곽선을 말하고 있습니까? –

이것은 이미지 주위에있는 링크 요소의 배경색을 흰색에서 파란색으로 간단히 전환 한 것으로 보입니다. 링크의 패딩 영역 내에 표시되며 테두리 반경에 의해 가장자리의 둥근 모서리로 제한됩니다. (그것은 꽤 싸게 보입니다. 나는 블러 링 된 박스 - 섀도우와 같은 다른 무언가를 성취하는 다른 방법들이이 효과를 아주 잘 볼 수 있다고 생각합니다.) – CBroe

문제는 상자 그림자를 추가하려고했을 때입니다. 웬일인지, 그것은 실제 이미지 주위에 결코 존재하지 않을 것이다. 그러나 그것은 이미지의 1 개의 corder에서 시작되고, 완전히 다른 치수 일 것 인 것처럼 보일 것이다. – user3587173

여기가 무슨 짓을했는지 : 배경색 및 전환되는

.example-image-link { 
    display: inline-block; 
    padding: 4px; 
    margin: 0 0.5rem 1rem 0.5rem; 
    background-color: #fff; 
    line-height: 0; 
    -webkit-border-radius: 6px; 
    -moz-border-radius: 6px; 
    -ms-border-radius: 6px; 
    -o-border-radius: 6px; 
    border-radius: 6px; 
    -webkit-transition: background-color 0.5s ease-out; 
    -moz-transition: background-color 0.5s ease-out; 
    -o-transition: background-color 0.5s ease-out; 
    transition: background-color 0.5s ease-out 
} 

.example-image-link:hover { 
    background-color: #4ae; 
    -webkit-transition: background-color 0; 
    -moz-transition: background-color 0; 
    -o-transition: background-color 0; 
    transition: background-color 0 
} 

.example-image { 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    -ms-border-radius: 5px; 
    -o-border-radius: 5px; 
    border-radius: 5px 
}

중요한 비트.

http://jsfiddle.net/DjXn9/

출처

2014-04-29 22:56:11

정말 고마워요! 나는 일하도록했다. 도와 줘서 고마워! – user3587173

라이트 박스를 사용하여 마우스를 올려 놓을 때 빛이 필요합니다.

답변

관련 문제