[AlCAtParticipant]

Hi,

I have managed (thanks to you guys) to have a background image covering the top bar/logo bar/nav bar.

I would like to create an effect when hovering the pointer over the background image to make the menu, social media buttons and logo more visible. I’m thinking a black fading will do the trick. (unless you guys can recommend something better 🙂 ) What would be the CSS to achieve it?

Secondly, I would like to create a zoom hover effect when the pointer hovers over the featured image of my homepage. (Disclaimer: I haven’t included the “latest articles” section on my homepage yet). You can find the hovering effect I’m thinking of on this website: https://miketricking.github.io/dist/, it is the very first one named “Hover Effect 1”. They also provide HTML and CSS implementation. Could you help me with it?

Here is the address of my website: http://www.hopawaywithus.com

I look forward to hearing from you guys! 🙂

[Rue NelModerator]

Hello There,

Thanks for writing in!

1] To create an effect when hovering the pointer over the background image to make the menu, social media buttons and logo more visible, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

header.masthead.masthead-stacked {
    position: relative;
}

header.masthead.masthead-stacked:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
    transition: background 1s ease;
}

header.masthead.masthead-stacked:hover:before {
    background-color: rgba(0,0,0,0.65);
}

2] Regretfully, this particular customization request is outside the scope of our support as this is not related to an issue with the theme and instead has to do with your customization of it. As such, you will need to investigate this particular issue on your own or seek help from a developer should you not feel comfortable making these changes yourself. If you have any further questions about the theme, we are more than happy to provide you with assistance on these inquiries.

Thank you for your understanding.

[AlCAtParticipant]

Hi Rue Nel,

Thank you for your reply.

1. The code works perfectly thank you!

2. I will have a look by myself. I was wondering if you guys have a similar option. Also, where should I go if I want to modify the HTML in my child theme? 🙂

[Rue NelModerator]

Hello There,

Thanks for the updates! If you want to modify the theme, what you are trying to accomplish requires a template customization, we would like to suggest that you use a child theme (which I think you already have). This allows you to make code changes that won’t be overwritten when an X update is released.

After your child theme is setup, please review how we recommend making template changes in Customization Best Practices.

Hope this helps.

[AlCAtParticipant]

Hey Rue,

I do have the child theme implemented already. I understand how we can rearrange the template using .php files but I’m not sure how to modify the HTML to change the picture hover style on the home page.

Here is the HTML I would have to include:

    <div class="hovereffect">
        <img class="img-responsive" src="http://placehold.it/350x200" alt="">
        <div class="overlay">
           <h2>Hover effect 1</h2>
           <a class="info" href="#">link here</a>
        </div>
    </div>

Would you be able to tell me where to include it? 🙂

[JadeModerator]

Hi there,

To create a zoom effect to the images when you hover them, you can try adding this CSS code to the customizer:

.hovereffect:hover img {
    -ms-transform:scale(1.2);
    -webkit-transform:scale(1.2);
    transform:scale(1.2);
}

Hope this helps.

[AlCAtParticipant]

Hi Jade,

Thank you for your reply.

I have tried the code but it doesn’t seem to work. I don’t see any zoom hover effect on my images.

Also may I confirm with you guys if there is a way to implement the HTML I have included in my previous message? I already have a child theme installed but I’m not sure where to put the HTML.

Thank you for your help.

[Rue NelModerator]

Hello There,

@jade‘s code will only work if you have added a custom ‘hovereffect’ class to your image a tag. And if you do not add any class, you might just need something like this:

a img {
  transition: all 1s ease;
}

a:hover img {
    -ms-transform:scale(1.2);
    -webkit-transform:scale(1.2);
    transform:scale(1.2);
}

If you want to apply the same effect 1 to the featured image in your site, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.entry-featured {
    position: relative;
    overflow: hidden;
}

.entry-thumb img{
  transition: all 1s ease;
}

.entry-thumb:hover img{
    -ms-transform:scale(1.2);
    -webkit-transform:scale(1.2);
    transform:scale(1.2);
}

We would loved to know if this has work for you. Thank you.

[AlCAtParticipant]

Hi Rue,

It worked for my featured images and the images displayed by my IG plugin. However, I have implemented a recent post category on the homepage and these photos don’t have the hover effect.

[Rue NelModerator]

Hello There,

Thanks for the updates! The code I gave in my previous reply is specifically tailored to have a hover effect on the featured image only. It does not include the IG plugin nor the recent post element. Those elements needs another set of codes to mimic almost the same effect. It might not also be possible because they do not have the same element structure. And like I said, since this is all custom development, regretfully we won’t be able to assist further. Custom development is outside the scope of our support. We’re happy to provide advice and get you started in the right direction, but you would still be responsible for the implementation.

Hope this explain it briefly. Thank you for you kind understanding.

[AlCAtParticipant]

Hi Rue Nel,

Thank you very much for you replies.

What I meant is the custom CSS you provided me with actually works with the IG plugin.

1. My issue is that it doesn’t work with the images placed on my homepage using the recent post shortcode. How can I apply the same hover effect on these images?

2. I would also like to know how I can prevent any hover effect to apply on the images of the article. I would like to have it only on the recent post category located in the hompage and on the featured images ofthe blog index.

[ChristopherModerator]

Hi there,

I would like to check your site but it’s under construction mode, please provide us with login credentials.

Thanks.

[AlCAtParticipant]

This reply has been marked as private.

[ChristopherModerator]

Hi there,

#1 Please add this :

.x-recent-posts-img {
    transition: all 1s ease;
}
.x-recent-posts-img:hover {
    -ms-transform: scale(1.2);
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    transition: all 1s ease;
}

#2 Update previous code to :

.archive .entry-featured ,.blog .entry-featured {
    position: relative;
    overflow: hidden;
}

.archive .entry-thumb img,.blog .entry-thumb img{
  transition: all 1s ease;
}

.archive .entry-thumb:hover img,.blog .entry-thumb:hover img {
    -ms-transform:scale(1.2);
    -webkit-transform:scale(1.2);
    transform:scale(1.2);
}

Hope it helps.

[AlCAtParticipant]

Hey Christopher,

Code is working great! Thank you very much!

[Author]

Posts