Struggling to create an image caption that only appears when hovering over the specific image? Not sure how to select the correct object?
The caption is working, but it's appearing for all images at once. I have attempted to target a single image with no success. Can anyone guide me on selecting the right object?
HTML
<ul id="columns">
<li class="col-1">
<div class="photo1">
<p>I am doing great. I love this place and I would love to work here.</p>
</div>
<div class="photo2">
<p>I am doing great. I love this place and I would love to work here.</p>
</div>
<div class="photo3">
<p>I am doing great. I love this place and I would love to work here.</p>
</div>
<div class="photo4"></div>
<div class="photo5"></div>
</li>
<li class="col-2">
<div class="photo6"></div>
<div class="photo7"></div>
<div class="photo8"></div>
<div class="photo9"></div>
<div class="photo10"></div>
</li>
<li class="col-3">
<div class="photo11"></div>
<div class="photo12"></div>
<div class="photo13"></div>
<div class="photo14"></div>
<div class="photo15"></div>
</li>
</ul>
CSS
.photo1 {
position: relative;
background: url(../img/sncc_teaser.jpg) no-repeat;
width: 250px;
height: 339px;
margin-bottom: 5px;
}
ul li p {
display: none;
position: absolute;
background-color: gray;
width: 250px;
color: white;
margin: 0;
padding: 0;
padding-left: 5px;
bottom: 10px;
left: 0px;
}
jQuery
$(document).ready(function(){
$(".col-1").hover
(
function($e)
{
$("li p", this).show();
},
function($e)
{
$("li p", this).hide();
}
);
});