Jump to content

Cover page with html/css code and mouse animation hover over

Recommended Posts

Site URL: http://www.fabionlus.it

hi, sorry I am not an expert

My site is www.fabionlus.it

I would like insert a new cover-page with my logo-image (file attached) with an image-map with  link in every different color. Also I would like an effect with the mouse when hover over the image link.

So I have two problems:

1) can I have a cover page with code html or css ? where is the place to insert the code?

2) I already created a page with an image-map (www.fabionlus.it/organigramma), but I don't know the code to insert for an animation when the mouse hover the link. How can I modified this code? 


  .image-overlay-wrap {
    display: inline-block; /* shrinks container to image size */
    fill: transparent;
    position: relative;
  .image-overlay-wrap img { /* optional, for responsiveness */
    display: block;
    height: auto;
    max-width: 100%;
  .image-overlay-wrap svg {
    left: 0;
    position: absolute;
    top: 0;

<div class="image-overlay-wrap">

  <img src="https://images.squarespace-cdn.com/content/v1/57271dad45bf21105b665dc4/1610898023019-3PZZKRS5AR0ML7UDJSMO/ke17ZwdGBToddI8pDm48kIXUpvhBrBZPKoLIxiWlZx97gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QPOohDIaIeljMHgDF5CVlOqpeNLcJ80NK65_fV7S1UXl0WNPbz0CWI4YJ6ICv0aefsTCV_7tpSB4NE-W_A31GG6v6ULRah83RgHXAWD5lbQ/Organigramma.png" />
  <svg viewBox="0 0 2000 2600">
    <a alt="Fabio" target="_top" title="Fabio" xlink:href="https://images.squarespace-cdn.com/content/v1/57271dad45bf21105b665dc4/1610896398394-XAH06CUBXS0Y0Z263XPP/ke17ZwdGBToddI8pDm48kJUlZr2Ql5GtSKWrQpjur5t7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QPOohDIaIeljMHgDF5CVlOqpeNLcJ80NK65_fV7S1UYapt4KGntwbjD1IFBRUBU6SRwXJogFYPCjZ6mtBiWtU3WUfc_ZsVm9Mi1E6FasEnQ/Fabio.png">
      <rect height="500" width="450" x="1" y="270" />

thanks a lot and sorry for my bad English

Logo FabiOnlus piccolo.png

Link to comment
  • Replies 1
  • Views 282
  • Created
  • Last Reply


This topic is now archived and is closed to further replies.

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.