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?

Quote

@media screen and (max-width:767px) {
div#page-section-61ce35e89673080e2f919022>.row>.col>.row>.col {
    width: 50% !important;
    float: left !important;
}
}

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