Jump to content

CSS help for hover transition on portfolio page

Recommended Posts

Hi there, really dusty with coding and this seems like it should be simple but I haven't found an answer...

I am trying to create a hover on portfolio page images, where the image becomes slightly faded and the title does a quick (.5sec) fade in on a hover, center of the image. That's it.

I found the code to do it with a gallery caption (although it doesn't include the fade and the margin code seems to pull the images beneath up rather than just the title) but it doesn't work when I try it with portfolio.

.gallery-caption p{color:white!important}
.gallery-caption {text-align:center} 
.gallery-caption {font-size:2rem!important} 
.gallery-caption {margin-top: -20%} 
.gallery-caption {opacity:0!important; transition-duration:0.5s}
.gallery-grid-item:hover .gallery-caption {opacity:1!important; transition-duration:0.5s}

Thanks so much 

Edited by MissA9
Link to comment
41 minutes ago, MissA9 said:

Hi there, really dusty with coding and this seems like it should be simple but I haven't found an answer...

I am trying to create a hover on portfolio page images, where the image becomes slightly faded and the title does a quick (.5sec) fade in on a hover, center of the image. That's it.

I found the code to do it with a gallery caption (although it doesn't include the fade and the margin code seems to pull the images beneath up rather than just the title) but it doesn't work when I try it with portfolio.

.gallery-caption p{color:white!important}
.gallery-caption {text-align:center} 
.gallery-caption {font-size:2rem!important} 
.gallery-caption {margin-top: -20%} 
.gallery-caption {opacity:0!important; transition-duration:0.5s}
.gallery-grid-item:hover .gallery-caption {opacity:1!important; transition-duration:0.5s}

Thanks so much 

Let's share your site url so we can give suggestion

I did similar effect on gallery section

https://beyondspace7-1.squarespace.com/?password=1234

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
1 minute ago, MissA9 said:

https://gardenia-mandolin-besh.squarespace.com/config/pages/5fb82bc32ad3d329581d7a49

 

password - 1234

 

I did see your link but when I pasted that nothing happened.

Your site is private

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
5 minutes ago, MissA9 said:

https://gardenia-mandolin-besh.squarespace.com/config/pages/5fb82bc32ad3d329581d7a49

 

password - 1234

 

I did see your link but when I pasted that nothing happened.

Let's enable the password

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
12 minutes ago, MissA9 said:

let me know if it works now

password 1234 not correct

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
1 hour ago, MissA9 said:

Can you try it again, it wouldn't work in safari but worked in chrome for me.

The page that I am trying to figure out is under the heading "work"

.tweak-portfolio-grid-basic-image-aspect-ratio-34-three-four-vertical .portfolio-grid-basic .grid-item {
  position: relative;
}
.tweak-portfolio-grid-basic-image-aspect-ratio-34-three-four-vertical .portfolio-grid-basic .grid-item:hover .portfolio-text  {
  opacity: 1;
}
.portfolio-grid-basic .grid-item .portfolio-text  {
  position: absolute;
  width: 100%;
  z-index: 9999;
  opacity: 0;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  transition: 0.5s opacity;
  font-weight: bold;
}

This may help

image.png.a0a2a133476ced6512b916bf874a84aa.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

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.