jQuery Plugin For Animated Image Caption with Blurred Overlay - Captionblur

CaptionBlur is a fancy jQuery plugin for adding an animated image caption with a blurred overlay over an image when mouse hover. By the default, the plugin comes with a 'fly-in-out' animation using CSS3 transformers, you can create your own animations via CSS3 transitions or transforms in the CSS.

How to use it:

1. Include jQuery javascript library and jQuery captionBlur plugin at the end of your page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="captionblur.js"></script>

2. Add the following CSS styles in your CSS or include the captionblur.css file in the page. Feel free to change and add the styles depending on your needs.

.caption-blur-container {
width: 400px;
display: inline-block;
}
.caption-blur-container p {
text-align: center;
vertical-align: middle;
font-size: 1em;
-webkit-font-smoothing: antialiased;
font-family: 'Syncopate', Helvetica, Arial;
text-transform: uppercase;
position: absolute;
margin-top: 75px;
margin-left: 40px;
color: white;
width: 320px;
z-index: 999;
}
.caption-blur-container i {
display: inline-block;
font-style: normal;
padding: 0 0.25em;
-webkit-transform: scale(0) translate3d(0, -2000px, 0);
-moz-transform: scale(0) translate3d(0, -2000px, 0);
-ms-transform: scale(0) translate3d(0, -2000px, 0);
-o-transform: scale(0) translate3d(0, -2000px, 0);
transform: scale(0) translate3d(0, -2000px, 0);
background: rgba(255, 255, 255, 0.3);
border-radius: 50%;
}
.caption-blur-container i.fly-in-out {
-webkit-animation: fly-in-out 3s ease-in-out forwards;
-moz-animation: fly-in-out 3s ease-in-out;
-o-animation: fly-in-out 3s ease-in-out;
animation: fly-in-out 3s ease-in-out forwards;
color: rgba(0, 0, 0, 0.8);
-webkit-transform: scale(1) translate3d(0, 0, 0);
-moz-transform: scale(1) translate3d(0, 0, 0);
-ms-transform: scale(1) translate3d(0, 0, 0);
-o-transform: scale(1) translate3d(0, 0, 0);
transform: scale(1) translate3d(0, 0, 0);
background: transparent;
box-shadow: none;
}
.blur {
-webkit-filter: blur(3px);
-moz-filter: blur(3px);
-o-filter: blur(3px);
-ms-filter: blur(3px);
filter: blur(3px);
}
 @-webkit-keyframes fly-in-out {
 0% {
 -webkit-transform: scale(0) translate3d(0, -1000px, 0);
 background: rgba(0, 0, 0, 0.3);
 box-shadow: 0 0 100px 100px rgba(255, 255, 255, 0.2);
 border-radius: 50%;
}
 15%, 85% {
 color: rgba(0, 0, 0, 0.8);
 -webkit-transform: scale(1) translate3d(0, 0, 0);
 background: transparent;
 box-shadow: none;
}
}
 @-moz-keyframes fly-in-out {
 0% {
 -moz-transform: scale(0) translate3d(0, -2000px, 0);
 background: rgba(0, 0, 0, 0.3);
 box-shadow: 0 0 100px 100px rgba(255, 255, 255, 0.2);
 border-radius: 50%;
}
 15%, 85% {
 color: rgba(0, 0, 0, 0.8);
 -moz-transform: scale(1) translate3d(0, 0, 0);
 background: transparent;
 box-shadow: none;
}
}
 @-o-keyframes fly-in-out {
 0% {
 -o-transform: scale(0) translate3d(0, -2000px, 0);
 background: rgba(0, 0, 0, 0.3);
 box-shadow: 0 0 100px 100px rgba(255, 255, 255, 0.2);
 border-radius: 50%;
}
 15%, 85% {
 color: rgba(0, 0, 0, 0.8);
 -o-transform: scale(1) translate3d(0, 0, 0);
 background: transparent;
 box-shadow: none;
}
}
 @keyframes fly-in-out {
 0% {
 transform: scale(0) translate3d(0, -2000px, 0);
 background: rgba(0, 0, 0, 0.3);
 box-shadow: 0 0 100px 100px rgba(255, 255, 255, 0.2);
 border-radius: 50%;
}
 15%, 85% {
 color: rgba(0, 0, 0, 0.8);
 transform: scale(1) translate3d(0, 0, 0);
 background: transparent;
 box-shadow: none;
}
}

3. Create a html structure as follows.

<div class="caption-blur-container">
<p class="caption-blur-caption">jQueryScript.Net</p>
<img id="caption-blur" src="http://lorempixel.com/400/300/people"> </div>

---

This awesome jQuery plugin is developed by ErwanLent. For more Advanced Usages, please check the demo page or visit the official website.