Displaying a variety of inline images with text floating beside each one

I have multiple images placed in divs adjacent to each other as shown below:

<div id='images'>
    <div class="iphoneimage">
        <img src="img1.jpg" height="300">
        <h5 class="size">1363 x 2048</h5>
    </div>

    <div class="iphoneimage">
        <img src="img1.jpg" height="300">
        <h5 class="size">1363 x 2048</h5>
    </div>
</div>

These elements are styled using the following CSS:

.iphoneimage {
    overflow: auto;
    width: 169px;
    float: left;
}
img {
    position: relative;
}
h5.size { 
    position: absolute; 
    top: 200px; 
    left: 20px; 
    width: 100%; 
}

I am attempting to display text on top of each image, but currently only one set of text is appearing over the first image.

htmlcss

Answer №1

To enhance the layout, consider incorporating position:relative into the .iphoneimage div.

.iphoneimage {
    overflow: auto;
    width: 169px;
    float: left;
    position:relative;
}

Fiddle

Answer №2

.iphoneimage {
    overflow: hidden;
    width: 200px;
    float: right;
    position:relative;
}
img {
    position: absolute;
}
h5.size { 
    position: relative; 
    top: 100px; 
    left: 10px; 
    width: 90%; 
}

<div id='gallery'>
    <div class="iphoneimage">
        <img src="photo1.jpg" height="250">
        <h5 class="size">1200 x 1600</h5>
    </div>

    <div class="iphoneimage">
        <img src="photo2.jpg" height="250">
        <h5 class="size">1024 x 768</h5>
    </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

Adjust Element Width Based on Scroll Position

I'm attempting to achieve a similar effect as seen here: (if it doesn't work in Chrome, try using IE). This is the progress I've made so far: http://jsfiddle.net/yuvalsab/op9sg2L2/ HTML <div class="transition_wrapper"> <div ...

javascriptjqueryhtmlcss

CSS3PIE is failing to function properly in Internet Explorer

Looking for a solution to achieve rounded corners in Internet Explorer? Consider using . In my CSS file named template.css, I have included the following code which is loaded when the page loads on Joomla 1.5. .form_field {color:#222 !important; border:2p ...

htmlcssjoomlacss3pie

Is there a way to conceal the contents of a page until all the images have finished loading?

I'm currently working on improving the performance of a website that is loading very slowly. I have already reorganized, compressed and minified the JavaScript and CSS files, but the main issue seems to be with the images. The site contains large imag ...

javascripthtml

Changing the background color with a switch function in ReactJS

After clicking a link, a view is rendered based on the "id" from a JSON. To enhance the user experience, I want to add a background color when a particular view renders and also toggle the style. This code snippet illustrates how the crawl is displaye ...

javascriptcssreactjs

What is the best method for transferring HTML tables to Excel with multiple tabs?

I have created a code that exports an HTML table into an Excel file. However, I now need to export multiple HTML tables into different tabs within a single Excel file. Here is the current code: Currently, when I click "Export To Excel," the Excel file is d ...

javascriptphpjqueryhtmlajax

How can I enable autofocus on a matInput element when clicking in Angular 6?

Is there a way to set focus on an input element after a click event, similar to how it works on the Google Login page? I've tried using @ViewChild('id') and document.getElementId('id'), but it always returns null or undefined. How ...

angularhtmlangular-material

Is there a way to prevent Django from automatically sanitizing HTML when inserting it into a template?

I'm feeling a bit puzzled about this situation because it appears that Django templates offer optional HTML filters, yet there seems to be an automatic process at play.. I am working on creating a demo app where the user triggers an action that execut ...

pythonhtmldjangotemplateshtml-sanitizing

How come my keyframes animation isn't functioning properly on my div element?

I am currently designing a custom animation for a checkers game. My goal is to create an effect where the checker piece moves slowly to its next spot on the board. Below is the CSS code I have used: @keyframes animateCheckerPiece { 0% {top: ...

javascriptjqueryhtmlcssdom

Exploring the 3D Carousel Effect with jQuery

After creating a 3D carousel using jQuery and CSS3, I am looking to enhance it with swiping support. While there are plenty of libraries available for detecting swipes, I specifically want the carousel to start rotating slowly when the user swipes slowly. ...

javascriptjqueryhtmlcss

Bootstrap table styling fails to be applied to dynamically generated tables via JavaScript

Hey there, I'm diving into the world of website development for the first time, just getting started a couple of days back. Although I have some experience with Python and C# programming, I'm facing challenges in generating an HTML table using J ...

javascripthtmlcssbootstrap-4

Filter posts on Blogger by unique terms

Currently, I have a code snippet designed to showcase blog posts based on tags. There is an option to modify the section that houses the loop: <b:loop values='data:post.labels' var='label'> Utilizing any of these variables: da ...

htmlxmlbloggerblogger-dynamic-views

Customizing the color of the navbar dropdown click event in Bootstrap with a bootswatch theme

I am currently struggling to change the color of a navbar dropdown click color. I am working with a theme that alters Bootstrap colors, specifically the Journal theme. To better illustrate the problem, here is a video link: Below is my code: <nav cla ...

htmlbootstrap-4

"Unlocking the Power of CK Editor for Maximizing Value and Effectively Managing

I have a form with a field titled Description. I am using CKEditor to pass the value entered into this field and store it in my database. Can someone assist me with this? Below is the code snippet: <div id="descriptionMore" style="margin-bottom:20px; ...

javajavascriptjqueryhtmlliferay

Adjusting the appearance of a JavaScript element based on its hierarchy level

Currently, I am utilizing Jqtree to create a drag and drop tree structure. My main goal is to customize the appearance of the tree based on different node levels. Javascript Tree Structure var data = [ { name: 'node1', id: 1, chi ...

javascripthtmlcssjqtree

Creating page borders in print CSS for each individual page is a helpful way to enhance the visual appeal

I am facing an issue where I have a lengthy HTML document that is ready for printing, but I need to add borders to every page. I tried adding body { border:2px #666 solid; padding:5px; } in the CSS code, which looked good in the HTML view, but not in the p ...

htmlcssprint-css

Tips for maintaining the nested collapsible table row within the main table row in a React MUI table

I am working on implementing a Material UI (MUI) table that includes collapsible table rows. The challenge I am facing is maintaining consistent border and background colors across all the rows, even when some are collapsed. Currently, the separate rows ar ...

javascriptcssreactjsmaterial-uifrontend

Why is it that when I click outside of the <html> element, the click event bound to the <html> element is triggered?

const html = document.querySelector('html') const body = document.querySelector('body') body.onclick = () => { console.log('body clicked') } html.onclick = () => { console.log('html clicked') } document. ...

javascripthtmlbrowser

Load divs, images, or scripts as they enter the viewport

Upon visiting the website , you may notice that certain elements are loaded only when they enter the viewport. I am interested in learning how to implement this feature and am curious about the specific JavaScript or CSS3 techniques utilized for achieving ...

javascriptcssload

What's the reason behind the presence of the a tag before the button in this

While working with Bootstrap 4, I noticed that the a tag is being displayed before the button when using the following code. Can anyone explain why? <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#navbar ...

csshtmltwitter-bootstrapbootstrap-4

Show a collection of items surrounding an image in order to form a circular menu

For my website, I'm looking to implement a circular navbar that will surround the user avatar. Using ul and li elements, I have created various options that are necessary. Is there a way to position all the navItems around the bottom half of the avata ...

htmlcssreactjssass