2016 July 10 Archive - EXEIdeas – Let's Your Mind Rock

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.CLICK HERE TO SEE DEMOFeatures: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: 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);} HTML: Fighting by Sea and Sky. Painting by John E. Whiting.

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…