Place the Text on image using CSS | 2my4edge

27 December 2013

Place the Text on image using CSS

Most of us don't know how to place a text on the image using css, here i'm going to explain you, how to make text on the image using css. it is also called as caption of the image, that is what we are going to do. let see the coding.
how-to-write-text-on-the-image-using-css
DOWNLOAD                        LIVE DEMO

like the above image, we are going to place the text on the image. 

CODE
<section class="container">
  <figure class="image">
    <img src="img/sample.png" alt="Sample-image" />
    <figurecaption class="action">
      <p class="title">Arunkumar maha</p>
      <br />
      <a href="www.2my4edege.com" class="link">www.2my4edge.com</a>
    </figurecaption>
  </figure> 
</section>

CSS
<style type="text/css">
* {
padding:0 px;
margin:0 px;
}
.container {
width:900px;
margin:0 auto;
}
.image {
position:relative;
}
.action {
position:absolute;
top:25%;
left:10%;
}
.title {
padding:2px 2px;
margin-bottom:0;
color:#00C;
font-family:Verdana, Geneva, sans-serif;
font-size:36px;
font-weight:lighter;
}
.link {
padding:10px 20px;
font-size:18px;
font-weight:600;
color:#fff;
background-color:#099;
text-transform:uppercase;
}
.link:hover {
text-decoration:none;
}
</style>
you can change the red highlighted area as where you need. position:absolute make absolute position on the image. i hope this may useful for designing. Thank you.


RELATED POSTS :


1 comment:

^