I'm currently working on adjusting the dropdown behavior for thumbnails when hovering over them. I want the drop-down to appear beneath the 'Caption Title' instead of above the image, but so far my CSS adjustments haven't been successful. Since I lack experience in JavaScript, I'm unsure if the issue lies there instead of in the CSS.
You can locate the CSS code at the bottom of style.css file.
I believe this should be a straightforward question for the experts here!
On another note, I'd like to inquire if anyone has suggestions for smoother animation of the moving image that doesn't feel choppy across different browsers. Currently, I am using CSS3 @keyframes for the animation.
<div class="grid-block-container">
<div class="grid-block slide">
<div class="caption1">
<h3>Caption Title</h3>
</div>
<div class="caption">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p><a href="#" class="learn-more">Learn more</a></p>
</div>
<img src="img/1.jpg" alt="nebula">
</div>
</div>
.grid-block-container {
width: 100%;
margin: 0;
}
.grid-block {
position: relative;
width: 100%;
}
.caption1 {
display: block;
position: absolute;
top: 0;
left: 0;
background: rgba(246,48,62,0.7);
width: 100%;
padding-bottom: 15px;
}
.caption {
display: none;
position: absolute;
top: 0;
left: 0;
background: rgba(246,48,62,0.7);
width: 100%;
border-bottom: 1px solid #ffffff;
padding-bottom: 15px;
}
.caption1 h3, .caption p {
color: #ffffff;
margin: 20px;
}
.caption1 h3 {
margin: 20px 20px 10px;
}
.caption p {
font-size: .9em;
line-height: 1.5em;
margin: 0 20px 15px;
}
.caption a.learn-more {
padding: 5px 10px;
background: #f6303e;
color: #fff;
border-radius: 2px;
-moz-border-radius: 2px;
font-weight: bold;
text-decoration: none;
}
.caption a.learn-more:hover {
background: #fff;
color: #f6303e;
}
<script type="text/javascript">
$(document).ready(function() {
$('.standard').hover(
function(){
$(this).find('.caption').show();
},
function(){
$(this).find('.caption').hide();
}
);
$('.fade').hover(
function(){
$(this).find('.caption').fadeIn(250);
},
function(){
$(this).find('.caption').fadeOut(250);
}
);
$('.slide').hover(
function(){
$(this).find('.caption').slideDown(200);
},
function(){
$(this).find('.caption').slideUp(200);
}
);
});
</script>