Pop up caption on mobile view?

Question

So, I created this caption inside my image, to show up when the user hover with the mouse over a symbol as you can see on the image

As expected (I guess), it doesn't work on mobile/tablet because of the size of the image.

How can I make it so when the user clicks on the image (on mobile and tablet size) for the caption to pop up (outside of the image, so the user can read it?

Like so:

Thanks

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;
}

figure:before { 
    content: "?"; 
    position: absolute; 
    background: rgba(255,255,255,0.75); 
    color: black;
    width: 24px;
    height: 24px;
    -webkit-border-radius: 12px;
    -moz-border-radius:    12px;
    border-radius:         12px;
    text-align: center;
    font-size: 12px;
    line-height: 24px;
    /* Only Fx 4 supporting transitions on psuedo elements so far... */
    -webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    -o-transition: all 0.6s ease;
    opacity: 0.75;  
}

figure:hover:before {
    opacity: 0;
}

.cap-left figcaption { bottom: 0; left: -30%; }
.cap-left:hover figcaption { left: 0; }
.cap-left:before {  bottom: 10px; left: 10px; }

My JS 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>

Roman · Answer 1 · 2018-01-19T14:13:43.347

0

You could use a simple bootstrap modal, which you would only trigger if you are on a mobile device or a certain window width.

Here is a fiddle

Add a bootstrap modal and make sure it does not get any unwanted custom css, you can add it outside of all your custom div to prevent that.

Bootstrap modal, which I used

Then you use simple JS:

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

It checks on click whether you are on a small device and (in my case under 960px width) and if true and opens the modal, otherwise nothing will happen.

In addition you could check for mobile devices like this:

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

The last part is from:

What is the best way to detect a mobile device in jQuery?

edited Jan 19 '18 at 14:13

answered Jan 19 '18 at 13:43

Roman

2,219
3
23
76

I copied, to try and did not work. Am I forgetting something? the top Scripts part I believe are from Bootstrap? – gridMd Jan 19 '18 at 14:03
You checked the fiddle? Which version of bootrap do you use? – Roman Jan 19 '18 at 14:04
For modals you need `bootstrap.css` and `bootstrap.js` – Roman Jan 19 '18 at 14:05
I have the bootstrap implemented yes. What happen is "the caption now appears, but since it is too big, it doesn't show all, and the modal doesn't come out.. bootstrap-4 – gridMd Jan 19 '18 at 14:06
You need to make a fiddle yourself then, so I can check whats wrong. Probably you click on the figure? My example works with a click on figcaption, but it is easy to make it work with figure, depends what you need. – Roman Jan 19 '18 at 14:08
I need it to be on the image (for mobile only). Let me make a fiddle – gridMd Jan 19 '18 at 14:10
I updated the fiddle and the answer. Also dont forget to add jQuery above bootstrap.js – Roman Jan 19 '18 at 14:14
I must be doing something wrong... gonna post on my question the JS and jquery I imported from Bootstrap to see if it is correct. – gridMd Jan 19 '18 at 14:19
Its not a modal, but the caption appearing inside the image, like on desktop but of course you can't read.... I am super puzzled xD – gridMd Jan 19 '18 at 14:28
You are missing the css: `` – Roman Jan 19 '18 at 14:33
gonna try again – gridMd Jan 19 '18 at 14:34
Here is the example with your css and js files: [Fiddle](https://jsfiddle.net/sh46ruvq/3/) – Roman Jan 19 '18 at 14:34
this is my page. Can you check why it isn't working? https://jsfiddle.net/TryFiddleRee/mbku9yt3/#&togetherjs=Ig9EPxq2Hp – gridMd Jan 19 '18 at 14:40
tested on iPhone 6, iPad2 and One Pus 5 – gridMd Jan 19 '18 at 14:55
It works for me, make the preview of the fiddle smaller and reload, it considers the initial preview bigger then 767px. – Roman Jan 19 '18 at 14:56
try here on your phone: railsend.rc8.me and you will see what I mean – gridMd Jan 19 '18 at 15:11

score 0 · Answer 2 · answered Jan 19 '18 at 13:49

Consider using Bootstrap 4 card utils with image overlays because they work everywhere.

Here's an example to get you started:

<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>

Pop up caption on mobile view?

2 Answers2