GK News Blocks Widget Overwrite Needed...

GK News Blocks Widget Overwrite CSS needed to reverse image rollover behaviour on hover so that the Transparent Gradient overlay occurs onRollover (or Hover) as opposed to the other way around. By default GK News Blocks loads with the Transparent Gradient image on top of the featured image so as to create that shadow effect. I want to reverse the behaviour so that by default the images in GK news blocks load with no gradient over lay. But on hover or rollover though, I would like the overlay effect. Thanks.

ref: home page of http://integralmedicine.ca

Paste this fragment to override.css file:

Code: Select all

.gk-news-blocks > figure .gk-img-overlay {
   -webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0.3);
   -moz-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0.3);
   box-shadow: inset 0 0 0 rgba(0, 0, 0, 0.3);
}

.gk-news-blocks > figure:hover .gk-img-overlay {
    -webkit-box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.35);
   -moz-box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.35);
   box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.35);
}