-
AuthorPosts
-
January 14, 2019 at 1:36 am #1053477
Hello,
When adding an image to the page via the media elements and adding a link to it, I want my image to get slightly larger on hover but I don’t want the big arrow animation that shows up on top of the image….
How can I remove that?
Thank you!
Srishti
PS: Though I have the option set for “slightly larger on hover, it is not changing on hover, just the big arrow shows on top of the image!
PPS: When I select the image to show caption or then the big arrow does not show up, when I turn the image to have a link then the images do not zoom.
I would like the images to zoom on hover and not have the big arrow coming up on the hover…
Thanks!- This topic was modified 5 years, 9 months ago by c_srishti.
January 14, 2019 at 6:17 pm #1053751Hey c_srishti,
Could you please give us a link to your website, we need more context to be able to help you.
Best regards,
VictoriaJanuary 14, 2019 at 10:33 pm #1053856Hello Victoria,
My website is here:You will see that out of the 4 images, the last one has the big arrow when you hover on it.
thanks
SrishtiJanuary 16, 2019 at 9:48 pm #1054756Hi,
I hovered all of the images and I couldnt see any problem, are u sure?
Best regards,
BasilisJanuary 16, 2019 at 10:35 pm #1054781Hi Basilis,
It is not a problem, I would just link to not see the big arrow that shows up when you hover over an image that has a link.
Also is it possible to have a drop shadow around the images?
thanks a lot
srishtihttp://fv6.97e.myftpupload.com/wp-content/uploads/arrow.jpg
- This reply was modified 5 years, 9 months ago by c_srishti.
January 22, 2019 at 12:44 am #1056939Hi,
Please add the following CSS:
.image-overlay .image-overlay-inside { visibility: none; }
Let us know if it works out for you :)
Best regards,
BasilisJanuary 22, 2019 at 1:12 am #1056954Hi Basilis,
I am sorry, that did not work :( I did a hard refresh but still showing the big arrow.
I would like it to show the image zoom when it is a link, otherwise nothing fancy should happen, And I would like to get rid of the big arrow.
my login details below…- This reply was modified 5 years, 9 months ago by c_srishti.
January 23, 2019 at 3:38 am #1057550Hi,
Thanks for the update. Set the visibility property value from “none” to “hidden”. Or just set the “display” property to “none”.
.image-overlay .image-overlay-inside { visibility: hidden; }
OR
.image-overlay .image-overlay-inside { display: none !important; }
Best regards,
IsmaelJanuary 23, 2019 at 10:16 pm #1057948Hello Ismael,
The css is still not working properly.
When I apply any of the above suggestions, the arrow goes away but a semi-transparent white glaze goes over the image. I would just like the image to do the zoom on hover when it is a link. and no overlay at all..
Please take a look at the website,
thank you!- This reply was modified 5 years, 9 months ago by c_srishti.
January 25, 2019 at 7:35 am #1058504Hi,
You can use this one if you want to remove the overlay completely.
.avia-image-overlay-wrap a.avia_image .image-overlay { display: none !important; }
Best regards,
IsmaelJanuary 25, 2019 at 11:48 pm #1058947That worked great! thank you!
What do I do to get rig of the graphic and the overlay that comes up when there is going to be a lightbox coming up…
Examples on all the images this page:
http://fv6.97e.myftpupload.com/blog/awaiting-the-storm/Thanks!
SrishtiJanuary 27, 2019 at 7:38 pm #1059412Any tips on this? Would really appreciate!
January 28, 2019 at 6:52 am #1059531Hi,
Are you referring to the dark overlay? Try this css code.
.mfp-zoom-in.mfp-ready.mfp-bg, .mfp-zoom-in.mfp-ready .mfp-preloader { display: none !important; }
Best regards,
IsmaelJanuary 28, 2019 at 7:23 pm #1059767Hello Ismael,
thanks for your reply! No that didn’t do it….
I am talking about : when I hover over the images which are going to open in light box, there is an arrow graphic and a white semi-transparent overlay.
Perhaps it would be ok to have the white overlay, but how to get rid of the arrow graphic?January 30, 2019 at 9:42 am #1060393Hi,
The previous css code should have removed that overlay and arrow. Did you add the previous css code?
.avia-image-overlay-wrap a.avia_image .image-overlay { display: none !important; }
Please provide a screenshot of the “white overlay or the arrow”.
Best regards,
IsmaelJanuary 30, 2019 at 8:26 pm #1060600Please find a screenshot here:
http://fv6.97e.myftpupload.com/wp-content/uploads/arrow.png
No the above css only worked on the home page…
I would like some assistance with this fast.
Thanks!January 31, 2019 at 1:37 pm #1060966Hi,
Thanks for the info.
This should remove every image overlay in the site including the ones in the blog page.
.image-overlay { display: none !important; }
Best regards,
IsmaelJanuary 31, 2019 at 10:10 pm #1061258Hello Ismael,
That did not do it, I did a flush cache and hard reload.. but still the same result.
I already had this code
.avia-image-overlay-wrap a.avia_image .image-overlay {
display: none !important;
}I am still getting the overlay in the blog page….
Any other suggestions please!February 3, 2019 at 3:36 pm #1062251Hi c_srishti,
Which browser are you using?
Try using ctrl+f5.
Best regards,
Victoria -
AuthorPosts
- You must be logged in to reply to this topic.