LATEST >>

Welcome Here And Thanks For Visiting. Like Us On Facebook...

EXEIdeas – Let's Your Mind Rock » CSS Codes / HTML-CSS-PHP-JavaScript » Stylish Image Caption On Hover For Web And Blogs

Stylish Image Caption On Hover For Web And Blogs

Stylish-Image-Caption-On-Hover-For-Web-And-Blogs
Image Caption are the most important part of optimizing images now a days. They are now as important ans ALT and TITLE tags so you have to give it a better view also to make it user friendly and as well as SE friendly so your every image should have the new HTML tag for image caption but now its time to make it stylish for better user experience also.

So here we have “figure” and “figcaption” HTML tags that is used in the below code as normally but here is the stylish CSS code that will make your Image Caption stylish for user means they will remain hide until user will move it mouse over the image then the caption will be visible. So now have a look on DEMO then go ahead and garb the code and make it done on your web page.

Features:

1.) No JQuery File Added.
2.) No JavaScript Code Added.
3.) CSS3 Added.
4.) Simple And Fast Loading Widget.
5.) Can Work With Any Browser.

How To Add In A WebPage OR Blog?

1.) Just Go To Your “Web Page File” or “Blog”.
2.) Now “Copy” The Below Codes And “Paste” It To There Positions.

CSS:

<style type="text/css">
figure {
 position: relative;
 display: block;
 border: 1px solid #333;
 margin: 5px 0 10px 0;
}
figcaption {
 position: absolute;
 left: 0;
 bottom: 0;
 width: 100%;
 font-size: .7em;
 color: #fff;
 background-color: rgba(0,0,0,.7);
 opacity: 0;
 -webkit-transition: opacity .5s ease-in-out;
 -moz-transition: opacity .5s ease-in-out;
 -o-transition: opacity .5s ease-in-out;
 transition: opacity .5s ease-in-out;
}
figure:hover figcaption {
 opacity: 1;
}
figcaption * {
 padding: 0 10px;
 margin: 0;
}
figcaption *:first-child {
 padding-top: 5px;
}
figcaption *:last-child {
 padding-bottom: 5px;
}
figcaption, h1, h2, h3, h4 {
 font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
figcaption {
 filter: alpha(opacity=0);
}
figure:hover figcaption {
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#aa000000,endColorstr=#aa000000);
}
</style>

HTML:

<figure style="width: 300px; height: 373px; float: left; margin-right: 20px;">
<img src="images/fighting-by-sea-and-sky.jpg" alt="Fighting by Sea and Sky" />
<figcaption><h3>Fighting by Sea and Sky.</h3>
<p>Painting by John E. Whiting.</p>
</figcaption>
</figure>

Customization:

1.) You can change the Codes if your are a Pro. Rest can ask for customization.

Last Words:

That’s all we have. If you have any problem with this code in your template then feel free to contact us with full explanation of your problem. We will reply you as time allow to us. Don’t forget to share this with your friends so they can also take benefit from it and leave your precious feedback in our comment form below. Happy blogging, See you in next article…

You Like It, Please Share This Recipe With Your Friends Using...

7 Responses to “Stylish Image Caption On Hover For Web And Blogs”

  1. Nice article.Really it is informative and useful. Thanks for sharing this blog.

  2. Shariq July says:

    I’ve bookmark this post.. Thanks for sharing this……

  3. anna cruz says:

    Hey man, You are Awesome CSS Coder,

Leave a Reply

Your email address will not be published. Required fields are marked *