Adding hover text to projects

Site URL: https://www.brightendesigns.com/gallery

I'm trying to add a hover text over the images on my projects page, but keeping the titles underneath. I want it to say "see more" when you hover over the image, but I still want the titles below the images. Is this possible??

Password for my website is Brighton

20 hours ago, graceface93 said:

Site URL: https://www.brightendesigns.com/gallery

I'm trying to add a hover text over the images on my projects page, but keeping the titles underneath. I want it to say "see more" when you hover over the image, but I still want the titles below the images. Is this possible??

Password for my website is Brighton

Try adding to Home > Design > Custom Css

section[data-section-id="61dc8e4d2fb1e453c7c6598a"] .portfolio-grid-basic .grid-item .portfolio-text {
  position: absolute;
  width: 100%;
  padding: 0 10px;
  margin-top: 0;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
}

section[data-section-id="61dc8e4d2fb1e453c7c6598a"] .portfolio-grid-basic .grid-item .portfolio-text:after {
  content: 'See more'
}

section[data-section-id="61dc8e4d2fb1e453c7c6598a"] .portfolio-grid-basic .grid-item:hover .portfolio-text {
  opacity: 1;
}
section[data-section-id="61dc8e4d2fb1e453c7c6598a"] .grid-item {
  position: relative;
}

Let me know how it works on your site

Support me by pressing 👍 if this useful for you

My testing

I'm just wondering if there's any way to keep the title, ie  "THE SWALLOW HOUSE", underneath, but add "See More" as a button on the photo

On 2/2/2022 at 3:07 AM, graceface93 said:

I'm just wondering if there's any way to keep the title, ie  "THE SWALLOW HOUSE", underneath, but add "See More" as a button on the photo

You mean

Initial: Image - Text under image

Hover: Image - Text Under Image - Button See more over image (button is clickable)

Is this right?

Hi @tuanphan 

Just following up on this one as would love to know how to achieve the following:

Initial: Image

Hover: Text (portfolio title) under image - Text 'COMING SOON' (content) over image 

I have attached an image showing what I currently have. I have managed to create a grey overlay on hover, red border on hover and black text underneath on hover (no pointer events). However I need the red 'COMING SOON' to appear in the centre of the image on hover and not sit with the black project title. 

The code I have used for the 'COMING SOON' element is below: (the code for the grey hover, red border and black text is generic to the rest of the site so this code is separate to the below. The red 'COMING SOON' hover only applies to this one image, not all images). 

a.grid-item[href*="/palmbaybungalow"] .portfolio-text:before {
content: 'COMING SOON';
color: red;  
position: center !important;         
text-align: center !important;          
width: 100%;  
padding: 5; }

Any help would be greatly appreciated! 

Thank you, 
Charlotte 

19 hours ago, css_charlotte said:

Hi @tuanphan 

Just following up on this one as would love to know how to achieve the following:

Initial: Image

Hover: Text (portfolio title) under image - Text 'COMING SOON' (content) over image 

 

I have attached an image showing what I currently have. I have managed to create a grey overlay on hover, red border on hover and black text underneath on hover (no pointer events). However I need the red 'COMING SOON' to appear in the centre of the image on hover and not sit with the black project title. 

 

The code I have used for the 'COMING SOON' element is below: (the code for the grey hover, red border and black text is generic to the rest of the site so this code is separate to the below. The red 'COMING SOON' hover only applies to this one image, not all images). 

a.grid-item[href*="/palmbaybungalow"] .portfolio-text:before {
content: 'COMING SOON';
color: red;  
position: center !important;         
text-align: center !important;          
width: 100%;  
padding: 5; }

Any help would be greatly appreciated! 

Thank you, 
Charlotte 

What is page url?

Hi @tuanphan

The page URL is: https://www.workbyline.co.uk/

Thank you!

Charlotte 

1 hour ago, css_charlotte said:

Hi @tuanphan

The page URL is: https://www.workbyline.co.uk/

Thank you!

Charlotte 

Use this code to add Coming Soon

a.grid-item[href*="/palmbaybungalow"]:before {
    content: "COMMING SOON";
    color: red !important;
    text-align: center !important;
    display: block;
    width: 100%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 99999;
    opacity: 0;
}
a.grid-item[href*="/palmbaybungalow"]:hover:before {
    opacity: 1;
}

Hi @tuanphan

This worked perfectly, thank you!