"Placing drop-down animations in just the right spot

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>

http://jsfiddle.net/8j63s/

Answer №1

Adjust your CSS code to display like this:

.description {
display: none;
position: absolute;
top: 71px;
left: 0;
background: rgba(82,187,222,0.8);
width: 100%;
border-bottom: 1px solid #ffffff;
padding-bottom: 15px;
}

This will position it below the description title if the title is only on one line. Refer to the screenshot provided below for clarity:

To make this adjustment dynamic, you'll need to modify the jQuery slightly to accommodate all instances using this code snippet:

$('.card').each(function() {
    var titleHeight = $(this).find('.description-title').innerHeight();
    $(this).find('.description').css('top', titleHeight + 'px');
});

This script will iterate through each element with the class name "card", calculate the title height, and reposition the description accordingly.

Answer №2

To achieve this effect using only CSS, you can follow David's solution. However, if you prefer a jQuery version, you can implement the following code:

$('.grid-block').hover(function(){
    $(this).find('.caption').slideDown();
},function(){
    $(this).find('.caption').slideUp();
});

You should also adjust the .caption style to have bottom:0; instead of top.

Check out the working example on FIDDLE

Answer №3

Update the .caption div with the code snippet below:

.caption {display: none; position: absolute; bottom: 0; left: 0; background:rgba(246,48,62,0.7); width: 100%; border-bottom: 1px solid #ffffff; padding-bottom: 15px; }

The only change made is replacing top:0; with bottom:0;

Refer to the screenshot for visual representation:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Implementing child components in React using TypeScript and passing them as props

Is it possible to append content to a parent component in React by passing it through props? For example: function MyComponent(props: IMyProps) { return ( {<props.parent>}{myStuff}{</props.parent>} } Would it be feasible to use the new compone ...

Displaying the specified item within an array using AngularJS

My application features a group of 'players' each with their own unique attributes that I want to showcase within a modal window and cycle through. The user interface is structured like this: <!-- Score Round Modal --> <div class="mo ...

The radio button allows for the selection of multiple items, rather than just one at a time

https://i.sstatic.net/9MEzS.png I have implemented a radio input as shown below <input type="radio" id={el.name} className="form-check-input" name={el.name} data-count={el.name} value={el.id} onChange={this.select_role.bind(this)} style={{margin: "4px ...

I'm having trouble getting the JADE tag to render in Express script. Can anyone help me

I am trying to include client-side script in my JADE template and so far I have: extends layout script. function collect_data() { var transitions = {}; $( ":checkbox:checked" ).each(function (index, element) { //// some code ...

Having trouble getting a JS file to work with the Laravel Inertia.js and Vue.js3 template

Just getting started with inertia.js and facing an issue. My CSS styles are being applied, but my JavaScript file isn't functioning as expected. I'm working on an admin dashboard using Laravel 9 and vue.js-3 with a custom HTML template. Interes ...

Issues encountered with making JSONP requests

Hey there, I'm a bit stuck and need some help figuring out what's going wrong. Sometimes a fresh perspective can make all the difference. So, here's the situation: I'm making a JSONP request using jQuery from one domain () to a PHP scri ...

Show a grid layout with adjustable sizing and elements centered in the middle

When dealing with a layout like the one below, how can we ensure that elements are centered within the wrap container? The margins around the elements should be flexible but at least 14px. .wrap{ display: grid; grid-template-columns: repeat(auto-fi ...

What is the best way to use @foreach to make the text in the final row of a table bold?

Is there a way to apply bold styling to the text in the final row using @foreach in HTML? I am looking to emphasize the total sum of each column by displaying it in bold text. While I initially considered creating a new table below the current one solely ...

A dynamic jQuery plugin that replicates the smooth page sliding animation found in iPhone apps

Currently, I am in search of a jQuery plugin that has the capability to navigate users to different pages on a website with a sleek sliding animation, similar to what we see in some widely used iPhone apps. Despite my best efforts to create this functional ...

Disabling eslint does not prevent errors from occurring for the unicorn/filename-case rule

I have a file called payment-shipping.tsx and eslint is throwing an error Filename is not in camel case. Rename it to 'paymentShipping.tsx' unicorn/filename-case However, the file needs to be in kebab case since it's a next.js page that s ...

Discover the steps to display a user's username following a successful login utilizing Passport.js

I want to display the message "Welcome back "username here" " to a user after they have logged in successfully on the website. The issue is that logging in with passport is not a typical request and response process, as the authentication occurs within th ...

Changing the source of the Carousel image in HTML when it is the active image

I have a unique setup with two carousels on a single page. My goal is to change the src of the first item in the carousel when the second item is clicked. Here is the code for the second carousel item: <div style="max-width: 20%; max-height: 20%;" cl ...

Using Vue.js as a view engine for ExpressJS

I'm on the hunt for a solution similar to React for ExpressJS, but tailored for Vue.js instead. Currently, I'm facing challenges when it comes to passing data from my database (mongoose) to my view. Right now, I'm utilizing the handlebars v ...

At times, the status code 0 and ready state 0 is returned by Ajax file uploads

After carefully reviewing the following thread: jQuery Ajax - Status Code 0? I was unable to find a definitive solution to my issue. Therefore, I am reaching out here in hopes that someone can guide me in the right direction. In my code, I have an Angul ...

Error message: Unable to access the state property of an undefined object

I've been attempting to integrate a react sticky header into my stepper component. However, I've encountered an issue where it doesn't render when added inside my App.js file. As a result, I've started debugging the code within App.js ...

Utilizing a dynamic value in an Angular directive

For my latest project, I am working on developing a basic JSON pretty-printer directive using angular.js. Here is the code snippet I have so far: (function(_name) { function prettyJson() { return { restrict: 'E', ...

jquery-enhanced tabs with versatile functionality

HTML: <ul class="tabs"> <li><a href="#tab-one" class="current">Residential</a></li> <li><a href="#tab-two">Commercial</a></li> <li><a href="#tab-three">Agricultural</a></li> < ...

What is the reason for the PHP condition not functioning properly unless I explicitly echo the variable?

When the variable is echoed in the code below, the condition works, but if it's not echoed, the condition fails to work. What could be causing this issue? The original code snippet: $msg=$_SESSION['$msg']; echo $msg; if($msg != null){ ?> ...

What is the best method for converting input files into FormData?

I recently created a form that allows users to upload both an audio file and an image file simultaneously. However, during testing, I noticed that the alert only displays basic data and does not include the form data. function PodcastUpload({ data }) { ...

The controls for the Bootstrap carousel component do not have a clear appearance

Trying to implement a Bootstrap carousel component but facing an issue with the controls not appearing transparent like in the example provided in the Bootstrap documentation. Check out the code snippet: <div class="carousel slide" id="s ...