-
Posts
-
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,
Daniel
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,
Peace,
Daniel
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???
- The topic ‘Portfolio Item Hover’ is closed to new replies.