Message displayed on picture carousel

<div class="slider">
  <div>
    <img src="http://kenwheeler.github.io/slick/img/fonz1.png" />
           <p class="projectname">Project</p>
                <p class="clientname">Client Name</p>
  </div>
  <div>
    <img src="http://kenwheeler.github.io/slick/img/fonz2.png" />
           <p class="projectname">Project</p>
                <p class="clientname">Client Name</p>
  </div>
  <div>
    <img src="http://kenwheeler.github.io/slick/img/fonz3.png" />
           <p class="projectname">Project</p>
                <p class="clientname">Client Name</p>
  </div>
  <div>
    <img src="http://kenwheeler.github.io/slick/img/fonz1.png" />
           <p class="projectname">Project</p>
                <p class="clientname">Client Name</p>
  </div>
  <div>
    <img src="http://kenwheeler.github.io/slick/img/fonz2.png" />
           <p class="projectname">Project</p>
                <p class="clientname">Client Name</p>
  </div>
  <div>
    <img src="http://kenwheeler.github.io/slick/img/fonz3.png" />
           <p class="projectname">Project</p>
                <p class="clientname">Client Name</p>
  </div>
</div>

.slider {
    width: 500px;
  margin:  auto;
}

img {
    width: 500px;
    height: 200px;
}


   .projectname{
text-align:left;
font: 30px/30px 'grotesque_mtextracondensed', 'Arial Black', 'Arial Bold', sans-serif;
text-transform: uppercase;
padding:0 0 0 20px;
background-color:red;

  }

.clientname {
text-align:left;
font-size: 15px;
font-style: italic;
padding:0 0 0 20px;
background-color:red;

  }


$('.slider').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    dots: true,
    infinite: true,
    cssEase: 'linear'
});

https://jsfiddle.net/5ox31m2a/69/

Hello there,

Essentially, I have an image slider with text below each image. I am attempting to position the text on top of the image rather than below it. However, when I do this using a negative margin-top, the background doesn't display as intended.

This is the result I achieved: https://i.sstatic.net/v82zi.png

Despite having a background color set for the text, it's not visible when positioned over the image.

In conclusion, I want the text to sit on top of the image with the red background showing properly.

Answer №1

Experiment with altering the position of text using absolute and adjust the top/bottom values accordingly.

View Demo Here

Answer №2

Give this a shot and then customize it to your liking:

<div>
    <img src="http://kenwheeler.github.io/slick/img/fonz3.png" />
    <span>
           <p class="projectnaam">Project</p>
           <p class="klantnaam">Client Name</p>
    </span>
  </div>

div {
    position: relative;
}

span { 
    position: absolute;
    bottom: 0;
    z-index: 2;
}

Answer №3

$('.slider').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    dots: true,
    infinite: true,
    cssEase: 'linear'
});
.slider {
    width: 500px;
  margin:  auto;
}

img {
    width: 500px;
    height: 200px;
}


   .projectnaam{
text-align:left;
font: 30px/30px 'grotesque_mtextracondensed', 'Arial Black', 'Arial Bold', sans-serif;
text-transform: uppercase;
padding:0 0 0 20px;
background-color:red;

  }

.klantnaam {
text-align:left;
font-size: 15px;
font-style: italic;
padding:0 0 0 20px;
background-color:red;

  }
  .main{position:relative}
  .content{position:absolute;bottom:15px;}
<link href="https://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.min.js"></script>
<div class="slider">
  <div class="main">
    <img src="http://kenwheeler.github.io/slick/img/fonz1.png" />
          <div class="content">          
           <p class="projectnaam">Project</p>
                <p class="klantnaam">Klantnaam</p></div>
  </div>
  <div class="main">
    <img src="http://kenwheeler.github.io/slick/img/fonz2.png" />
                 <div class="content">          
           <p class="projectnaam">Project</p>
                <p class="klantnaam">Klantnaam</p></div>
  </div>
  <div class="main">
    <img src="http://kenwheeler.github.io/slick/img/fonz3.png" />
           <div class="content">          
           <p class="projectnaam">Project</p>
                <p class="klantnaam">Klantnaam</p></div>
  </div>
  <div class="main">
    <img src="http://kenwheeler.github.io/slick/img/fonz1.png" />
               <div class="content">          
           <p class="projectnaam">Project</p>
                <p class="klantnaam">Klantnaam</p></div>
  </div>
  <div class="main">
    <img src="http://kenwheeler.github.io/slick/img/fonz2.png" />
           <div class="content">          
           <p class="projectnaam">Project</p>
                <p class="klantnaam">Klantnaam</p></div>
  </div>
  <div class="main">
    <img src="http://kenwheeler.github.io/slick/img/fonz3.png" />
             <div class="content">          
           <p class="projectnaam">Project</p>
                <p class="klantnaam">Klantnaam</p></div>
  </div>
</div>

The link provided below should be helpful for your reference.

[https://jsfiddle.net/5ox31m2a/73/]

Answer №4

When considering adding position:relative, it may be beneficial if margin-top is suitable for your needs.

 .projectnaam,.klantnaam
  {
    position:relative;
  }

  .projectnaam
  {
    margin-top: -80px;
  }

https://jsfiddle.net/5ox31m2a/75/

Answer №5

Web Development Example

<div style="width: 500px; height: 200px;">
<img src="http://kenwheeler.github.io/slick/img/fonz1.png" />
<div style="position: absolute;">
    <p class="projectnaam">Project</p>
    <p class="klantnaam">Client Name</p>
</div>

Cascading Style Sheets (CSS)

img {
    width: 500px;
    height: 200px;
    position: absolute;
}
.projectnaam {
    text-align:left;
    font: 30px/30px 'grotesque_mtextracondensed', 'Arial Black', 'Arial Bold', sans-serif;
    text-transform: uppercase;
    padding:0 0 0 20px;
    background-color:red;
    margin-top: 100px;
}

View Online Demo

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

Bootstrap 4 experiences issues with modal dialogs

I am experiencing an issue with my code not working on Bootstrap 4. When I click on the 'overview' button, the page darkens but the dialog does not appear. This functionality worked fine with the old version of Bootstrap. Can someone please assis ...

Ways to restrict the quantity of Firebase compound indexes required for querying with various filters

I'm in the process of developing a Firestore project that includes group chats and forums where users can filter posts based on various criteria: Number of likes Presence of attachments (photos and/or files) 4 Tags (Questions, Exams, Assignments, Not ...

Navigating with Anchors, Styling and jQuery

Firstly: Apologies in advance for any language errors as English is not my native tongue. :) The Scenario Here's the deal: I'm attempting to create a single button that, when clicked by the user, automatically scrolls down to the next DIV. Each ...

Arranging images in a row with the help of :before and :after styling

Looking to use the pseudo selectors :before and :after to create a border around a div with images, but running into some issues. The :after image is not positioning correctly on the right side of the element and the text is dropping below the image. Check ...

Is it a jQuery photo gallery that showcases images sourced directly from a database?

I'm feeling a bit stuck with my coding and could really use some assistance. I am currently working on implementing a jquery gallery plugin that pulls images from a database using a PHP script instead of directly from a folder on the server. <?php ...

Obtain HTML tags from RSS CDATA section

Is there a way to extract HTML tags from a CDATA tag in an RSS feed? I have utilized a basic jQuery function to retrieve the JSON object from the RSS, below is my code: $.get("someURL", function(data) { console.log('InGet'); ...

Using jQuery to manage multiple page requests on a single page

In my current project using Codeigniter, I encountered a challenge of loading multiple paginations on one page. After exploring various forums and websites, I decided to implement multiple methods and views to achieve this using jQuery. The code snippet I ...

Using jQuery accordion to showcase JSON information

Currently in the process of developing a new app and decided to utilize jQuery EasyUI for assistance. Progress is being made, but it's clear that this project is a learn-as-you-go situation. Where I currently stand: I've successfully retrieved ...

generate a series of nested divs within one another

I am looking to create a custom nested loop that will generate div elements based on the content of my h1 and h2/h3 tags. I understand this may have been covered in other inquiries, so any guidance would be appreciated :) Here is the initial HTML: <h1& ...

Unable to change Gutters to 0 in the .container-fluid class in Bootstrap 5.2

I have gone through all the answers related to my question, but I couldn't find a solution for it. Below is the HTML code with Bootstrap 5.2 that I am working on: <section id="title"> <div class="container-fluid"> ...

The app's connection issue persists as the SDK initialization has exceeded the time limit

We are currently facing an issue when trying to publish a new manifest for our app in the store. The Microsoft team in India is encountering an error message that says "There is a problem reaching the app" during validation. It's worth noting that th ...

Cutting out the lowest identification that is not a certain object

A real-time counter showing the viewers of a news article on a website using Laravel Jetstream. .leaving(user => { this.participants.splice( this.participants.indexOf(user, 1)); }) .joining(user => { this.participants.push(user); ...

Pedaling back and forth along a sequence

Is there a way to implement forward and backward buttons for a clickable list without using arrays, as the list will be expanding over time? I have already achieved changing color of the listed items to red, but need a solution to navigate through the list ...

Webpack is throwing an error stating that it cannot find a module with the relative path specified

Here is the structure of my app (excluding the node_modules directory): ├── actions.js ├── bundle.js ├── components │   ├── App.js │   ├── Footer.js │   ├── Link.js │   ├── Todo.js │   └─ ...

Execute javascript function upon user scrolling to a designated section in the webpage

Is there a method to trigger a unique function every time a user scrolls to a different div or section of the page? ...

Add the value of JQuery to an input field rather than a select option

Is there a way to append a value to an input field using JQuery, instead of appending it to a select option? Select option: <select name="c_email" class="form-control" ></select> JQuery value append: $('select[name=&q ...

Use Jquery to add unique styles to specific words within a paragraph

I am looking to specifically style a particular word within a dynamic div for example, <div id="info">{$info}</div> prints <p>here you can get info about somnething. if you want more info about something then click here....</p> ...

Issues with a jQuery ajax request

Recently delving into jQuery and finding it enjoyable so far. However, I've encountered an issue with an ajax call and could use some assistance. Here's the code snippet for my ajax call: // Initiating the ajax request $.ajax({ // PH ...

The function 'toBlob' on 'HTMLCanvasElement' cannot be executed in react-image-crop because tainted canvases are not allowed to be exported

Currently, I am utilizing the react-image-crop npm package for image cropping purposes. Everything works perfectly when I pass a local image as props to the module. However, an issue arises when I try to pass a URL of an image fetched from the backend - th ...

Sometimes the function setFromObject(mesh) returns inaccurate values

THREE.Box3.setFromObject(*object*) is returning inaccurate values. I will demonstrate my process in understanding this issue: I am creating 2 meshes using vertices. The first one using the triangle() function, and the other using trapezoidForm(). var tri ...