Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • #189733


    I would like to make images such as below link.

    The second image of this website uses ‘pattern overlay’ by using css.

    Please let me know how to do like this on my enfold theme.
    I need detailed codes.

    Thanks in advance


    Hey hojoon!

    You can add following code to Quick CSS in Enfold theme options under Styling tab to change arrow icon on hover state to any other content

    .image-overlay.overlay-type-extern .image-overlay-inside:before {
    content: 'Your custom text goes here';
    font-family: 'entypo-fontello';

    You are going to need to hire a freelance developer for that kind of customization as it is beyond the scope of support we can provide. You can also request quote here.




    I want to change the mage hover arrow to this image:

    I have tried adding the code above to the styles tab but it does not work. I was editing the base.css at the proper lines but it does nto work either.

    Enfold.css is overriding everything. I assume enfold.css is a generated sylesheet based on the selections I make in the wp admin panel.

    My experimental site is:

    Can you tell me exactly what file to edit and where to have the image i posted above instead of the arrow when i hover a picture?
    I am looking forward to hear from you!



    Place it on Enfold > Styling > Quick CSS or add it on your custom.css. It should override all of the css style if you’re using the correct selector.



    .image-overlay.overlay-type-extern .image-overlay-inside:before {
    content: ‘Your custom text goes here';
    font-family: ‘entypo-fontello';

    Thanks for this Yigit!
    May I ask, How would I use a font icon? I know I can just type custom text here, but how canI add an icon from the default Entypo or from uploaded ones from fontello?
    An example would be nice so I can see the structure of the code.


Viewing 5 posts - 1 through 5 (of 5 total)

The topic ‘pattern overlay’ is closed to new replies.