Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #24993

    I’m trying to figure out how to remove the circle with an arrow that pops up when you hover over a portfolio item. I would like to keep the transparent white that appears just rid of the circle with arrow….thank you!


    Hello, considering this falls under the same topic I’ll request it here also. I want the same as potterlawso. But I would also like to know how to change this image to a custom image I’ve created, lets call it: portfolio-image.jpg

    So instead of the Circle with the Icon, how can I make this be replaced by my portfolio-image.jpg?

    Cheers all,



    Okay I solved it!

    First potterlawso here is the answer to your question:

    .image-overlay .image-overlay-inside::before {
    background: none;

    Post the above into your custom.css file.

    If you only want it done to a certain page, remember to look at the page’s sourcecode and get the portfolios page-id-<number> e.g page-id-507

    In that case all you would do is add .page-id-507 infront as follows:

    .page-id-507 .image-overlay .image-overlay-inside::before {
    background: none;

    As for my question here is how to replace the circle + icon and add something you want:

    Original code found in layout.css

    .image-overlay .image-overlay-inside::before {
    position: absolute; border-radius: 50px;
    background: #000; height:80px; width:80px;
    line-height:80px; left:50%; top:50%; margin: -40px 0 0 -40px;
    z-index: 500; text-align: center; color:#fff;

    Then added my own in custom.css to a specific page:

    .page-id-756 .image-overlay .image-overlay-inside::before{
    position: absolute; border-radius: 0px !important;
    background: url(../images/portfolio-hover-image.png) no-repeat !important; height:114px !important; width:141px !important;
    line-height:114px; left:35%; top:45%;
    z-index: 500;
    text-align: center; color:#fff;

    Please note I put my image in the image folder. The path is /theme_name/images/ folder. Default /enfold/images/ = ../images/

    Hope that helps,




    Thanks for your help. I placed that text into my custom.css file and uploaded it, but it didn’t work….wondering what I did wrong???


    Try this one then:

    .image-overlay .image-overlay-inside::before {
    background: none !important;


    That worked…thank you!

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

The topic ‘Portfolio Item Hover’ is closed to new replies.