Making Image Overlay Caption Using CSS > Web Development

본문 바로가기
사이트 내 전체검색

Web Development

Making Image Overlay Caption Using CSS

페이지 정보

profile_image
작성자 규범^-^* (166.♡.36.11)
댓글 0건 조회 2,303회 작성일 14-03-31 13:17

본문

Intro


There are 2 image overlay caption related tutorials i made “Making image captions using jQuery” and “Making A Cool Thumbnail Effect With Zoom And Sliding Captions”. Feel free to check them out, they’re great :)


Both of them have some cool effect made with jQuery, but yesterday a reader (hi Goodluck) asked me how to have the captions shown by default without jQuery effects. So i realized i don’t have a tutorial explaining how to make a simple overlay image caption and here we are. Enjoy.


HTML






  1. <div class='wrapper'>

  2. <img src='wolf.jpg' />

  3. <div class='description'>

  4. <p class='description_content'>The pack, the basic...p>

  5. div>

  6. div>



wolf.jpg



The pack, the basic...








CSS





  1. div.wrapper{
  2. float:left; /* important */
  3. position:relative; /* important(so we can absolutely position the description div */
  4. }
  5. div.description{
  6. position:absolute; /* absolute position (so we can position it where we want)*/
  7. bottombottom:0px; /* position will be on bottom */
  8. left:0px;
  9. width:100%;
  10. /* styling bellow */
  11. background-color:black;
  12. font-family: 'tahoma';
  13. font-size:15px;
  14. color:white;
  15. opacity:0.6; /* transparency */
  16. filter:alpha(opacity=60); /* IE transparency */
  17. }
  18. p.description_content{
  19. padding:10px;
  20. margin:0px;
  21. }
div.wrapper{

float:left; /* important */
position:relative; /* important(so we can absolutely position the description div */
}
div.description{
position:absolute; /* absolute position (so we can position it where we want)*/
bottom:0px; /* position will be on bottom */
left:0px;
width:100%;
/* styling bellow */
background-color:black;
font-family: 'tahoma';
font-size:15px;
color:white;
opacity:0.6; /* transparency */
filter:alpha(opacity=60); /* IE transparency */
}
p.description_content{
padding:10px;
margin:0px;
}

That’s it


And we have a nice transparent overlay image caption. If you don’t like that the text is also transparent then i can suggest you to use a transparent PNG image 1px wide and 1px tall as the background of the .description and remove the CSS opacity, or you can use javascript to make a transparent mask and on top of it show the caption text. If you like to see a tutorial on different ways to achieve that, let me know and i’ll see what i can do :)


Stay updated


If you want you can subscribe to TutsValley RSS Feed or follow us on Twitter to be informed when a new tutorial comes out. Thank you.

추천0 비추천0

댓글목록

등록된 댓글이 없습니다.

회원로그인

회원가입

접속자집계

오늘
20
어제
43
최대
1,849,690
전체
1,850,225