Currently revamping my outdated website to make it responsive. I tend to piece together code snippets without fully grasping them, so seeking straightforward guidance. The original site used subcontent divs for captions toggle. You can view it here: http://www.nancychuang.com/projects/mtc/ , where caption links are displayed below images. For the new site, I chose a budget-friendly template and have been customizing it.
I found it challenging to integrate the original captions into the new template as they were positioned using basic nested tables. It appears that displaying text underneath the images in the current template was not feasible, so I needed a less intrusive alternative. Managed to implement figcaption script by adapting code from css-tricks SlideinCaptions. So, the updated site will resemble this: .
figure {
display: block;
position: relative;
float: left;
overflow: hidden;
margin: 0 20px 20px 0; }
figcaption {
position: absolute;
background: black;
background: rgba(0,0,0,0.75);
color: white;
padding: 10px 20px;
opacity: 0;
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-o-transition: all 0.6s ease; }
figure:hover
figcaption { opacity: 1; }
figure:before {
content: "?";
position: absolute;
font-weight: 800;
background: black;
background: rgba(255,255,255,0.75);
text-shadow: 0 0 5px white;
color: black;
width: 24px; height: 24px;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
text-align: center;
font-size: 14px;
line-height: 24px;
-moz-transition: all 0.6s ease;
opacity: 0.75; }
figure:hover:before { opacity: 0; }
.cap-bot:before { bottom: 10px; left: 10px; }
.cap-bot figcaption { left: 0; bottom: -30%;}
.cap-bot:hover figcaption { bottom: 0; }
The figcaption script functions on touchscreens, although the mechanism behind it eludes me! There's no mention of touch or click in the code (thus unclear how to reverse the action). On desktops, moving away from the image hides the caption, while on mobile devices, the caption remains fixed once activated. Since the text is relatively large on mobile screens, ensuring users can hide it is crucial. Either allowing users to tap anywhere to remove the caption or mimicking the original hidediv approach with a link for users to click:
<DIV id="subcontent1">
<p class="caption"><a href="http://maetaoclinic.org/" target="blank">Mae Tao Clinic</a>, founded by Dr. Cynthia Maung in 1989, serves as the primary care facility for numerous Burmese residents along the border. Offering a wide range of services, the clinic assists refugees, uninsured migrant inhabitants of Mae Sot, and Burmese individuals crossing the border due to healthcare access challenges.
<p class="caption"><a class="caption" href="javascript:dropdowncontent.hidediv('subcontent1')">HIDE</a></p></td>
</DIV>
*related: Can you specify the width of the hover block with figcaption, similar to how I did with the original subcontent divs? Unclear what 24px denotes in the code...a minimum width perhaps? but no maximum?
Your assistance is much appreciated! Thank you!