Changing colour of hover text on product images on collection pages

maeve_talbot_ke
Tourist
5 0 1

Hi everyone!

I recently successfully added the hover effect that is outlined by the instructions available here to products on my collection pages for example on my tea towels visible here. As you can see though, the hover text has automatically been put to be in the same colour as the body text on my website (light blue) and does not show up well when viewed hovering over my products.

So i am trying to change the COLOUR of this text (that appears when you hover over the products), but I can't for the life of me figure it out! can you help?

I do not know much about coding but am normally able by trial and error to figure the basics out.. this has me stumped though. The closest I have gotten is discovering that in my theme.liquid file there is a section called reveal.caption (code copied at the bottom of this message), and through this section i am able to alter the SIZE (by changing the value of the "18px") of the hover text, but not the color (which i would have assumed could be done by changing the "text-color" value. 

Can anyone help? I expect the solution is probably something really simple that I just don't understand.

Thankyou so much in advance!

 

.reveal .caption {
  position: absolute;
  top: 0;  
  display: table;
  width: 100%;
  height: 100%;
  background-color: white; /* fallback for IE8 */
  background-color: rgba(255, 255, 255, .001);
  font: 18px/1.6 sans-serif;
  text-transform: uppercase;
  text-color: #000 ;
  letter-spacing: 1px;
  text-align: center;
  text-rendering: optimizeLegibility;
}

0 Likes
Robert_Bugeag
Shopify Partner
12 0 0

Hello Maeve,

First, "text-color" is not a correct CSS property. Please use just "color:#000;".

Second, it seems that the propery "p" of your default body text has a bigger priority then your .reveal .caption class.

You can try being more specify with a class like ".reveal .caption p", this should overwrtie the default "p" color.

If it does not work you can also use "color:#000 !important;" to force it over the default property. This should not be overused and should only be a last resort!

If you or others are interested to learn more on CSS properties, how to change your font size, font color or font weight (and much more) I have created a FREE course on these subjects. It is only 1 hour long and will help you understand the basic of applying some design changes using CSS on your Shopify store: http://shopify-how-to-videos.thinkific.com/courses/free-shopify-style-css-class-for-beginners

Thank you and good luck!

Helping store owners like you around the world. Check my youtube channel for how to videos: youtube.com/channel/UCdN-RKEorn61nZ3mTw4uq1g
0 Likes
maeve_talbot_ke
Tourist
5 0 1

Hi Robert,

thankyou so much for your help! putting "p" after the "reveal.caption" class worked to make the text colour black.

i also changed "text-color" to "color" as you suggested: the "text-color" label must have been in my theme code from the beginning cause i don't know enough about coding to have implemented that myself! 

My only question now is how do i change the text to make it appear in the middle of the product image rather than at the top, which is where it is appearing now?

thanks so much in advance!!! i'm going to watch your tutorial later tonight or tomorrow cause i am curious to know more about the theory of classes/other parts of using CSS..

Maeve

0 Likes
Robert_Bugeag
Shopify Partner
12 0 0

Hello Maeve,

There are some interferences in your code. Why did you add all this:

position: absolute;
top: 0;
display: table;
width: 100%;
height: 100%;

If you remove the "p" from the class, above properties are not there.

Also it seems that this code does not have the proper effect anymore, see if adding a "p" also to it is fixing the issue:

.reveal .hidden .caption .centered {

    display: table-cell;
    vertical-align: middle;

}

Thank you

Helping store owners like you around the world. Check my youtube channel for how to videos: youtube.com/channel/UCdN-RKEorn61nZ3mTw4uq1g
0 Likes
maeve_talbot_ke
Tourist
5 0 1

Hi! 

Thankyou again for your response. I am not totally sure what you are suggesting though. I've changed the code to be as i think you were suggesting (see attached image). Is that what you meant? 

In response to your question of why i added this: 

position: absolute;
top: 0;
display: table;
width: 100%;
height: 100%;

The answer is that I did not add it! I know very little about coding and am really just making it up as i go along / teaching myself bits and pieces as i go. I'm pretty sure that code was in the original "Debut" theme when I first started using it. Or else I found it on someone's blog that taught how to create a hover text reveal.. now i've forgotten exactly where it came from! 

Should I take it all out though, as I've done in the attached image? Unfortunately the text is still not positioned in the middle of the image how i want it.

Thankyou so so much for your help, this is much appreciated. I still havent managed to watch your basics-of-CSS video but I will do that soon :) 

Best, 

Maeve

0 Likes
Robert_Bugeag
Shopify Partner
12 0 0

Hello Maeve,

That is not what I meant. I asked you to know if you add it or if it was in the theme already.

I was talking about this class: .reveal .hidden .caption .centered

See previous message.

I also suggest you to watch my course, it's only one hour long and I am sure it will help you understand a few things and maybe be able to find a solution for this.

Good luck,
Robert

Helping store owners like you around the world. Check my youtube channel for how to videos: youtube.com/channel/UCdN-RKEorn61nZ3mTw4uq1g
0 Likes