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.
How do add basic overlay/hover on Gallery block items on 7.1 (currently bare)
in Customize with code
Posted
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.