CMS Development

ADonohue
Member

Expand to click on webpage

Hi - I have added HTML, CSS and Javascript code to create a modal on my webpage. It is now clickable but no image is popping up when you click it.  Would love insight on how to fix this!

 

Page for reference: https://www.ascensionrs.com/services

0 Upvotes
6 Replies 6
dennisedson
Community Manager
Community Manager

Expand to click on webpage

@ADonohue 

Looking at that small image that you have hidden, it appears that you have mixed non inline css with html 🤔

See below:

<div class="span12 widget-span widget-type-custom_widget #myImg { border-radius: 5px; cursor: pointer; transition: 0.3s; } #myImg:hover {opacity: 0.7;} The (background) .modal display: none; Hidden by default position: fixed; Stay in place z-index: 1; Sit on top padding-top: 100px; Location of box left: 0; top: width: 100%; Full width height: height overflow: auto; Enable scroll if needed background-color: rgb(0,0,0); Fallback color rgba(0,0,0,0.9); Black w/ opacity Content (Image) .modal-content margin: block; 80%; max-width: 700px; Caption (Image Text) - Same Width as #caption text-align: center; color: #ccc; padding: 10px 150px; Add Animation Zoom .modal-content, animation-name: zoom; animation-duration: 0.6s; @keyframes zoom from {transform:scale(0)} {transform:scale(1)} Close Button .close absolute; 15px; right: 35px; #f1f1f1; font-size: 40px; font-weight: bold; .close:hover, .close:focus #bbb; text-decoration: 100% Smaller Screens @media only screen and (max-width: 700px) data-widget-type="custom_widget" data-x="0" data-w="12">

Could you share the code that you have set try to make this work?  Maybe just a quick snippet of the html, css and js you used.

Thanks,

Dennis




HubSpot Community Developer ShowMake sure to subscribe to our YouTube channel
where you can find the HubSpot Community Developer Show
ADonohue
Member

Expand to click on webpage

Hi! It is the black image here https://www.ascensionrs.com/services (I currently hid a smaller version of this with display: none html) until I figure out how to get it to properly expand. "click to expand the image"

0 Upvotes
Oezcan
Top Contributor | Diamond Partner
Top Contributor | Diamond Partner

Expand to click on webpage

Hello @ADonohue ,

 

I've already written a solution to this, take a look here.

https://community.hubspot.com/t5/Blog-Website-Page-Publishing/zoom-in-on-image/m-p/549611#M5702

 

She will redirect you to this page. 
https://www.w3schools.com/howto/howto_css_modal_images.asp

 

I hope I can help you with that.

Best regards,

 

Özcan


check
Did my post help answer your query? Help the Community by marking it as a solution

ADonohue
Member

Expand to click on webpage

Unfortunately, that does not help. I have spent hours using the W3 article advice yesterday. I have connected the html, the CSS and the javascript. The image is now clickable but it doesnt pop up anything.. as I mentioned. Definitely need more help here.

0 Upvotes
dennisedson
Community Manager
Community Manager

Expand to click on webpage

@ADonohue 

What element should be clicked to trigger the modal?

Thanks,

Dennis




HubSpot Community Developer ShowMake sure to subscribe to our YouTube channel
where you can find the HubSpot Community Developer Show
ADonohue
Member

Expand to click on webpage

Hi! It is an image (that I currently hid with display:none) until I figure
out how to get it to properly expand. "click to expand the image"
0 Upvotes