the element positioned absolutely within the carousel item is hidden underneath the subsequent item

I am facing an issue in owl carousel where my absolute element (placed in the carousel item) with the 'description' class is going behind the next item. I have tried various methods to bring it forward but without success. Can someone please assist me?

Here is an example of what I am trying to achieve: https://i.sstatic.net/c1QuG.jpg

<div class="owl-carousel topfeatured">
<div class="item">
    <div class="thumb" style="background-image: linear-gradient(-60deg, #fff 0%, rgba(255, 255, 255, 0) 100%), url(https://tinys.club/wp-content/uploads/2017/07/1343232_mkt-pm_got_s7_jon_po.jpg);"></div>
    <div class="description">
    </div>
</div>
...


.topfeatured {
    overflow: hidden;
    height: 400px;
}
.topfeatured .item {
    position: relative;
    height: 400px;
}
...

You can view the full code and test it in this fiddle: http://jsfiddle.net/4653f7xk/3/

htmlcssowl-carousel

Answer №1

Solution provided for an outdated query

To address the issue, simply remove the line of code that reads right: -30px. You can view the updated solution in action on this fiddle:

http://jsfiddle.net/abc123xyz/9/

Answer №2

To make the active slide stand out, apply this CSS class to give it a higher z-index compared to the non-active slides.

.owl-item.active {
  z-index: 20;
}

Next, style the .description class with the following properties:

.topfeatured .item .description {
    width: calc(100% + 100px);
    padding: 10px 30px;
    height: 150px;
    position: absolute;
    background: #263238;
    bottom: -170px;
    right: -50px;
    box-shadow: 0 0 60px rgba(0, 0, 0, 0.3);
    transition: 1s ease-in-out;
}

Check out the demo here

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

Using an npm package to include CSS styles in a stylesheet

I created an NPM package that includes a CSS file that needs to be included in my main CSS file. In a typical HTML CSS website, I would need to write @import url("./node_modules/web-creative-fonts/index.css") but what I really want is to simplify ...

cssnpmnpm-package

Issue with the camera functionality in phonegap 3.3.0 API on IOS platform

I am currently in the process of developing an application for iPad that will allow users to capture and store photos. I have encountered some difficulties while using the PhoneGap camera API library, as my code is not generating any errors which makes i ...

javascriptioshtmlcordovacamera

What is the best way to retrieve Select button values from a MySQL database and pass them to a different page?

I've been trying to code it, but I keep running into issues. The main objective was to allow the user to select a value from a MySQLi database and then send that value to another page. I know people recommend using AJAX for this purpose, so I attempte ...

phphtmlajaxmysqli

Arranging a collection of tiny divs or images side by side

Is there a way to stack multiple divs next to each other in a responsive manner, without causing any skew? I want them to line up neatly and adjust properly on different screen sizes. Should I consider using images for this or is there another method to ac ...

htmlcss

Having trouble with the dropdown menu in Bootstrap?

I'm having trouble creating a responsive dropdown menu. When I click on the dropdown items, nothing happens. Here's the code: <div class="navbar-header"> <button type="button" class="navbar-toggel" data-toggel="collapse" data-target="#m ...

javascripthtmltwitter-bootstrap

Adding space between the heading and the text underneath by placing a margin between h2

I am dealing with a situation where I have an <h2 class="landing-panel-title> containing a <span class="landing-panel-icon-right ion-ios-search-strong>. The second class on the span is from an icon font called ionicons. Despite this, it may not ...

htmlcss

Decrease the gap between Bootstrap horizontal form elements

Looking to enhance the visual appeal of my form controls, I am using Bootstrap 4 horizontal form to eliminate unnecessary spacing and create a more compact layout. Though I have applied the CSS snippet below to reduce spacing, there is still a noticeable g ...

cssbootstrap-4

Aligning jQuery Mobile Buttons in a List Divider

Seeking assistance with aligning buttons within a list divider in a jQuery mobile app. Take a look at this link to a jsFiddle demonstration I created where the button appears next to the text. Is there a way to align the button to the right without causing ...

cssjquery-mobile

When using React <p> and Tailwind, the text overflow occurs in either the X or Y axis, despite specifying Y specifically

I am building a React frontend using TailwindCSS 2.2, and I have these two texts inside a <p> dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd ...

htmlcssreactjstailwind-css

Updating image source dynamically with Flask

I am currently developing a face detection application using Flask. I aim to have the detected faces displayed in real-time on the HTML page. For the JavaScript aspect, I am utilizing getUserMedia to live stream camera images from the client to the server ...

javascriptpythonhtmlflask

How come my wrapper box doesn't extend to the full width of the screen when I set it to width: 100%?

Can someone explain why my wrapper box doesn't fill the whole screen when I use width: 100%, but it does when I use width: 100vw? I have set "width=device-width" on my page and the minimum width for the page is 1400px. Thank you all for your assistan ...

css

Utilizing Shadow Root and Native Web Components for Seamless In-Page Linking

An illustration of this issue is the <foot-note> custom web component that was developed for my new website, fanaro.io. Normally, in-page linking involves assigning an id to a specific element and then using an <a> with href="#id_name&quo ...

javascripthtmltypescriptweb-componentnative-web-component

The Hamburger Menu Opens Smoothly But Refuses to Shut Down

Below is the HTML code for my website. I have managed to open the hamburger menu with the code, but I am facing an issue where it won't close. I have checked the HTML structuring using a validator and found no errors. Additionally, I have reviewed my ...

htmlcssfrontendbootstrap-5

What is the best way to apply focus to a list element using Javascript?

I recently created code to display a list of elements on my webpage. Additionally, I implemented JavaScript functionality to slice the elements. Initially, my page displays 5 elements and each time a user clicks on the "show more" link, an additional 5 ele ...

javascripthtmlaccessibility

JavaScript code encountered an error: "SyntaxError: missing ) after argument list" near the end of the file

Upon encountering an issue, the following error message appears: SyntaxError: missing ) after argument list (line 120) Even though the JavaScript components have been validated without any bracket issues being flagged. An attempt was made to troublesh ...

javascripthtmljsond3.js

The statusText variable for getXMLHTTP object is not found when the status is not equal to

Earlier, I posted about this issue before isolating the problem. Now that I have isolated it, I wanted to repost with a clearer focus on the two functions causing the problem. Whenever I update my State, it triggers the getCity function. The call is being ...

phpjavascriptajaxhtmlmysqli

The <HTML> element is just a bit too big for the screen

When viewing my webpage on mobile, the video background does not fit the screen properly (it fits in landscape orientation). Here is the video tag I am using: <video autoPlay loop muted playsInline className='absolute w-full h- ...

htmlcssreactjsmobiletailwind-css

Registered symbol appears as random characters in Internet Explorer web browser

When working on my HTML code, I encountered an issue with displaying a registered sign. While the entity code I used worked perfectly in Chrome, Internet Explorer showed an 'A' character before the sign. I tried various codes like -&#174; - ...

csshtml

Do not include JavaScript-generated CSS when running Grunt's un-css task

Recently, I started using Grunt for minifying JavaScript and CSS files and I must say, it's an incredible tool. As I delved deeper into Grunt, I discovered the uncss module, which aids in optimizing the load time and size of CSS files, especially for ...

javascriptcssangularjsgruntjsgrunt-contrib-cssmin

Issues with CSS columns in Firefox version 22 have been causing some problems

Trying out css columns: implementing columned content with a wrapper div: Click here to view the demo Everything seems to work fine in webkit and older versions, but in Firefox v22 there seems to be an issue (no columns displayed and behavior varies with ...

cssfirefox