Mouse Over Effect possible?

Hi,
Sorry for the late reply, I was able to apply the color overlay to the grid row that had a background image, but I couldn’t also add the special heading or a text block to the grid row as it though it off, so I’s not very useful. You can give it a try by adding the custom class “grid-hover” to a grid row cell and try this css:

.grid-hover:hover:before {
  content:"";
  display: block;
  height: 100% !important;
  visibility: visible !important; 
  top: 0;
  left: 0;
  width: 100%;
  background-color: rgba(235,111,49,0.9)!important; 
}
.grid-hover {
  padding: 0px !important;	
}

I did find in our documentation that you can get closer to this effect with a title caption in the portfolio grid

this is the css I tested:

/* Portfolio overlay with title */
/* Disable default animation */

#top .grid-entry a:hover .image-overlay .image-overlay-inside {
animation: none;
}

/* Overlay color */

#top .grid-entry .image-overlay {
background: rgba(235,111,49,0.9)!important;
}

/* Remove hover icon */

#top .grid-entry .image-overlay .image-overlay-inside:before {
display: none !important;
}

/* Remove default title below */

.grid-content .avia-arrow,
#top .grid-entry .grid-content {
display: none;
}

/* Display title on hover*/

.grid-entry a:hover:before {
content: attr(title);
position: absolute;
width: 100%;
z-index: 1000;
text-align: center;
opacity: 1;
font-size: 18px;
color: #ffffff !important;
top: 50%;
transform: translateX(-50%);
animation: avia-fadein 0.75s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275) !important;
}

Hope this is helpful.

Best regards,
Mike

Hi Greg,

Thanks for the update, we’ll keep this thread open in case you should need any further help from us.

Best regards,
Rikard

Hi,
Thanks for the login, the screenshot was from the “portfolio grid” suggestion above, I didn’t have success with the grid row when there was anything in the grid row, which is why I said it was not very useful, but now I can’t reproduce it.
But I took another approach, I took your color #5356bc and used a RGBA to feColorMatrix converter to create a SVG filter which gives an overlay, the only drawback is the special heading is also under the overlay.
This is the css I added to your site:

.grid-hover:hover {
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'colorChange\'><feColorMatrix type=\'matrix\' values=\'0.33 0 0 0 0 0 0.34 0 0 0 0 0 0.74 0 0 0 0 0 1 0'/></filter></svg>#colorChange");
opacity: 1 !important;
}

Please clear your browser cache and check.

Best regards,
Mike

Hi,
Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

#top.page-id-800 #av-layout-grid-1 .flex_cell.av_one_third {
	padding: 360px 0px 0px 0px !important; 
}
#top.page-id-800 #av-layout-grid-1 .flex_cell.av_one_third:hover {
	padding: 180px 0px 180px 0px !important; 
}

After applying the css, Please clear your browser cache and check the test page.

Best regards,
Mike