Is it possible to display a pop-up caption in the mobile view?

When I added a caption to my image, it only appeared when hovering over the symbol in the image. However, this feature doesn't work on mobile or tablet due to the image size. How can I make the caption appear when the image is clicked on mobile/tablet devices?

For example, I would like the caption to pop up outside of the image when it is clicked, similar to this: https://i.sstatic.net/uS6FJ.jpg

Thank you!

HTML

<div class="col-5 col-sm-2 ml-auto aboutMid aboutMid1">
    <figure class="cap-left">
        <img src="assets/about/about1.jpg" class="img-fluid">
        <figcaption>
            The house is a converted farm building featuring traditional wooden shutters and terracotta toof tiles
        </figcaption>
    </figure>
</div>

CSS


figure {
    display: block;
    position: relative;
    overflow: hidden;
}

figcaption {
    position: absolute;
    background: rgba(0,0,0,0.75);
    color: white;
    padding: 10px 20px;

    opacity: 0;
    bottom: 0;
    left: -30%;
    -webkit-transition: all 0.6s ease;
    -moz-transition:    all 0.6s ease;
    -o-transition:      all 0.6s ease;
}

figure:hover figcaption {
    opacity: 0.9;
    left: 0;
    font-size: 1em;
}    

Javascript (imported from Bootstrap)


<!-- jQuery first, then Tether, then Bootstrap JS. -->
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

Answer №1

Utilizing the Bootstrap 4 card utilities along with image overlays is highly recommended as they are compatible across all platforms.

For a quick start, check out this sample code snippet:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<style>
    .card-img-overlay {
        display: none;
    }
    .card:hover .card-img-overlay {
        display: block;
    }
</style>

<div class="container">
    <div class="row">
        <div class="col-6 offset-3">
            <div class="card bg-dark text-white">
                <img class="card-img" src="https://placehold.it/400" alt="Card image">
                <div class="card-img-overlay">
                    <h5 class="card-title">Card title</h5>
                    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                    <p class="card-text">Last updated 3 mins ago</p>
                </div>
            </div>
        </div>
    </div>
</div>


<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

Answer №2

If you're looking to implement a simple bootstrap modal that only appears on mobile devices or at specific window widths, you can easily achieve this with a straightforward approach.

Check out this fiddle for reference.

To ensure that your bootstrap modal doesn't inherit any unwanted custom styles, place it outside of any custom div elements.

Here's the Bootstrap modal that I used.

Simply use the following JavaScript snippet:

$("figure").click(function() {
  if ($(window).width() < 960) {
    $('.modal-body').html($('figcaption').text());
    $('#myModal').modal('show');
    }
});

This script will trigger the modal only when the user is on a small device (for example, under 960px in width).

Additionally, you can detect mobile devices by using the following method:

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
 // some code..
}

This mobile device detection technique can be found in this Stack Overflow thread.

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 Ajax to update a webpage by invoking a PDO function within a PHP class

Looking for assistance with filtering a list of files using a dropdown box and categories. I have a PHP class ready to handle the SQL query and results, but I'm eager to implement this through AJAX to avoid page refresh. Feeling stuck and seeking gui ...

The height of the parent div increases as its children grow when the browser is resized

I have a set of three divs aligned horizontally within a parent div. As the browser width changes, one of the child divs wraps under the other two when the width is reduced, transitioning them to a vertical alignment. Here are some visual examples: View i ...

Tips for customizing the appearance of the <select> <option> element with jQuery or CSS

What are some ways to style the <option> HTML tag, using jQuery or CSS? Any suggestions on styling the <option> tag? ...

What is the best way to align text and an arrow on the same line, with the text centered and the arrow positioned on the

.down { transform: rotate(45deg); -webkit-transform: rotate(45deg); } .arrow { border: solid black; border-width: 0 3px 3px 0; display: inline-block; padding: 30px; } <p>Down arrow: <i class="arrow down"></i></p> Looking to ...

Unable to modify the background image of a div using jQuery

I'm encountering an issue in my script where I tried to implement an event that changes the background-image of a div when a button is clicked, but it's not functioning as intended. Below is the code snippet: HTML <div class="col-md-2 image ...

The inner div overflowing at 100% dimensions

I'm working with an outer DIV that has a CSS property of position: fixed to serve as an overlay. Inside this, I have another div set to 100% width with a margin of 30px to create the appearance of an inner border frame. Unfortunately, the right and bo ...

Utilizing a custom font to emphasize the extended phrase in the following sentence

I've been trying to use word-wrap to break long words into the next line, but unfortunately it's not working as expected. You can view my JsFiddle code for reference. The divs on my page are generated dynamically, and here is an overview of what ...

The menu content has a 50% chance of appearing when the open menu button is clicked

Hey there, I'm currently facing an issue with a menu I created that slides open to the bottom when a button is clicked. The problem I'm encountering is that the content of my menu only appears about half of the time... I'm not quite sure how ...

Create a text container that adjusts its size based on the content within

My goal is to create a unique display using CSS: I want to add various texts and lines to fill in the white space on the left and right sides. I have made some progress with this http://jsfiddle.net/g5jtm/, but I am facing a few issues: The text width ...

Setting the line-height property in CSS to a value greater than the font-size property

Dealing with a frustrating issue where I want to align the top of an image with text, but the letters end up slightly below the line height. Check out this simple example featuring a classic movie: HTML: <img src="http://cf2.imgobject.com/t/p/w92/wcI ...

Working with Python and BeautifulSoup to retrieve <td> elements in a table without specified IDs or classes on HTML/CSS documents

While utilizing Selenium, Python, and Beautiful Soup to scrape a web page, I encountered the challenge of outputting table rows as comma-separated values due to the messy structure of the HTML. Despite successfully extracting two columns using their elemen ...

Delete any content that is not enclosed in tags

I am struggling with manually rendering Django forms and it's producing the following code. Is there a way to remove text without HTML tags, such as "Currently:" and "Change:", which are difficult to style with CSS? <div class="row align-cente ...

Picking and modifying a newly added HTML input element using Jquery

I am encountering a problem that I haven't been able to find a solution for through research or Google. I managed to successfully add multiple input boxes to my HTML/JQuery project, which are displaying correctly on the webpage. for (i = 0; i < ma ...

Using BeautifulSoup4 in Python to extract text data from a nested tag within an h1 element

Seeking assistance in extracting the text content within an anchor tag that is nested inside a heading tag. <h1 class="branded-page-header-title"> <span class="qualified-channel-title ellipsized"><span class="qualified-channel-title-w ...

Is it possible to nest a section tag within an anchor tag?

Is it possible to nest a section tag within an a tag? For example: <a href="mylink"> <section class=mysection> <h2>my headline</h2> <p>my paragraph</p> </section> </a> Thank you for your help ...

Tips for updating the appearance of material-ui table pagination

I'm looking to enhance the way table pagination is presented in material-ui. The current default display by material-ui looks like this: https://i.stack.imgur.com/d4k4l.png My goal is to modify it to look more like this: https://i.stack.imgur.com/A ...

Adding the text-success class to a Bootstrap 5 table row with zebra striping does not produce any noticeable change

I am encountering an issue with a Bootstrap 5 table that has the class table-striped. When a user clicks on a row, I have implemented some jQuery code to toggle the class text-success on the row for highlighting/unhighlighting purposes. The highlighting f ...

Tips for utilizing rowspan and colspan in BootstrapTable

I am creating a table using bootrapTable and would like to know how I can use rowspan or colspan to achieve a table layout similar to the one shown in this image: Click here for image description $table.bootstrapTable({ columns: [{ ...

custard stealth style of jquery's mobile CSS

Is there a way to switch the jquery mobile CSS to a desktop-friendly CSS when a user is not on a mobile device? I am looking for a platform or existing CSS that can accomplish this. ...

The center div is not functioning properly

After scouring numerous sources on the web, I have found various tips for centering a div. However, no matter what I try, there seems to be a persistent white space to the left of my div that I just can't seem to resolve. If you're curious, her ...