Portfolio Image Custom Link – Topic Re-Opened

Hi Yigit!

Certainly! I was trying to figure out a way to include a “View Product” custom link text/button to my Masonry Portfolio Images whenever the user hovered over the image.

I was curious if I could achieve this by manipulating the Custom Link settings of the image (As Seen Here in Image 1), but you guys mentioned in the other thread that I could/should use html inside the image Title Element instead. This works great if the Element Title and Excerpt is set to “Display Neither”, so that whenever the image is enlarged you will see the following link (As Seen Here in Image 2). However, if the Element Title and Excerpt is set to display “Title”, and the Element Title and Excerpt Display Settings is set to display on “Hover”, then it breaks the Hover state (As You Can See Here in Image 3).

Here is what I was going to do with css if the html inside the image Title Element works with the HOVER states :)
I was going to insert a “View Product” Link/Button to link to it’s corresponding WooProduct, and, insert a “View Image” Link/Button (this link/button would simply be text without need for a link since clicking the image would enlarge the image).

Bottom
No Hover
Hover

Center Overlay with Text Links
No Hover
Hover

Center Overlay with Icons
No Hover
Hover

• This reply was modified 7 years, 12 months ago by Tflores87.

Hey Andy, thank you for providing the Support Policy link! I went ahead and reviewed it again :P

No worries, I am not asking for you guys to customize this. Yigit was curious what it is I was going to do if the html inside the image Title Element worked, so I put together a few examples in photoshop of what I was going to do.

The solution you guys provided was to use html inside the image Title Element, but it ended up breaking the grid.