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? 

<style>

  .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;
    
    }
    
  </style>

<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" />
      
      </a>
      

thanks a lot and sorry for my bad English

Logo FabiOnlus piccolo.png

Link to comment
  • Replies 1
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

1. You can add a Code Block > Paste HTML/CSS. Then share link to that. We can give the code to remove header,footer to make it become "cover page"

2. Which hover? Can you describe in detail?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • 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.