Docs

[stuartrowens]

Site: http://www.test4.stuartrowens.com/

I’d like to remove the whitespace between the top two images and the bottom two. They are in the same row and as best I can tell, don’t have any padding or containers turned on.

Secondarily, and I believe this is outside the scope of the support you offer, but I’d like for a line of text to appear along with the white overlay on hover. I’m hoping you can point me in the right direction- I’m betting it can be done with CSS.

Thanks for always doing such a great job of taking care of us!

[Rupok]

Hi there,

Thanks for writing in!

#1. When you are enabling link for the image the default margin of anchor will be applied. You can add this under Custom > CSS in the Customizer or in Page level CSS under Settings Tab :

#work a.x-img {
  margin-bottom: 0;
}

#2. It could be done with CSS but that will be static and same for all images.

Let’s try this CSS :

#work a.x-img::after {
  color: #000;
  content: "Click me";
  font-size: 20px;
  opacity: 0;
  position: absolute;
  text-align: center;
  top: 48%;
  width: 100%;
}

#work a.x-img:hover::after {
  opacity: 1;
}

Let’s change the text and styling if needed.

Hope this helps.

Cheers!

[stuartrowens]

Rupok,

Thanks for your reply. That took care of the gap between the images- I appreciate it!

The CSS for the image didn’t seem to affect anything- thanks for trying. Since I need the message to be different depending on the image (perhaps use the ALT attribute?), I don’t think it would’ve accomplished what I was after anyway. If anyone else comes across this and wants to give it a go- I’d be grateful!

Thanks!

[Christopher]

Hi there,

Please check essential grid plugin : https://community.theme.co/kb/integrated-plugins-essential-grid/

Hope it helps.

[stuartrowens]

Christopher,

Who knew there was an extension that does exactly what I need? Guess I should explore those. That did the trick- thanks!

[Thai]

If you need anything else please let us know.

[Author]

Posts