Viewing 30 posts - 1 through 30 (of 31 total)
1 2
  • Author
    Posts
  • May 7, 2019 at 2:05 pm #1098074
    Concre

    Hi all,

    on desktop we use the hover effect with images (portfolio raster), so that the image-title is visible in a better way;
    on mobile devices this hover effect is not active – by “pressing” the image on a mobile device the title appears, but is not really readable (depending on background colour) – how can we activate the hover effect for mobile devices?

    And the second topic refers to the portfolio-item-sequence: the arrows, which allow the navigation to the previous and next portfolio item, are reversed, instead of the next item the previous can be selected and vice versa.

    How can we fix that?

    We described those topics in a pdf-file – how can we upload this for better understanding (with screenshots etc.)?

    Thank you very much in advance!
    Birgit

    May 8, 2019 at 6:01 am #1098290
    Rikard

    Hi Birgit,

    You can upload the file to Dropbox or Google Drive for instance, then link to it here. Also please link to where we can see the actual elements in question.

    Best regards,
    Rikard

    May 8, 2019 at 12:14 pm #1098429
    Concre

    Hi Rikard,

    thank you very much for replying – please find below the pdf in the following folder (concerning hover-effect on images and sequence of galleries):

    https://www.dropbox.com/sh/mrg95bop9eykki1/AAC5ARq4wuv5AdZSTSgcIEfHa?dl=0

    Hope, you can derive it from there …

    We do have some other problems with this project as well :-(
    1. problems with size of LIGHTBOX – our client wants the images to be displayed very large – is it possible to enlarge the size of the Lightbox / something like “full width of image loaded”?
    2. Hover-TITLE within galeries – can we change the font-size and -color (our customer wants the size to be displayed with 20px and maybe in another color – how can we change size and color of hover-title?)
    3. Footer – we display an image (part of the clients logo) in the footer with the help of a widget – one column; is it instead of this possible to display this without any edges and distance above and below? There is a white line which we do not want to be displayed. Our client wants this to be displayed with maximum width.

    THANK YOU VERY MUCH – this project is very complicated concerning the impatience of our client …
    Hope, you can offer help quickly

    Birgit

    May 13, 2019 at 4:30 pm #1100156
    Concre

    Hey Kriesi-Team,

    we are in urgent need of support concerning the above mentioned topics:

    1. Size of Lightbox = full size of images
    2. hover-title within galeries on mobile devices
    3. Footer-image should fill whole footer without edge/distance

    Could you please get into contact with us?

    Kind regards
    Birgit

    May 13, 2019 at 6:02 pm #1100180
    cg

    It would be easier to help with a link to the actual page — is it online and accessible?

    1. The lightbox should scale up to the whole browser window if the image is big enough. Did you try uploading a big test image?
    2. A hover-effect is obviously not possible on a touchscreen, so on mobile i would always show the image-title. That should be possible with a little bit of custom CSS, but depends on the gallery-element you use. Which one is it?
    Same with modifing the size and color of that title: a little bit of CSS will do the trick … but i would need to see the output or know the element to recreate an example on a test page.
    3. If that footer image is a “decorative” element (not a content image) i would use a background image (maybe svg) for that. Did you try that with the Enfold-theme-options?
    Enfold (Child) > General Styling > Tab: Footer > Background Image

    cu:cg

    May 14, 2019 at 9:18 am #1100427
    Concre
    This reply has been marked as private.
    May 14, 2019 at 9:22 am #1100429
    Concre

    Again, thank you, Chris, for your support! Unfortunately the lightbox does not display the image in a larger size (we tested with 2560px). I wrote to Kriesi and hope, they might send a code to customize the lightbox. Your suggestion concerning the footer worked! THANKS! We embedded this as a content-image before / that’s why it did not work.
    Have a nice day – cheers!

    May 15, 2019 at 3:46 am #1100788
    Ismael

    Hi,

    Thanks for the update.

    The lightbox uses the “large” thumbnail version by default. If you want to increase its size, go to the Settings > Media panel. Adjust the width and height of the said thumbnail, then regenerate the thumbnails. You can use this plugin for that.

    // https://wordpress.org/plugins/regenerate-thumbnails/

    Best regards,
    Ismael

    May 15, 2019 at 1:21 pm #1101027
    Concre

    Hi Ismael,

    thanks for your reply!

    1.) Your suggestion worked with the Lightbox. FINE!

    2.) We do not have any solution for our second problem – described in the first post: portfolio-item-sequence = the arrows, which allow the navigation to the previous and next portfolio item, are reversed: instead of the next item the previous can be selected and vice versa.
    How can we fix that right-left-problem?

    3.) And – last one – we have to change the color in the hover-effect on mobile devices = image title should be displayed in a different (darker) color; where can we change that?

    Thanks a lot in advance

    Birgit

    May 15, 2019 at 1:59 pm #1101046
    cg

    2. The portfolio-sequence works like it should … the default sorting is from old (left) to new (right) based on publishing date (you can edit that for sorting) … like normal reading direction it goes from left to right through to the newest entry and right to left to the oldest one … while in the backend the newest one is on top of the list.
    Sometimes … with portfolio-items without a time-based order … it needs a little “twist” in thinking about it. :-)

    Example:
    1. newest
    2. new
    3. old
    4. oldest

    Now the “next”-navigation on the right side of an entry goes to the next newer entry — and to an older entry on the left (“previous”).

    3. Which Avia-element do you use? (also remember: there is no “hover” on a touchscreen)

    —–
    Edit:
    I think the expectiation regarding the portfolio-items results from the overview-page in the frontend, where the newest entry is on the left and the next older one is on the right:

    1. newest | 2. new | 3. old | 4. oldest

    This may help to reverse the left/right navigation:
    => https://kriesi.at/support/topic/change-portfolio-navigation/#post-281914

    • This reply was modified 5 years, 5 months ago by cg.
    May 15, 2019 at 2:10 pm #1101055
    Concre

    Hi Christian,

    thanks for your very quick answer – so you are really a specialist in using and customizing this theme!
    We are learning through trial and error – and with the help of the support …. omg / thanks a lot – we will try this immediately!

    Hover on mobile = I described this in the wrong way – we do not have this hover-effect on mobile devices, yes – but the title of the image is not readable, because the title color is the same = light grey on darker hover/layer; we want to change the color of the image title to make it easier to read (it should be darker – something like “80%black” = do you know where we can define this in this theme?

    many thanks
    Birgit

    May 15, 2019 at 2:24 pm #1101061
    cg

    “title of the image” : Do you mean the portfolio-entries or an other Avia-element? Which one?

    If you use the masonry-listing you can use this CSS:

    .av-masonry-entry .av-masonry-entry-title {
  color: #222222;
}

    For grid-listings:

    .main_color .grid-entry-title {
  color: #222222;
}

    Info about adding custom CSS to Enfold:
    => https://kriesi.at/documentation/enfold/add-custom-css/

    • This reply was modified 5 years, 5 months ago by cg.
    May 16, 2019 at 6:58 am #1101264
    Rikard

    Hi,

    Thanks for helping out @cg, did you try that out and did you have any luck with it @concre?

    Best regards,
    Rikard

    May 20, 2019 at 11:51 am #1102450
    Concre

    Thanks a lot for all your effort!

    1) We eliminated the arrows (sequence) within the portfolio (pagination) – so we do not have this problem any more;
    the sequence of the gallery at HOME should not be changed by date – that’s why we eliminated this as a solution.

    2) Unfortunately it did not work to change the title-color within the galleries. With “cg”s code the hover effect had been eliminated, title-color (text) had not changed – it is a light grey now; we want to have it displayed in black (so that it is better readable). We did not find any possibility to customize the hover-effect and title-color – so we need your help for this styling, please (grid-listing) –

    THANKS IN ADVANCE :-)
    Birgit

    May 20, 2019 at 11:52 am #1102451
    Concre

    Thanks a lot for your effort, cg – the title-color did not change / we placed an “official reply” on that in the post.
    Thank you very much!

    May 27, 2019 at 4:45 am #1104410
    Ismael

    Hi,

    Thanks for the update.

    Is the site live? We need to inspect the masonry element. Did you toggle the Performance > File Compression settings after adding the suggested css code?

    Best regards,
    Ismael

    June 18, 2019 at 12:21 pm #1111278
    Concre

    Hi all,

    unfortunately we could not respond earlier …

    We now tried a different solution for our customer. We decided to eliminate the hover-effect for any display of images; instead of this we integrated the title directly.

    1) How can we eliminate the hover-effect for the whole website in Enfold?
    2) Within the portfolio-item we want to eliminate the arrows, which display the following or the previous portfolio-item by hovering on to the arrow (but left/right display is not intuitiv there, so we want to hide this)

    I hope, this is easy to customize and send many thanks to you in advance.

    Thanks a lot

    Best regard,
    Birgit

    Unfortunately the site is not online so far – and we are not allowed to grant access to the server (is not hosted by us).

    June 21, 2019 at 7:17 am #1112210
    Ismael

    Hi,

    Thank you for the update.

    1.) Which overlay or hover effect would you like to remove? If you want to remove the default image overlay, use this css code.

    .image-overlay.overlay-type-extern {
    display: none !important;
}

    2.) That is the default post navigation. Please use the following css code if you want to remove it.

    
.avia-post-nav { display: none !important; }

    Best regards,
    Ismael

    June 24, 2019 at 1:04 pm #1112915
    Concre

    Hi Ismael,

    thanks a lot – the hover-effect as well as the arrows (previous/following portfolio-item) are eliminated;

    how can we handle it, that the portfolio-item-title is NOT displayed on the picture/image? The portfolio-item-title (category) is displayed in the center of the image – we do not want to display the title.

    Thanks a lot in advance – best regards,

    Birgit

    June 24, 2019 at 1:09 pm #1112917
    Concre

    p.s.: … the title is being displayed while hovering

    June 26, 2019 at 2:14 am #1113419
    Ismael

    Hi,

    Thank you for the update.

    You should be able to remove the portfolio item title with this css code.

    .portfolio-grid-title { display: none !important; }

    Best regards,
    Ismael

    June 26, 2019 at 10:16 am #1113557
    Concre

    Hi Ismael,

    thanks again – unfortunately this does not work. The portfolio-item is displayed while hovering. We want to eliminate this.
    Should we integrate something like “portfolio-grid-title-overlay” into the code???

    Thanks in advance

    Best regards,

    Birgit

    June 30, 2019 at 1:09 am #1114543
    Mike

    Hi,
    I tried to take a look at your issue but I didn’t see a link to your page, please include so we can investigate.

    Best regards,
    Mike

    July 1, 2019 at 9:59 am #1114837
    Concre
    This reply has been marked as private.
    July 2, 2019 at 1:02 pm #1115159
    Mike

    Hi,
    Thanks for the login, but there is also another login before the WP login, please also include this.

    Best regards,
    Mike

    July 2, 2019 at 4:19 pm #1115214
    Concre

    Hi Mike,

    sorry – I forgot to pass this over :-(
    Below you find the password for the server-login.

    Thanks in advance.

    Best regards,
    Birgit

    July 4, 2019 at 4:05 am #1115620
    Mike

    Hi,
    Thanks, the server-login works good, but the WordPress login doesn’t, please check.

    Best regards,
    Mike

    July 4, 2019 at 9:23 am #1115680
    Concre

    Hi Mike,

    sorry for the inconvenience! Here is another trial…

    Best regards,

    Birgit

    July 5, 2019 at 10:21 pm #1116084
    Mike

    Hi,
    Thank you that worked. To hide the portfolio title hover, Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

    .grid-entry a:hover:before {
    display:none !important; 
}

    Best regards,
    Mike

    July 8, 2019 at 9:21 am #1116590
    Concre

    Hi Mike,

    thank you very much!! That worked pretty good!

    Kind regards,

    Birgit

  • Author
    Posts
Viewing 30 posts - 1 through 30 (of 31 total)
1 2
  • The topic ‘Image hover effect on mobile’ is closed to new replies.