What is the best method for overlaying text on individual images in a slideshow?

Currently, I am delving into the world of jQuery, experimenting with various slideshows and attempting to incorporate text and effects.

In my endeavors, I stumbled upon this codepen that served as an excellent template. However, when I tried adding text over the images, it disrupted the fluidity of the slideshow, creating clutter and ultimately breaking the functionality. My goal is to have distinct quotes overlaying each of the three images.

Check out the codepen here

 ``<div id="slideshow">
  <div id="frame">
    <img class="slide" src="http://placehold.it/350x150/ffffff/f0265b&text=1">
    <img class="slide" src="http://placehold.it/350x150/ffffff/47d1c0&text=2">
    <img class="slide" src="http://placehold.it/350x150/ffffff/006400&text=3">
  </div>
</div>

If anyone has a solution to this issue, I would greatly appreciate your input!

jqueryhtmlcssslideshow

Answer №1

To achieve the desired effect, I recommend creating a container for the images and positioning it using position: relative. Then, you can add an element that is positioned absolute within the container to overlay your text.

var $frame = $('#frame');
   
setInterval( function() {
  var slides = $('.slide');
  slides.first().appendTo($frame);
}, 3000);
body { background-color: #ddd;}
#slideshow {
  position: relative;
  background-color: #ccc;
  border: 1px solid #555;
  border-top: none;
  box-shadow: 0 1px 9px #222;
  width: 60%;
  margin: 50px auto;
}
#frame {
  position: relative;
  background-color: transparent;
  width: 100%;
margin: 0 auto;
}
.slide:first-child {
  display: block;
  width: 100%;  
}
.slide img {
  width: 100%;
  display: block;
  max-width: 960px;
  height: auto;
  margin: 0 auto;
}
.slide:not(:first-child) {
  display: none;
}
.text {
  position: absolute;
  top: 0; left: 0; right: 0;
  background: rgba(0,0,0,0.5);
  color: white;
  margin: 0;
  padding: 1em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slideshow">
  <div id="frame">
    <div class="slide"><img src="http://placehold.it/350x150/ffffff/f0265b&text=1">
      <p class="text">foo</p>
    </div>
    <div class="slide"><img src="http://placehold.it/350x150/ffffff/f0265b&text=2">
      <p class="text">foo</p>
    </div>
    <div class="slide"><img src="http://placehold.it/350x150/ffffff/f0265b&text=3">
      <p class="text">foo</p>
    </div>
  </div>
</div>

Answer №2

One interesting technique is to enclose images within a div element that includes the image as a background, along with captions. This way, you can smoothly slide the entire div instead of just the image itself.

Answer №3

Take a look at this: 

var $frame = $('#frame');
   
setInterval( function() {
  var slides = $('.slide');
  slides.first().appendTo($frame);
}, 3000);
body { background-color: #ddd;}
#slideshow {
  position: relative;
  background-color: #ccc;
  border: 1px solid #555;
  border-top: none;
  box-shadow: 0 1px 9px #222;
  width: 60%;
  margin: 50px auto;
}
#frame {
  position: relative;
  background-color: transparent;
  width: 100%;
margin: 0 auto;
}
.slide {
  position:relative;
}
.slide:first-child ,.slide > img{
  display: block;
  width: 100%;
  max-width: 960px;
  height: auto;
  margin: 0 auto;
}
.slide:not(:first-child) {
  display: none;
}

.slide > div {
  position:absolute;
  padding:10px;
  background:rgba(0,0,0,.2);
  font-family:helvetica,tahome,serif;
  font-size:18px;
  bottom:0;
  left:0;
  right:0
  
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slideshow">
  <div id="frame">
    <div class="slide" >
      <div>
        Example Text for Slide No.1
      </div>
     <img  src="http://placehold.it/350x150/ffffff/f0265b&text=1">
    </div>
    <div class="slide" >
      <div>
        Example Text for Slide No.2
      </div>
     <img src="http://placehold.it/350x150/ffffff/47d1c0&text=2">
    </div>
    <div class="slide">
      <div>
        Example Text for Slide No.3
      </div>
      <img src="http://placehold.it/350x150/ffffff/006400&text=3">
    </div>
  </div>
</div>

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

Transform an HTML table string into JSON format

I discovered a useful library called table to JSON that allows me to convert an HTML Table to JSON using its ID (#testtable in the example below): var table = $('#testtable').tableToJSON(); alert(JSON.stringify(table)); However, I am interested ...

javascriptjqueryjsonhtml-table

Receiving 'Unexpected end of input' error when using a string as a JavaScript function argument

I am trying to implement an ajax request function in my project. This is the code snippet I have: function Reject(id, scomment) { jQuery.ajax({ type: "POST", url: "reject.php", data: {id: id, Scomment: scom ...

javascriptphphtmljqueryajax

Show a success message, clear the post data, and redirect back to the current page

I have a single web page with a contact form. When the form is submitted, I want it to redirect to the same page and display a success message that fades out after a few seconds. Additionally, I want the post data of the form to be cleared. The form also i ...

javascriptphpjquery

I desire my grid to exhibit an identical appearance to that of the jquery datepicker

I have an interactive element called the "open grid" that, when clicked on, reveals a grid of buttons. I'm looking for help with coding it so that instead of being displayed below the textbox, the grid of buttons can be hovered over the "open grid" li ...

jquerycssbuttongrid

Change the image size as you scroll through the window

While my opacity style is triggered when the page is scrolled down, I am facing an issue with my transform scale not working as expected. Any suggestions on how to troubleshoot this or any missing pieces in my code? Codepen: https://codepen.io/anon/pen/wy ...

javascriptjqueryscroll

Developing a custom library to enable Ajax capabilities in web applications

Currently, I am in the process of developing my own personal library. jQuery doesn't quite meet my needs, and I prefer having a clear understanding of what is happening within my code. Nevertheless, I'm encountering an issue with the ajax functio ...

javascriptjqueryajaxfunction

Sort columns using drag and drop feature in jQuery and AngularJS

Utilizing the drag and drop feature of jquery dragtable.js is causing compatibility issues with AngularJs, hindering table sorting functionality. The goal is to enable column sorting by clicking on the th label and allow for column rearrangement. Currentl ...

javascriptjqueryhtmlangularjs

Setting the appropriate width for the main div element using CSS

Imagine wanting to craft an HTML page featuring a primary div housing all of the content. In this scenario, the div should enclose other divs and remain centrally fixed on the page, similar to the image provided. How should one determine the appropriate w ...

csshtml

Is there a way to effectively test the jQuery animate functions such as fadeTo and fadeOut using js-test-driver?

Trying to create test cases for my JavaScript functions has become frustrating due to a specific issue I encountered. In my script, there is a section of code similar to the following: $("idOfTheDiv").fadeOut('fast'); or: $("idOfTheDiv").fade ...

jqueryunit-testinganimationjs-test-driver

Tips on accessing the v-model value with a parameter in VUE

Looking to access the v-model value using a parameter, I attempted the following code: <template> <div v-for="(item, idx) in data"> <input :id="item" :v-model="item"></input> <button @click=&q ...

javascripthtmlvue.js

Leveraging the power of the 'var' keyword in JavaScript when

I have a javascript code snippet that looks like this: var grade_type = document.getElementById("grade_type").value; gradesRef.set({ grade_type: firebase.firestore.FieldValue.arrayUnion(grade) }); However, when the data is stored i ...

javascripthtmlfirebasegoogle-cloud-firestore

The AJAX success callback function failed to execute in cases where the dataType was set to JSONP during Cross domain Access

type = 'math'; var ajurl = "sample.com&callback=myhandler"; var datas = "cateid=" + cateid + "&type=" + type + "&pno=" + pno + "&whos=" + whos; $.ajax({ type: "GET", url: ajurl, data: datas, contentType: "application/json; ...

javascriptjqueryajaxcross-domainjsonp

What is React.js's approach to managing CSS files?

Currently, I am enrolled in Bootcamp at Scrimba where they utilize an online platform for teaching various courses. One of the topics covered is React and involves working with CSS files. When working on my local machine, I typically use the index.css file ...

javascripthtmlcssreactjs

Simple method for validating a text box field using jQuery without the need for a form

I am looking for a way to activate jquery unobtrusive validation without a form using the specified pattern: <script type="text/javascript"> $('.btnAddAsync').click(function (e) { e.preventDefault(); // Avoid href p ...

jqueryajaxasp.net-mvcvalidationunobtrusive-validation

Issues with Youtube Subscription Functionality

I implemented the code below to embed a YouTube subscribe button on my website: <script src="https://apis.google.com/js/platform.js"></script> <div class="g-ytsubscribe" data-channel="GoogleDevelopers" data-layout="default" data-count="def ...

phphtmlyoutubeyoutube-api

Using HTML and PHP, I am able to automatically redirect users to another

In the mix of files A.html, B.php, and File C.php there was a creation of a button that redirects from A to B, carrying over values provided by the user in A: <form action="B" method=post> <tr><td colspan="2" align="center"><input typ ...

phphtml

Bootstrap allows for multiple items to be displayed on the same line, creating

I am currently utilizing Bootstrap framework and have a total of four items. However, the last item is displaying beneath the other three items instead of being on the same line. The current code snippet is as follows: <div class="text-center linksblok ...

csstwitter-bootstrap

Is it feasible to incorporate the CSS and Bootstrap (CDNs) specific to an HTML component without affecting the styling of other pages?

One way I am able to recycle the HTML component is using this code: $.get("nav.html", function(data) { $("#fulloptions").replaceWith(data) }) However, there’s a conflict because nav.html uses a different version of Bootstrap than my index file does ...

htmlbootstrap-4

How to effectively use flexbox to resize child elements in a CSS layout

My goal is to create a layout where a child element fills the entire flex box of a flex layout. Here is an example of the HTML structure I am using: <div class="parent"> <div class="child1"> should have 100px height </div&g ...

htmlcssflexbox

The jqgrid setCell function will erase any previously set formatter

When I use the setCell method in my jqgrid to set values for textboxes, it ends up removing the textbox formatter. Is there a way to keep the textbox intact and only replace the value? $("#acc_jqgrid").jqGrid('setCell', sel_id, 'jqgrid_accD ...

jqueryjqgrid