Portfolio Section Hover Opacity

Hi there,

I am facing this issue and couldn’t find a solution for this.

Whenever I hover my mouse over there seems to be either 1 or 2 layers of colors that goes over with a bit of opacity of these “buttons” I was wondering if I could change the color and the opacity of these buttons when they are hovered (as shown in image)

Hi @terryk,

I hope you are well today and thank you for your question.

You can try achieving this by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Shapely Options -> Other

#page .shapely_home_portfolio .inner-title:hover:before {
    opacity: 1;
    background: rgba(255,255,255,0.3) !important;
}

#page .shapely_home_portfolio .inner-title:hover .title *{
    color: #FDFBFB !important;
}

Please change the color value in the above code to whatever you want to use by referring the following pages.

http://www.w3schools.com/html/html_colors.asp
http://www.w3schools.com/html/html_colorvalues.asp
http://www.w3schools.com/tags/ref_colorpicker.asp

Best Regards,
Movin

Hi Movin,

thanks for the codes, they do work like a charm; however I did notice the fonts are actually behind this layer of color. Is it possible to switch them around? Like having the fonts in front of the layer of color? Because it also affects the readability of the fonts with that layer of color over it.

http://terryck.com

To resolve that issue please try using the below CSS code.

#page .shapely_home_portfolio .inner-title a:hover {
  opacity: 1;
}

Hi thanks for the response,

Code worked like a charm.

I couldn’t find the code when i inspect element for the portfolio page since I wanted to have the same hovering effects as the portfolio section (home page). Since I know .shapely_home_portfolio is mainly for the home page. Also, on top of that, I was just wondering if having too many codes in the css optional section would make the loading of my site slower?

http://terryck.com/portfolio/

I couldn’t find the code when i inspect element for the portfolio page since I wanted to have the same hovering effects as the portfolio section (home page). Since I know .shapely_home_portfolio is mainly for the home page.

You can use the below CSS code to make it work.

body.post-type-archive-jetpack-portfolio #page .inner-title:hover:before {
    opacity: 1;
    background: rgba(255,255,255,0.3) !important;
}

body.post-type-archive-jetpack-portfolio #page .inner-title:hover .title *{
    color: #FDFBFB !important;
}
body.post-type-archive-jetpack-portfolio #page .inner-title a:hover {
  opacity: 1;
}
Also, on top of that, I was just wondering if having too many codes in the css optional section would make the loading of my site slower?

Yews a bit but not too much.