Expand to click on webpage

[ADonohue]

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

[dennisedson]

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

[ADonohue]

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"

[Oezcan]

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

[ADonohue]

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.

[dennisedson]

@ADonohue 

What element should be clicked to trigger the modal?

[ADonohue]

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"