asked on

Need to adjust the positioning of a hover element

Simple question, but I'm having a hard time finding the correct code to adjust.

https://www.wovenpatches.com/webster/patch-borders.html

In the section with the thumbnail images, when you roll over them, a little icon appears that you need to click on to make the image bigger. But it's in a weird spot. I'd like it to be in the center of the thumbnail, or better yet, not exist at all so that you can click anywhere on the thumbnail image.

Thanks!

leakim971

you have the hand on what? css ? javascript ? I mean what are you able to modify ?

Marisa

ASKER

I can modify anything. I was just playing around in the inspector tweaking all kinds of things in the code surrounding that element, and nothing I tweaked seemed to have any effect on the positioning of that icon. But I have full control over the site and all its files and assets.

Brian Tao

To put the icon in the center of the thumbnail, change your style.css.
line #793 to

.portfolio-item a.popup{position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);color: #fff;z-index: 9;display: inline-block;width: 40px;height: 40px;background: #fff;color: #626262;border-radius: 50%;margin-right: 10px;padding-left: 0px;text-align: center;line-height: 40px;opacity: 0;transition: all 0.5s ease-in-out;-webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;-ms-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;}

Open in new window

and line #796 to

.portfolio-item:hover a.popup{opacity: 1;}

Open in new window

To open the image popup directly on the thumbnail itself, you'll have to change both HTML and JavaScript, but I don't have time to review it yet.
Good luck!

leakim971

this is the documentation of the plugin : https://dimsemenov.com/plugins/magnific-popup/documentation.html
a demo page here : https://dimsemenov.com/plugins/magnific-popup/

they use :

        $('.image-popup-vertical-fit').magnificPopup({
          type: 'image',
          closeOnContentClick: true,
          mainClass: 'mfp-img-mobile',
          image: {
            verticalFit: true
          }
          
        });

Open in new window

with the image inside the link
<a href=""...
<img

instead (what you've) :

<img src...
<a href....

and your code :

              $('.popup-gallery').magnificPopup({
                  delegate: 'a.portfolio-img',
                  type: 'image',
                  tLoading: 'Loading image #%curr%...',
                  mainClass: 'mfp-img-mobile',
                  gallery: {
                      enabled: true,
                      navigateByImgClick: true,
                      preload: [0,1] // Will preload 0 - before current, and 1 after the current image
                  },
                  image: {
                      tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
                      titleSrc: function(item) {
                          return item.el.attr('title') + '<small>by Marsel Van Oosten</small>';
                      }
                 }
             });

Open in new window

so just put the image inside the link and use the simple code version (seee first code snippet at the top from the demo)

remove/update your custom css :

.portfolio-item a.popup {
    position: absolute;
    right: 20px;
    top: -20px;
    color: #fff;
    z-index: 9;
    display: inline-block;
    width: 40px;
    height: 40px;
    background: #fff;
    color: #626262;
    border-radius: 50%;
    margin-right: 10px;
    padding-left: 0px;
    text-align: center;
    line-height: 40px;
    opacity: 0;
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
}

Open in new window

Marisa

ASKER

Thank you for your responses~

Brian,
I tried you solution, and it moved the icon to the top center, rather than the true center.

Leakim,
I replaced the .popup-gallery function with the .image-popup-vertical-fit code and also switched the wrapping of the img and href tags, but that actually made the thumbnail disappear entirely. What am I missing here?

ASKER CERTIFIED SOLUTION

Marisa

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial