[Resolved] need help in adding css and html

[Sunny]

Hi, I need help in adding css and html to have desired effect.

I want to use image hover effect from one of these

https://miketricking.github.io/bootstrap-image-hover/

on clicking a particular hover effect, it shows the code for css and html that needs to be added.

I am confused, where to add the code to have desired effect on a particular image.

for example, I have an image in a post. I want to have the desired effect by using css and html from the link that I have posted above.

How to achieve that?

any pointers are highly appreciated.

[Sunny]

I understand that I can use simple css to target post specific images. Or i can add the css in add css option in customise theme option. What I don’t understand or rather get is , how to add html for the particular image to achieve the desired hover effect.

Any pointers appreciated.

[Leo]

Hi there,

You would need to add the image using their HTML. So for the first example it would be something like this:

<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>

Keep in mind that sometimes these effects won’t work out of box like this in WordPress.

Definitely worth a shot but might need to check with the author to see if there are necessary tweaks in the code.

[Sunny]

Thanks Leo, i tried it but it is breaking the customisations that I have done in my themes.

Appreciate your time.

[Leo]

Hmm not sure why that would be.

Might be worth to look around for a solution that would work for WordPress by default.

[Author]

Posts