katemelvindesign

Awesome, thank you @paul2009!

Thanks @paul2009 Unfortunately this does not help my situation. I had customized the CSS to make the caption pop-up on image hover. Specifically, when a user hover over the preview of a project I had worked on, my specific roles on the project were listed. I guess the work around here would be to create individual images to hover over each project image and edit the CSS.

Site URL: http://katemelvin.com Site: http://katemelvin.com On the desktop version of the homepage of my site, you used to be able to hover over an image and the caption would show. I did this through some custom CSS. But the text was just the regular caption text for an image block. With the recent upgrades, now there is no caption option. Am I missing something? Why did captions for images go away? Is there an alternative? Help center article about adding a caption to images that now seems outdated?: https://support.squarespace.com/hc/en-us/articles/205826048-Creating-hover-effects-for-your-images Thanks!

@tuanphan I was trying to do this with the project images on my homepage katemelvin.com. I think I got it working though through trying out your snippets of code. Thank you!

Amazing thank you so much @codeandtonic

Also @codeandtonic is there a way to make it not a link? And just apply it to plain text? I added it to my homepage -- https://katemelvin.com if you want to take a look. Hover over Dodgers fan. I just want it to be an element of surprise if someone happens to hover over certain words. I did change the code a little because it was hovering left and getting cut off. Not sure if I got lucky with the fixes or it's viable. //section[data-section-id="61cf597b13214352fe345442"]{ a:before{ display: block; z-index: 9; display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -55%); content: ''; background-position: center center; background-repeat: no-repeat; background-size: contain; width: 200px; height: 200px; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear; background-size: contain!important; box-sizing: border-box; border-bottom:0px; } a:hover{ &:before{ display:block; } }

Thank you SO much. Can you go into why it's a usability nightmare?

Hi @tuanphan -- Thank you for all your help in this thread! I am having trouble getting this to work for my own site. I'm rebuilding my home page here: https://katemelvin.com/home-1 I tried using this code found in this thread but it's not working. Any idea? Thank you 🙂

Site URL: https://hoodzpahdesign.com/ Hello, I am trying to create an effect similar to Hoodzpah Design's intro sentence, where you can hover over links and a gif pops up but goes away when you move the cursor. I have done some searching but can't seem to find the right combination of css to make it happen. Thanks! Kate katemelvin.com