이미지의 오른쪽 상단에 검은 색 오버레이가있는 아이콘이 표시됩니다.

jquery 라이트 박스 슬라이더를 사용하여 이미지를 표시하고 라이트 박스 슬라이더가 이미지를 라이트 박스 컨테이너에 동적으로 삽입합니다. 마음에 드는 아이콘으로 이미지에 하트 아이콘을 표시하고 싶습니다. 어떻게 이미지의 오른쪽 상단 모서리에 검은 오버레이와 아이콘을 배치 CSS를 사용할 수 있습니다. 미리 감사드립니다.이미지의 오른쪽 상단에 검은 색 오버레이가있는 아이콘이 표시됩니다.

출처

2014-04-11 Dave

관련 코드는 어디에 있는가? 슬라이더를 처음부터 만들거나 마크 업을 시각화하기 위해 여섯 번째 감각을 사용해야합니다. O.o –

예, 우리는 당신이 그것을 실행하고 있다는 것을 알고 있습니다. 문제는 당신을 돕기 위해 처음부터 슬라이더를 만들고 그걸 가지고 놀아야 만한다는 것입니까? 이미 가지고 있기 때문에 코드를 게시하거나 [JSFiddle] (http://jsfiddle.net)을 공유하여 사람들을 도와 줄 수는 없습니까? –

코드를 게시하지 않았으므로 여기서는 일반적인 CSS 및 HTML을 사용합니다.

CSS :

.sliderImgWrapper { 
    position: relative; 
    width: 200px; 
    height: 300px; 
    border: 2px solid #000000; 
} 
.overlay { 
    position: absolute; 
    top: 0px; 
    right: 0px; 
    border-top: 50px solid #000000; 
    border-left: 50px solid transparent; 
} 
.overlayImage { 
    position: absolute; 
    top: -50px; 
    left: -25px; 
}

HTML :

<div class="sliderImgWrapper"> 
    <div class="overlay"> 
     <img class="overlayImage" src="src_of_img" /> 
    </div> 
</div>

A live demo at jsFiddle. (나는 imgur에 저장된 심장을 가지지 않았지만, +은 할 것이다 ...)

출처

2014-04-11 17:36:10 Teemu

감사합니다.이 일을했습니다. – Dave

이미지의 오른쪽 상단에 검은 색 오버레이가있는 아이콘이 표시됩니다.

답변

관련 문제