I'm currently experimenting with creating an image caption hover animation and here is the progress I've made: https://jsfiddle.net/6Lwo2231/
Here's a snippet of the HTML code:
<div class="container-a1">
<ul class="caption-style-1">
<li>
<img src="http://i68.tinypic.com/b8js6p.jpg" alt="" />
<div class="caption">
<div class="blur"></div>
<div class="caption-text">
<h1>Friends</h1>
<p>Whatever It Is - Always Awesome</p>
</div>
</div>
</li>
</ul>
</div>
And here's a section of the CSS code:
.caption-style-1{
list-style-type: none;
margin: 0px;
padding: 0px;
}
.caption-style-1 li{
float: left;
padding: 0px;
position: relative;
overflow: hidden;
}
.caption-style-1 li:hover .caption{
opacity: 1;
}
/* More CSS code... */
My goal is to make the caption visible without needing to hover over it, and when hovering over the image, move the caption downwards to the center and display an arrow image for navigating to another page, similar to this example image.
Your assistance would be greatly appreciated. Thank you!