Jump to content

John1490

Member
  • Posts

    2
  • Joined

  • Last visited

Reputation Activity

  1. Like
    John1490 got a reaction from deaton72 in How do add basic overlay/hover on Gallery block items on 7.1 (currently bare)   
    Hey all.  if you have a gallery block in 7.1, I have managed to make the caption overlay the image quite successfully, whilst having hover effects applied aswell.  The easiest way to do this is add HTML text to the caption itself.  This allows you to have much more control over the text and font without the need to apply 100 lines of CSS.  
    Images attached are of my new website.  You can see the text overlay and on the second image, you can see the hover effect.  This was all done using simple CSS.  If you want text to appear and rise perhaps on hover, that once again is extremely simple by using simple CSS to place the text below the images & set opacity to 0.  Then on image hover, you set opacity to 100 & have a transition timer to ensure it looks seamless with the rise time.  
    If you need CSS help, id be happy to send across.
     
    Goodluck and hope this helps. 


  2. Like
    John1490 got a reaction from JasonNash in How do add basic overlay/hover on Gallery block items on 7.1 (currently bare)   
    Hey all.  if you have a gallery block in 7.1, I have managed to make the caption overlay the image quite successfully, whilst having hover effects applied aswell.  The easiest way to do this is add HTML text to the caption itself.  This allows you to have much more control over the text and font without the need to apply 100 lines of CSS.  
    Images attached are of my new website.  You can see the text overlay and on the second image, you can see the hover effect.  This was all done using simple CSS.  If you want text to appear and rise perhaps on hover, that once again is extremely simple by using simple CSS to place the text below the images & set opacity to 0.  Then on image hover, you set opacity to 100 & have a transition timer to ensure it looks seamless with the rise time.  
    If you need CSS help, id be happy to send across.
     
    Goodluck and hope this helps. 


  3. Like
    John1490 got a reaction from yuyang in How do add basic overlay/hover on Gallery block items on 7.1 (currently bare)   
    Hey all.  if you have a gallery block in 7.1, I have managed to make the caption overlay the image quite successfully, whilst having hover effects applied aswell.  The easiest way to do this is add HTML text to the caption itself.  This allows you to have much more control over the text and font without the need to apply 100 lines of CSS.  
    Images attached are of my new website.  You can see the text overlay and on the second image, you can see the hover effect.  This was all done using simple CSS.  If you want text to appear and rise perhaps on hover, that once again is extremely simple by using simple CSS to place the text below the images & set opacity to 0.  Then on image hover, you set opacity to 100 & have a transition timer to ensure it looks seamless with the rise time.  
    If you need CSS help, id be happy to send across.
     
    Goodluck and hope this helps. 


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