CSS Thumbnail no subtitle - subtitle only when showing enlarged thumbnail - html

I am working on a jekyll page.
On the page in question I have a series of pictures that I would like to show.
I would like to show a subtitle of an image but only when clicking on the thumbnail i.e. when the enlarged image is shown. Ideally it would have a semi-opaque background and the font-color would be white.
<div class="row">
<div class="col-xl-6 Keyfeature-selection pt-10 pb-40">
<div class="s-details-img mb-30">
<a href="{{relative_url}}/assets/img/service/details/01.jpg">
<img src="{{relative_url}}/assets/img/service/details/01.jpg" alt="">
</a>
</div>
</div>
<div class="col-xl-6 col-lg-12 service-details">
<div class="s-details-img mb-30">
<h3> Intuitive QGIS Interface
</h3>
<p> The software can be used through the famous QGIS interface, making digitizing and layer creating easy and straight-forward
</p>
</div>
</div>
</div>
I looked at figcaption but was only able to put the subtitle directly below the thumbnail. However I do not want to see the subtitle under the thumbnail.
Any ideas how to do that?

Just been playing around with this it might help.
codepen
<a class="lightbox" href="#dog">
<img src="https://i.huffpost.com/gen/749263/original.jpg"/>
</a>
<div class="lightbox-target" id="dog">
<figure>
<img src="https://i.huffpost.com/gen/749263/original.jpg"/>
<figcaption>add text here</figcaption>
</figure>
<a class="lightbox-close" href="#"></a>
</div>
just playing with clickable images to enlarge on click and display text.
have a play and see if you can get the outcome you're after.

Related

I am trying to use lightbox for a popup window that has youtube url but it is not working

All that it displays when I click on it is black background.
Here is my code:
<div class="cbp-item art illustration">
<a class="cbp-caption cbp-lightbox" data-title="Abstract Art Museum" href="https://www.youtube.com/embed/watch?v=LnwPD69Fbh4"> <div class="cbp-caption-defaultWrap">
<img src="assets/images/portfolio/masonry/art.jpg" class="portfolio-thumbnail" alt="" >
</div>
<div class="cbp-caption-activeWrap">
<div class="cbp-l-caption-alignCenter">
<div class="cbp-l-caption-body">
<div class="cbp-l-caption-title">3D Abstract Museum</div>
<div class="cbp-l-caption-desc">Video</div>
</div>
</div>
</div>
</a>
</div>
I tried to change URL and use embed code. I also tried to research more on it but it kept on showing lightbox for images with code that had modal involved in it. I have seen this code work before without the use of modal but I feel like something else is missing.

Create div with image and text as one link

So I'm trying to replicate a link button I saw when browsing the web. The div contains the href link, title for the card, link for the image and further text. For me the only part of it with any kind of link is the title for the card. I'm a bit stumped on what to do, any suggestions?
<div id="advice-card">
<a href="tyres.html">
<span id="title">How long do tyres last for?</span>
</a>
<div id="advice-card-media">
<img src="assets/images/car-tyres.jpg" alt="Single tyre with dark background" height="240" width="240">
</div>
<div id="advice-card-content">
Here we go through how long car tyres last and what to look for when buying new tyres.
</div>
</div>
If I understand what you expect then try put any html element into and it will work like button.
<div id="advice-card">
<a href="tyres.html">
<span id="title">How long do tyres last for?</span>
<div id="advice-card-media">
<img src="assets/images/car-tyres.jpg" alt="Single tyre with dark background" height="240" width="240">
</div>
<div id="advice-card-content">
Here we go through how long car tyres last and what to look for when buying new tyres.
</div>
</a>
</div>

How do I make a text align under a logo using css?

I am trying to make a subheading for a logo in my website. I am having trouble with aligning it under the logo. I have placed a p tag inside a div and tried to position the div but I am not sure how it works.
Here is a photo of what the website currently looks like.
below is the code for it.
HTML:
<!--logo goes here-->
<div class="logo">
<img class="img" src="photos/logo1.png" alt="the logo">
</div>
<div class="textbox">
<p class="subtext"> We care about you </p>
</div>
Put the text in the same div where the logo is:
<div class="logo">
<img class="img" src="photos/logo1.png" alt="the logo">
<p class="subtext"> We care about you </p>
</div>
Both and are block elements, by default those tags go to the new line.
So what was your intention, putting the subheading right under the logo?

Image gallery with different image sizes in bootstrap

I have two images with two different size. I am using bootstrap in my project. But I cant place the images together which looks like both have same dimension. I have gone through similar questions and tried a lot. Please help me to sort this out.
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<a href="http://placehold.it/2048x1536" target="_blank">
<img src="http://placehold.it/2048x1536" alt="Nature">
</a>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<a href="http://placehold.it/1280x720" target="_blank">
<img src="http://placehold.it/1280x720" alt="Nature">
</a>
</div>
</div>
my css is
.thumbnail img {
height:250px;
width:100%;
}
You can do it by putting the picture as background-image for the 'div' tag and setting value of 'background-position' as 'stretch'.
Said that, if the images are of different resolution and you fit them into the same-size container it might look pixelated at times.

Web link in html duplicating itself?

Newb at html and web... anything beyond usage. I'm not even sure this is the correct forum for this question.
I placed a link in the html for a container (image and text) that I had inserted into the footer of our page.
I inserted the code for the link to surround the image and text sections of that part of the container.
<div class="blah blah"
<a href="etc.etc">
<img
Continue on until after the last line of text
</a>
</div>
It was nice, clean, and the link encompassed the image and both lines of text.
I check an hour later, and every line of text and the image now have the link info repeated individually, and strangely duplicated between the lines of text for no apparent reason.
Running the site with odoo, based on bootstrap if I remember correctly.
Why is it duplicating the link information repeatedly?
It works fine, it's just ugly when going in to edit the code, and I'm not sure if I'm doing something wrong to cause it to happen.
Edit:
here is the current code, after apparent self duplication:
<div class="col-md-4 text-center">
<a href="http://edited/" target="_blank" title="edited
http://edited/">
<img class="fa-suitcase img-rounded" src="/website/image/ir.attachment/1143_1cc91ea/datas" style=""/>
</a>
<h3 class="mt8 mb0">
<a href="http://edited/" target="_blank" title="edited
http://edited/">
<span style="color:#FFFFFF;">edited</span>
</a>
</h3>
<div class="text-muted">
<a href="http://edited/" target="_blank" title="edited
http://edited/">
<span style="color:#D3D3D3;">edited</span>
</a>
</div>
</div>
When it was originally entered, it was this:
<a href="http://edited/" target="_blank" title="edited
http://edited/">
<div class="col-md-4 text-center">
<img class="fa-suitcase img-rounded" src="/website/image/ir.attachment/1143_1cc91ea/datas" style=""/>
<h3 class="mt8 mb0">
<span style="color:#FFFFFF;">edited</span>
</h3>
<div class="text-muted">
<span style="color:#D3D3D3;">edited</span>
</div>
</div>
</a>