티스토리 이미지에 슬라이딩 캡션 적용하는 방법
- 퍼블리셔/기술
- 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="https://t1.daumcdn.net/cfile/tistory/1818E04350BFF74227" rel="lightbox" target="_blank">
<img height="237" src="https://t1.daumcdn.net/cfile/tistory/1818E04350BFF74227" 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 에서 미리보기를 할 수 있습니다.