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.
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 :
Rotate image on hover using CSS3
Most popular posts in 2my4edge
Change text & background color while selecting text using CSS3
Marquee style in different manner with PHP and MySql
My Demos page design details with all my tutorials
Image Zoommer like E-commerce site using multizoom.js
Facebook style Scroll bar using Jquery
Change background image while page refresh using Javascript
Most popular posts in 2my4edge
Change text & background color while selecting text using CSS3
Marquee style in different manner with PHP and MySql
My Demos page design details with all my tutorials
Image Zoommer like E-commerce site using multizoom.js
Facebook style Scroll bar using Jquery
Change background image while page refresh using Javascript
nice post..
ReplyDelete