The content is being moved following the jQuery fadeIn transition

I created a jQuery slider for a client's demo site. (Demo: )

After the text (which is actually an image) fades in over the orange background, it moves about 20 pixels to the left and down. Can anyone explain why this is happening?

Answer №1

Divide the rule for .home_slider li.current .featured_wrap (line 271) into two separate rules:

.home_slider li .featured_wrap {
    background: url("img/image_text_area_bg.png") no-repeat scroll 0 0 transparent;
    bottom: -17px;
    height: 314px;
    left: -10px;
    position: absolute;
    width: 627px;
}

.home_slider li.current .featured_wrap{
    z-index: 200;
}

Answer №2

When tackling this issue, I decided to focus on adjusting the absolute positioning of both the current and non-current elements.

.slider_home li.current .text_featured {
    position: absolute;
    z-index: 300;
    bottom: 35px;
    left: 80px;
}

.slider_home li .text_featured {
    position: absolute;
    z-index: 300;
    bottom: 18px;
    left: 70px;
}

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

Issues with Hovering over Button Contained in Slider

I can't seem to figure this out. It should be a simple fix. I have 5 slider images with black buttons that link to different galleries. I want the button background color to change on hover, but it's only working on one of the sliders. It seems ...

Create a dynamic image positioned alongside text specifically designed for mobile devices

One of my challenges involves implementing a responsive image in Bootstrap (3.3.7): <div class="col-sm-2 text-center"> <img class="img-responsive center-block " src="img/1.png" style="max-width: <p>I would like to include some gua ...

Font icon not appearing when toggling the class "before"

I am attempting to utilize two classes, both with a :before pseudo-element. When the target class is hovered over, the two classes swap. This functionality works correctly in Safari, but in other browsers, the icon at the bottom does not display properly. ...

Removing a value from an array using Jquery when an item is deselected from a dropdown

I'm currently facing a challenge in my project where I need to remove values from an array when they are unselected from a multi-select dropdown list. Adding values using push() works fine for me, but removing deselected values is proving to be more d ...

Ways to enhance the data for my YouTube video uploads version 3

Currently facing an issue where Google has restricted my daily queries to 10,000. I am in search of a solution to adjust my chunksize either up or down. Uncertain about the exact amount to increase or decrease to limit the number of queries per upload, her ...

Transforming dates from JSON and showcasing them on a DataTable

I'm facing an issue with my local JSON file where the dates are being rendered in a DataTable as /Date(1350028800000)/ (10/12/2012). I came across this thread which talks about converting the date format, but I need help figuring out how to implement ...

The background image fails to load the specified image

I am encountering an issue with utilizing background-image in the style of my HTML page. I am currently developing a login page for my Django application, and when I preview the page, the background image does not appear. Strangely, this code was functioni ...

A useful Javascript function to wrap a string in <mark> tags within an HTML document

I have a paragraph that I can edit. I need to highlight certain words in this paragraph based on the JSON response I get from another page. Here's an example of the response: HTML: <p id="area" contenteditable> </p> <button class="bt ...

The functionality of JQuery stops functioning once ajax (Node.js, PUG) is integrated

I've been attempting to incorporate a like feature on my blog post website. When I click on the likes count, it's supposed to trigger an ajax call. In my server.js file, there's a function that handles the POST request to update the number ...

Need to swiftly modify values of css attributes?

Here is a snippet of the code I am working with: <div></div> <button> Go </button> div { width: 50px; height: 50px; border: 1px solid #ccc; } var bgs = ['red', 'blue', 'yellow', 'green&apo ...

At times, the CSS fails to load at first and does not refresh correctly when using F5 or CTRL F5, yet it occasionally loads when clicking on links

After dedicating a full day to trying to solve this issue, I am reaching out for some assistance. As a newcomer here, I apologize if this question has been asked before (I did search extensively and found nothing). The website I'm constructing for my ...

Issues have been reported regarding compatibility between iOS7, jquery.touchSwipe, on click and webkit-touch-callout

I'm in the process of developing a web application, but I've encountered an issue with iOS7 where there seems to be a conflict between jquery.touchSwipe and my "on click" events. Interestingly, the web app functions perfectly on older iOS versio ...

What could be causing Typed.js to not function properly in my situation?

Having an issue with typed.js not functioning properly. Here is the code snippet: <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="js/jquery-1.11.3.min.js"></script> <!-- Include all compiled plugins ...

Using jQuery and Modernizr for CSS3 and Javascript transitions support in Internet Explorer

Looking for a way to add support for button hover effects in IE 7-9 on this Codepen.io project. Can anyone help? For example, I'm trying: transition-duration: 0.5s; transition-property: all; transition-timing-function: ease; margin-top: 5px; I atte ...

JQuery method for extracting a specific span's content from a div

I am faced with extracting specific text from a span within a div element. Below is the code snippet for my Div: '<div class="dvDynamic_' + pid + '"><p hidden="true">'+pid+'</p><span class="count_' + pid ...

Jquery's .text() and .html() methods seem to be malfunctioning

Utilizing a jQuery function: $("#btn1").click(function(){ $("p").text("") } Each time the button is clicked, the .text() field fails to load. When I modify the value of .text to a shorter string, it functions correctly. ...

Tips for utilizing the sticky-top class with Bootstrap 4 grid system

Has anyone had success using the sticky-top class in a grid layout? I'm having trouble getting it to work. <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"> <div class="container-fluid ...

What could be causing these cards to not show up correctly?

I am currently incorporating Angular Material's cards in a material grid. Here is the code snippet that I am working with: http://codepen.io/anon/pen/YWwwvZ The issue at hand is that the top row of images extends off the screen at the top, and the b ...

CSS - reduce the size of an element rather than the entire page

Looking to create a page with 2 divs where the first div automatically shrinks and adds scrollbars when the browser window height is decreased, while the second div maintains its height. Wondering if this can be achieved using only CSS. <div class="s ...

Utilizing VueJS to transfer information for constructing a pricing plan chart

This is my first experience with VueJS, so I would greatly appreciate any advice or alternative methods to solve the issue. You can view my progress so far here. I am working on creating a pricing plan table where users can explore four different payment ...