Improvement html code

I have a joomla 3 site with a template gantry 5. When you are on [login to view URL] And you click on on the image with a vase We switch to [login to view URL] We should switch to [login to view URL] Because it is this link that I put in the HTML code. I want my HTML code to be improved so that the correct link of the image appears correctly, and that if I exchange this link with another, the new link is also displayed correctly. The html code of the particle with the photo with the vase is: <p class="frame-hover"><a href="fr/deco/[login to view URL]"><img src="images/[login to view URL]" alt="vase en verre souffle bouche orange bleu a decor de poisson 5" /></a> <a href="fr/deco/vases/[login to view URL]" class="readon" style="color: #fff;"></a> </p> <div class="g-contentlist-desc" style="margin: 0.5rem 0px 1.5rem; color: #808080; font-family: sourcesanspro, Helvetica, Tahoma, Geneva, Arial, sans-serif; font-size: 16px; background-color: #ffffff;"> <div class="g-contentlist-desc" style="margin: 0.5rem 0px 1.5rem; color: #808080; font-family: sourcesanspro, Helvetica, Tahoma, Geneva, Arial, sans-serif; font-size: 16px; background-color: #ffffff;"><center> <h2 class="product-name" style="margin: 0px; font-size: 12px; font-family: Arial, Helvetica, sans-serif; font-weight: normal; color: #203548; padding: 0px; line-height: 1.35; text-align: center; background-color: #ffffff;">Vases</h2> </center></div> <center> <p><a href="fr/deco/[login to view URL]" class="button button-2" style="background: #11a6d7; text-decoration: none; color: #ffffff; display: inline-block; font-family: lato, Helvetica, Tahoma, Geneva, Arial, sans-serif; font-weight: bold; font-size: 0.9rem; border: 2px solid transparent; margin-bottom: 0.2rem; padding: 0.375rem 1.25rem; vertical-align: middle;">Découvrez Plus</a></p> </center></div> <style type="text/css"> .frame-hover{ position: relative; } .frame-hover:hover .frame-hover-title,.frame-hover:hover .frame-hover-text,.frame-hover:hover .readon span{opacity:0}.frame-hover:hover .readon:before,.frame-hover:hover .readon:after{opacity:1}.frame-hover .frame-hover-tag{position:absolute;top:1rem;color:#fff;background:rgba(0, 0, 0, 0.75);border-radius:3px;display:inline-block;font-family:"lato", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;font-weight:700;font-size:0.7rem;padding:0.15rem 0.75rem;text-transform:uppercase}.frame-hover .readon:before,.frame-hover .readon:after{position:absolute;opacity:0;-webkit-transition:opacity 0.35s;-moz-transition:opacity 0.35s;transition:opacity 0.35s}.frame-hover .readon:before{background:rgba(107, 185, 240, 1);width:100%;height:100%;top:0;left:0;content:""}.frame-hover .readon:after{color:#fff;content:"\f15c";top:50%;left:50%;font-size:3.5rem;font-family:FontAwesome;margin-top:-3rem;margin-left:-1.5rem} .frame-hover .readon::before { background: #11a6d7 none repeat scroll 0 0; content: ""; height: 100%; left: 0; top: 0; width: 100%; } </style>