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

Can we find a solution to optimize "Crystal Reports" for mobile browsers and make it responsive?

I'm in the process of making my entire Asp.net application responsive for mobile browsers by utilizing Bootstrap. However, I've encountered a challenge with making Crystal Report responsive for mobile browsers. If anyone has any advice on how to ...

cssasp.nettwitter-bootstrapcrystal-reports

managing jquery AJAX requests recursively, signaling completion to the browser

I have a situation where I need to continuously fetch data from an endpoint using a next token if there are more items available. The code snippet below illustrates how I'm currently fetching the data: function get_all_entities(campaign_id, page){ ...

javascriptjqueryajax

What is the best way to attach to the beforeSubmit event of a dynamically loaded AJAX form in Yii?

Recently, I encountered an issue with dynamically loading a form via AJAX and attempting to bind the beforeSubmit event. Strangely, the event didn't seem to work as expected, causing the form to submit and the browser to navigate to a new page. This b ...

javascriptjqueryajaxyii2

Ensure that the width does not decrease

Edited: included fiddle and code snippets I am facing an issue with the width of columns in my layout. The width of the columns is dynamically calculated based on the content they hold. However, when I filter the results using a search input for a specifi ...

htmlcssvue.js

Create a full-width slider using Materialize CSS framework

When using materializecss to create a slider, I encountered an issue where the image is full width but not full height, causing scrollbars to appear. What changes can I make to ensure the slider fills out my screen without any scrollbars? Additionally, I ...

javascriptjqueryhtmlcssmaterialize

What is the process for sending dynamic emails in Business Catalyst?

I'm currently using Adobe Business Catalyst for my project. I've set up a web form with several fields, including three dynamic fields from "Web Apps." One of the fields is called "Select Location." Each location has an associated email address ...

jqueryemailadobebusiness-catalyst

Exploring Material-UI: Leveraging makeStyles and CSS-In-JS for customizing library component styles

I'm currently utilizing Material-UI to construct a form using makeStyles and CSS-In-JS for styling purposes. I have a form component from the Material-UI library that I want to style according to my needs. My main focus is on how to address classes or ...

cssreactjsmaterial-uireact-hookscss-in-js

Tips for cropping an image using CSS with dimensions specified for width, height, and x and y coordinates

As I work on implementing a cropping feature using react-easy-crop, my goal is to store the user's image along with pixel coordinates that dictate their preferred cropping area. My objective is to utilize the parameters provided by react-easy-crop in ...

javascripthtmlcssreactjs

Troubleshooting problems with sending data in Jquery Ajax POST Request

I've spent a considerable amount of time searching for a solution to why my post request isn't sending its data to the server. Oddly enough, I can successfully send the request without any data and receive results from the server, but when attemp ...

javascriptajaxjquerypost

Adjust the text within the treeview node for proper alignment

My treeview has nodes that display text, but when the length of the text increases, it moves to the next line and starts one place before the upper text, causing alignment issues. Is there a way to use CSS or JavaScript to properly align the text? Regards ...

javascripthtmlcssjquery-ui

When using jQuery to focus on an input element, the cursor fails to show up

Looking to enhance user experience by focusing on an input element upon clicking a specific div. The HTML structure being used is as follows: <div class="placeholder_input"> <input type="text" id="username" maxlength="100" /> <div ...

javascripthtmljqueryfocustext-cursor

After closing, the position of the qtip2 is being altered

I've successfully integrated the qtip2 with fullcalendar jQuery plugin, which are both amazing tools. However, I'm encountering an issue with the positioning of the qtip. Here's the code snippet I'm using: $(window).load(function() { ...

javascriptjquerycssqtip2

Guide to display half of an image and allow for full image viewing upon mouse hover

After creating my bootstrap 4 website, I encountered an issue with the code below where only half of the image is displayed initially due to a conflict in the code. It also fails to work properly when moving the mouse after shifting the whole image from ri ...

javascripthtmlcssbootstrap-4

Generate an image, PDF, or screenshot of a webpage with the click of a button

I've been searching for a solution that would enable users to click a button and save an image or PDF of the current page. The content on the page is dynamic and dependent on user input, resulting in sequences displayed in various colors. I'm loo ...

phpjavascriptjqueryhtmlajax

Extracting the month and year from a datetime string: A simple guide

I am working with a JSON object that includes a field called Month with a string datetime value- { Month : "31-Jan-2022 12:00 AM (EST)" .... .... } Is there a way to extract the Month Name and Year from this string using JavaScript's dat ...

javascriptjqueryreactjs

What are some methods for accessing jQuery ajax result data in Internet Explorer versions 7 or 8?

So, I'm facing an issue with retrieving the resultCount variable in different versions of Internet Explorer. int resultCount = 3; mav.addObject("resultCount", resultCount); This is how my jsp code looks like: $.ajax({ url: ...., type: &ap ...

jqueryajaxinternet-explorer-8internet-explorer-7

Having trouble getting my parallax slideshow to work with jquery preventDefault

-UPDATE- After countless hours of online courses, tutorials, and programming, I finally completed my website! Check it out here: The site is almost where I want it to be, but there are a few remaining challenges: 1) AJAX: I'm struggling to get the ...

javascriptjqueryhtmlcssslideshow

Setting a maximum height using flex property of 1 while also enabling overflow

Imagine a scenario where you have a <div with a height specified as a percentage of its parent's height, and this <div contains a contenteditable element as its child. The goal is to make the child fill all available vertical space and scroll wh ...

cssflexboxoverflow

Retrieve Checkbox within a Span using Jquery

Trying to achieve the selection of a checkbox when a user clicks on a div using jQuery. The provided fiddle shows my attempt: http://jsfiddle.net/5PpsJ/ The code snippet I have written so far is as follows, but it doesn't seem to select the checkbox ...

javascriptjqueryhtmlasp.net

The light slider feature is experiencing technical difficulties within the Bootstrap model

I am experiencing an issue with the Light Slider in a Bootstrap modal. Strangely, when I press F12 for inspect element, the Light Slider starts working. For more details and to see the link provided in the comment below, can anyone offer assistance, plea ...

javascriptjquerycss