When the cursor is placed over it, a new div is layered on top of an existing

Currently, I am working on a project with thumbnails that animate upon hovering using jQuery. One of the challenges I have encountered is adding a nested div inside the current div being hovered over. This nested div should have a background color with some opacity so that you can still see a bit of the underlying div. Additionally, text within this nested div should be displayed.

While I have successfully added a border around the thumbnails using jQuery's addClass function, applying a background color and text to the added class seems to be causing issues. Can anyone provide guidance on where I might be making a mistake?

If you'd like to take a look at my code, here is an example:

http://jsfiddle.net/hTB3q/

$('.video-thumbnail').hover(function () {
    $(this).animate({
        top: '-15px'
    }, 500);
    $(this).show('video-overlay');

Thank you in advance for your help!

jquerycsshoveraddclass

Answer №1

If you're looking for a solution, consider using the CSS method provided below: http://jsfiddle.net/xQdsN/2/

 .video-thumbnail {
     position:relative;
     margin:0 auto;
     width:20% !important;
     display:inline-block;
     border:1px solid red;
     height:100px;
 }
 .video-thumbnail img{
     max-height: 100%;
     max-width: 100%;
     position: relative;
 }
.video-thumbnail:hover>.video-overlay{
    bottom: 0px;
    opacity: 1;
}
 .video-overlay {
     position: absolute;
     background: rgba(0, 0, 0, 0.5);
     top: 0px;
     left:0px;
     right:0px;
     bottom: 100%;
     overflow: hidden;
    opacity: 0;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
 }

This solution does not require jQuery.

Answer №2

Voilà!

To enhance the appearance of your website, you must make some adjustments to the .video-overlay CSS by modifying the selector for the .video-overlay.

 .video-overlay {
     display:none;
     background: rgb(58, 58, 58);
     /* Fallback for browsers that do not support rgba */
     background: rgba(58, 58, 58, .5);
     height:100%;
     width:100%;
     position:absolute;
     top:0px;
     left:0px;
     float:left;
 }

Javascript

$('.video-thumbnail').hover(function () {
    $(this).animate({
        top: '-15px'
    }, 500);
    $('.video-overlay', this).show();
}, function () {
    $(this).animate({
        top: '0px'
    }, 500);
    $('.video-overlay', this).hide();
});

Explore the JS fiddle example here http://jsfiddle.net/CkpZw/

Answer №3

Give it a shot

$('.thumbnail-video').mouseover(function () {
    $(this).stop().animate({
        top: '-20px'
    }, 600);
    $(this).find('.video-cover').show();
}, function () {
    $(this).stop().animate({
        top: '0px'
    }, 600);
    $(this).find('.video-cover').hide();
});

See it in action: Demo

Answer №4

$('.video-thumbnail').hover(function () {
    $(this).animate({
        top: '-15px'
    }, 500);

    $('.video-overlay', this).stop().fadeIn();
}, function () {
    $(this).animate({
        top: '0px'
    }, 500);
   $('.video-overlay', this).stop().fadeOut();
});

To see the code in action, check out this Fiddle link: http://jsfiddle.net/UYM4N/

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

The functionality of the Datatable column select filter sort() is malfunctioning when there is a link present

I am encountering an issue with the datatable column select filter. One of the columns in my table contains HTML link tags, which is causing unsorted select options to appear at the top. <th><a href="{{route('customer.information', ...

jquerylaraveldatatabledatatables

The Jquery UI dialog refuses to close when the Inner Application is closed

I'm facing an issue with a jQuery dialog box. I have set up a division under the dialog, and within that division, I've loaded an Iframe that contains a URL. The problem arises when I click the close button on the URL window - the dialog box re ...

jqueryajaxjquery-ui-dialog

How to Position an Input Text Beside an Icon Image Using JqueryMobile

Just starting out with jquery mobile and css! Check out my jsfiddle.net/mapsv3/kWJRw/1/, when I use an icon on the left side, the input text gets cut off and I can't see the end of it. ...

htmlcssjquery-mobile

What is the best approach to managing this scenario where the document is ready?

Just a quick question. I have several JavaScript functions written in this format: var app={ start:function(){ //do something and call calculate }, //end start calculate:function(){ //do more stuff } //end calculate }; //en ...

javascriptjquery

When utilizing a Slick carousel with three slides and setting autoPlay to true, the slider-nav behaves as if there are five slides

I am currently using the Slick carousel plugin and I want to feature a display of 3 photos. The issue is that when I set slidesToShow=2, everything works perfectly fine, but when I try to set slidesToShow=3, which equals the total number of slides, the bot ...

javascripthtmlcsscarouselslick.js

Align the headers of columns to the right in the AgGrid widget

Is there a way to align the column headers to the right in AgGrid without having to implement a custom header component? It seems like a lot of work for something that should be simple. You can see an example here: https://stackblitz.com/edit/angular-ag-g ...

javascriptcssangularag-gridag-grid-angular

Is it possible to use D3 for DOM manipulation instead of jQuery?

After experimenting with d3 recently, I noticed some similarities with jquery. Is it feasible to substitute d3 for jquery in terms of general dom management? This isn't a comparison question per se, but I'd appreciate insights on when it might b ...

javascriptjqueryhtmld3.js

Moving an array in AngularJS from one file to another

As someone new to AngularJS, I am facing an issue with integrating two separate files that contain modules. Each file works fine individually - allowing me to perform operations on arrays of names. However, when switching views, the arrays remain stored un ...

javascriptjqueryangularjsnode.js

Having trouble with constructing cascading dropdown menus in ASP.NET Core 7 MVC through the use of JQuery and the ajax.googleapis.com platform

As I've been delving into the world of cascading dropdown lists, my search for examples using ASP.NET Core 7 led me to stumble upon an interesting example on a different StackOverflow post, which referred to this site. However, I encountered a roadbl ...

jqueryasp.net-core-mvccascadingdropdownasp.net-core-7.0

Can a piece of code be created that generates the XPath for a specific element?

I'm interested in finding out if there is a way to automatically generate an XPath by simply selecting an element, eliminating the need for manual updates when changes occur in HTML files on websites. I welcome any suggestions or alternatives that can ...

javahtmlcssseleniumselenium-webdriver

if a condition is not being properly assessed

Currently, I am working on a $.ajax call to retrieve data in JSON format. Within this JSON data, there is an element called "status." My code snippet checks if the value of `data.status` is equal to "success" and performs some actions accordingly. Despite ...

phpjavascriptjqueryajaxif-statement

What is the best method for uploading an image to the server side using JQuery AJAX and without any additional libraries in an ASP.NET web form

Hey there, I recently discovered a code that allows me to drag and drop an image into a designated zone for display, and it works like a charm. However, despite numerous attempts, I have been unsuccessful in uploading the file. I understand that the path ...

c#jqueryajaxdrag-and-drop

The functionality of jQuery click events seems to be disabled on the webpage, however, it is working perfectly fine on jsFiddle

After thoroughly checking the js tags and ensuring everything is properly closed, it's frustrating when the JavaScript suddenly stops working. The code functions perfectly in JSFiddle, leading me to believe that the issue may lie with something I&apos ...

javascriptjqueryhtmlcss

Utilize the jQuery ajax post method within each loop to handle asynchronous requests, ensuring that the

I am currently working on a jQuery ajax function that is embedded within an each function as it needs to be executed for each post on the website. $('.post .button').each(function() { $(this).click(function() { $.ajax({ url: 'action ...

phpjqueryhtmlcssajax

Displaying elements above my React sidebar

I am working on developing a Login application with a landing page using React Router and Redux. In order to have a Sidebar that is always present in all the components within the application, I have setup the Sidebar component as a route that is constantl ...

javascriptcssreactjs

What is the best way to apply CSS styles to a child div element in Next.js?

I'm currently working on enhancing the menu bar for a website project. Utilizing nextjs for my application I am aiming to customize the look of the anchor tag, however, encountering some issues with it not rendering correctly. Here is a snippet of ...

javascriptcssreactjsnext.js

Unable to apply 100% height to flex child element

When it comes to creating a layout for my website, I have a simple idea in mind. I want the body content to take up at least 100% of the height of the page. This setup works perfectly on desktop screens, but when I switch to a mobile view (which changes th ...

javascriptcssreactjsflexboxstyled-components

sticky bootstrap datepicker anchored to the top of the screen

Currently, I am working on a form that includes a date picker using the bootstrap datepicker In this setup, I have hidden the main bootstrap field and added three custom fields. When any of these fields are clicked, the calendar should open next to them. ...

javascripthtmljquerycss

I'm struggling to understand why the jQuery find() method isn't functioning as expected

UPDATE: In a twist of events not caused by syntax errors, but rather by a loading issue with the html template, it turns out that the checkbox update was happening prematurely. So if you're searching for an element that seems to be missing, it may sim ...

javascriptjqueryhtml

Executing an AJAX request using a combination of jQuery and Javascript to access a webpage located on an external domain

The question at hand is quite straightforward, but finding the answer might not be as easy. It's all part of the fun! ...

jqueryajaxdnsexternal