티스토리 이미지에 슬라이딩 캡션 적용하는 방법

게시자: 대문 demun 카테고리: 퍼블리셔/기술 2012.12.10 09:00

제가 이번에 부트스트랩 반응형 스킨을 만들면서 이미지와 동영상에 대한 자료를 찾다가 이미지 캡션을 적용하는 방법을 찾고 티스토리 블로그에 적용을 해 봤습니다.

비교적 좋은점이 많아 적용하는 방법을 이렇게 공유합니다.


티스토리 블로그에서 이미지에 대한 치환자는 imageblock 입니다.

그리고 이미지 아래에 적용하는 자막은 cap1 클래스를 사용합니다.

치환자와 클래스에 대해서 자세히 보실려면 http://www.tistory.com/manual/skin/?_top_tistory=navi_manual_skin&page=5#cap1 를 참고하세요.


이번 이미지 자막을 슬라이딩 되어서 보여지는 것입니다.

처음에는 물음표 형식을로 아이콘처럼 생긴것이 보여지고 마우스를 올리면 이미지자막이 슬라이딩 되면서 보여지는 것입니다.


이미지에 ? 형식으로 올려져있습니다.

마우스를 올렸을때 보여지는 사진



제 블로그에 있는 이미지 하나를 예를들어서 사용하겠습니다.

티스토리 블로그에 있는 html 마크업은 아래와 같습니다.


<p style="text-align: center; clear: none; float: none;">
    <span class="imageblock" style="display:inline-block;width:407px;">
      <span dir="http://cfile25.uf.tistory.com/original/1818E04350BFF74227B6CD" rel="lightbox" target="_blank">
        <img height="237" src="http://cfile25.uf.tistory.com/image/1818E04350BFF74227B6CD" width="407">
      </span>
      <span class="cap1" style="display:block;width:407px;">Packages Install</span>
    </span>
</p>

여기 보시면 inline 스타일이 지정된것이 있습니다. 이것은 모두 티스토리 자체에서 지정한것입니다.

따로 CSS를 지정한 것이 아님을 알려드립니다.

html 마크업이 됐으니 CSS 코드는 아래와 같습니다.


.imageblock {
    display: block;
    position: relative;
    overflow: hidden;
}
.imageblock img {
    transition: all 0.6s ease;
    -webkit-transition: all 0.6s ease;
    -o-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    -ms-transition: all 0.6s ease;
}
.imageblock img:hover {
    opacity: .5;
    filter: alpha(opacity=50);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}
.imageblock:before {
    position: absolute;
    left: 10px;
    bottom: 10px;
    width: 24px;
    height: 24px;
    border-radius: 12px;
    background: black;
    background: rgba(255,255,255,0.75);
    opacity: 0.75;
    content: "?";
    color: black;
    font-size: 14px;
    font-weight: 800;
    text-align: center;
    text-shadow: 0 0 5px white;
    line-height: 24px;
    transition: all 0.6s ease;
    filter: alpha(opacity=75);
    -webkit-transition: all 0.6s ease;
    -o-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
    -ms-transition: all 0.6s ease;
}
.imageblock:hover:before {
    opacity: 0;
    filter: alpha(opacity=0);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
.imageblock .cap1 {
    position: absolute;
    left: 0;
    bottom: -30%;
    padding: 10px 0;
    background: black;
    background: rgba(0,0,0,0.75);
    opacity: 0;
    color: white;
    transition: all 0.6s ease;
    filter: alpha(opacity=0);
    -webkit-transition: all 0.6s ease;
    -o-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    -ms-transition: all 0.6s ease;
}
.imageblock:hover .cap1 {
    bottom: 0;
    opacity: 1;
    filter: alpha(opacity=100);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

IE9는 CSS3를 지원하지 않기 때문에 이미지 캡션이 그냥 hover 로 보여집니다.

하지만 CSS3를 지원하는 브라우져에서는 슬라이딩 되어서 이미지 자막이 보여집니다.


이코드는 기본적으로 어떤 스킨에도 작동될것으로 생각됩니다.

2012-12월 글 쓰는 시점에 이 코드가 삽입되어 있어서 미리보기가 될것입니다.

만약 스킨이 변경되었다면 http://tinkerbin.com/MdPnNOA2 에서 미리보기를 할 수 있습니다.


신고

댓글