How to: add custom hover over on images

Site URL: http://www.erichmcvey.com/

Hi all,

I have a specific question about a hover over text on an images page template: How can I add a custom hover over text and style? I am looking for something similar like in the provided site URL. I also attach a screenshot of that same URL.

The font would be Bodoni, the transparency accordingly.

Thank you for your replies and inputs.

Cheers

Is this what you are achieve:

recap: http://recordit.co/U4vTx5kWMB

@emtheler you can do this with CSS using hover and psuedo elements. Do you have a site that you're currently working on?

28 minutes ago, RyanDejaegher said:

@emtheler you can do this with CSS using hover and psuedo elements. Do you have a site that you're currently working on?

Hey Ryan,

Thanks for your reply. Yes, I do. I use the AVENUE template. The site I'd like to implement this is: https://ezechielphotography.com/

@emtheler cool here's a demo showing the effect with a transparent overlay, do you have the option set to show a caption for the image?

 

1 hour ago, bangank36 said:

Is this what you are achieve:

recap: http://recordit.co/U4vTx5kWMB

Hey bangank36,

I am not sure it is what I look for. What I would like my images to do is to display a lower than 100% opacity banner with custom font text in it.

Just now, RyanDejaegher said:

@emtheler cool here's a demo showing the effect with a transparent overlay, do you have the option set to show a caption for the image?

 

Hey Ryan,

Thank you. I can check. Should it be on "show caption" for the images? The transparency should only affect maybe 1/4 or less of the image itself.

@emtheler, yep you can turn that option on

7 minutes ago, RyanDejaegher said:

@emtheler, yep you can turn that option on

Which one serves the most?

@emtheler caption overlay on hover 

1 minute ago, RyanDejaegher said:

@emtheler caption overlay on hover 

ok, got it!

@emtheler got it I can see it now, is it mainly the font-styling you're after?

44 minutes ago, RyanDejaegher said:

@emtheler got it I can see it now, is it mainly the font-styling you're after?

Hey Ryan,

Yes, so the font I'd like would be LTC Bodoni 175. The opacity and color of the banner I'd like it to be the same as the site URL I sent before.

@emtheler do you have that font added to your site?

Edit: nvm I see it

@emtheler

You may need to increase your font-size. If there's not an option in the design settings you can add it with custom CSS

.image-caption p {
    font-family: 'ltc-bodoni-175';
    color: #363636 !important;
    text-align: center;
  	/* Optional font size, remove if you can adjust from Design settings */
  	font-size: 16px !important;
  
}

.image-caption-wrapper {
    background-color: rgba(255,255,255,.4) !important
}

4 minutes ago, RyanDejaegher said:

@emtheler

You may need to increase your font-size. If there's not an option in the design settings you can add it with custom CSS

.image-caption p {
    font-family: 'ltc-bodoni-175';
    color: #363636 !important;
    text-align: center;
  	/* Optional font size, remove if you can adjust from Design settings */
  	font-size: 16px !important;
  
}

.image-caption-wrapper {
    background-color: rgba(255,255,255,.4) !important
}

 

Ryan that is amazing, thank you so much! Unfortunately, I can't seem to make it work. I tried with custom css on the portfolio site itself, but got this instead=>

@emtheler

That code doesn't go into a code block. You can add it to Design -> Custom CSS 

9 minutes ago, RyanDejaegher said:

@emtheler

That code doesn't go into a code block. You can add it to Design -> Custom CSS 

It worked! You are a genius, thank you so much! So, if I wanted to change the opacity or the banner color, what would I need to alter in the snippet?

@emtheler

/* Change .4 from 0-1 to control the transparency (i.e. 0.2 or 0.9 or 1) */

.image-caption-wrapper {
    background-color: rgba(255,255,255,.4) !important
}

2 minutes ago, RyanDejaegher said:

@emtheler

/* Change .4 from 0-1 to control the transparency (i.e. 0.2 or 0.9 or 1) */

.image-caption-wrapper {
    background-color: rgba(255,255,255,.4) !important
}

 

That is fantastic. Thank you so much! Is there anything I can do for you?