Hovering over featured image on home page

Support
#1

Hello,

As you can see in the screenshot below when I hover over a featured image the grey is cut off at the bottom. I would like to be able for the grey to be consistent for every featured image. I also want to be able to choose the same font for “See More” in relation to the font “A Constant Change” is.

Site: aconstantchange.com

Thanks!

Best,
-Alex

#2

Hello @alexgreenberg,

Thanks for asking. :slight_smile:

Please add following CSS under X > Launch > Options > CSS to make necessary changes:

.entry-thumb:before{width: calc(100% - 30px);padding-top: 70px;font-family: "Lato",sans-serif !important;}

Thanks.

#3

Thanks,

It kind of worked but then I accidentialy deleted a section where it commanded to say “See More” and I tried to write the CCS but now it looks like this. I need help haha.

Also this is what my CCS is looking like. Maybe you can reccomend what I can take out. I may have unessary stuff.

Your suggestion kind of worked but the grey box doenst work too well because all images are different sizes. What I would like now is for the image to lower its oppacity and then just the text “See More” to come to come up in the same font that “A Constant Change”

Please advise :slight_smile:

Thanks!

#4

Hello There,

Do you want something like this?

Please have your code updated and use this:

.entry-thumb:before {
  content: "SEE MORE";
  
  font-family: "Lato",sans-serif !important;
  text-align: center;
  margin: 0;
  padding: 10px;

  font-size: 3rem;
  width: calc(100% - 30px);
  min-height: 90px;
  top: 35px;
  left: 15px;
  border-radius: 0;
}

Hope this helps. Please let us know how it goes.

#5

Thanks that does work but I do not like the Grey box that comes up.

When I hover over the image I would like the image to opacity to show as in the image below. I have figured out how to change the opacity.

How can I make it so…
-there is no grey box
-the font for See More is “Crimes Times Six” https://www.dafont.com/crimes-times-six.font
-the text “SEE MORE” is in the center of the image

Thanks!

-Alex

#6

Hey Alex,

Thanks for updating in!

To remove the grey box, please have the css code updated. Please have this code removed:

.entry-thumb:before {
  content: "SEE MORE";
  
  font-family: "Lato",sans-serif !important;
  text-align: center;
  margin: 0;
  padding: 10px;

  font-size: 3rem;
  width: calc(100% - 30px);
  min-height: 90px;
  top: 35px;
  left: 15px;
  border-radius: 0;
}

.entry-thumb:before {
	background-color: rgba(255, 255, 255, 0.5);
}

And replace it using this code instead:

.entry-thumb:before {
  content: "SEE MORE";
  
  font-family: "Lato",sans-serif !important;
  text-align: center;
  margin: 0;
  padding: 10px;

  font-size: 3rem;
  width: calc(100% - 30px);
  min-height: 90px;
  top: 35px;
  left: 15px;
  border-radius: 0;

  background-color: transparent;
}

To use your own custom font, you must upload the font to your site first before you can use it by replacing the line:
font-family: "Lato",sans-serif !important; with font-family: "Crimes Times Six",sans-serif !important;.

To know how you can use a custom font, please check this out this thread:

Hope this helps.

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.