Customise blog post and image overlays ?

[MarieWorks]

Hi,

Is it possible to customise the icon / image / text shown in the mouse over overlays that are shown on blog posts (screenshot)? Can this sort of overlay effect be added to any image within the theme ?

Thanks

Chris

Attachments:

You must be logged in to view attached files.

[Nishant – SUPPORT]

Which image you want to add? Do you want to use a different icon?

[elecsander]

Yes! I have the same question.
I just overwrite it with an background image.

But the background image is not centered. Because the DIV has width:100% and the text-icon is text-align: center;

this is my idea, but the icon is on the left side, not centered.

figure .fa-file-text-o {
   background: rgba(0, 0, 0, 0) url("images/new-icon.png") no-repeat scroll center center;
    height: 36px;
    text-indent: -999em !important;
    width: 36px; 
}

[MarieWorks]

Idealy we’d like to be able to use text instead and change the colour / opacity of the overlay background and the text

Is that possible?

Thanks
Chris

[Nishant – SUPPORT]

Which text? Same text for all? Please elaborate?

[MarieWorks]

This reply has been marked as private.

[Nishant – SUPPORT]

Sorry, customizing it to use different images won’t be possible as it is much more work which is out of our theme support scope.

If you want to use a single icon, we can add it. Please attach your icon/text whichever you need.

[MarieWorks]

This reply has been marked as private.

[Mohammad – SUPPORT]

Hi,
You can use only global text for all images.
Thanks
Mohammad

[MarieWorks]

Hi Mohammad,

Would it be possible to upload a SVG or EPS logo file to use instead of global text?

Thanks

Chris

[MarieWorks]

actually scratch that,

could we just get rid of the blog post / chain link logos all together and set the overlaid colour independently of the main accent colour set through the colour customiser.

Ie. wed like the primary accent colour to be blue – but we want the accent colour displayed when mousing over images that are links to be a very transparent white?

think this should be simpler..?

Thanks

Chris

[Rui Guerreiro – SUPPORT]

Try the code below

figure .overlay {
  background-color: #FFFFFF!important;
}
figure:hover .overlay {
  box-shadow: inset 0 0 0 500px #FFFFFF!important;
}
.fa-file-o:before {
 display:none;
}

-Rui

[MarieWorks]

Hi Rui,

Thanks for the css – seems to of almost done the trick.

However the .fa-file-o icon is still visible – see screen shot

Cant seem to get rid of it even by adding “!important”

Any ideas ?

Thanks

Chris

Attachments:

You must be logged in to view attached files.

[Mohammad – SUPPORT]

Hi,
Please use this custom css code:-
.overlay .thumb-info i{display:none !important;}
Thanks
Mohammad

[MarieWorks]

bingo!

thanks again Mohammad,

your support’s been amazing – we really appreciate it!

Chris