add an zoom-in icon as overlay on the mansonry gallery - Support

Viewing 9 posts - 1 through 9 (of 9 total)

Author

Posts
November 5, 2016 at 3:59 pm #708703

vnfan
Participant

Dear support team,
I would liked to add an zoom-in icon (ue803, fontello) as overlay on my mansonry gallery so that the user know that they can klick on the images.
Could you please help me?

November 5, 2016 at 4:09 pm #708705

vnfan
Participant

sorry I forgot: I meant hover effect

November 7, 2016 at 6:15 pm #709404

Andy
Inactive Moderator

Hi,

that feature is for masonry gallery not available. Instead you can choose to display title and excerpt on mousover: http://i.imgur.com/5kXb7YM.png

Best regards,
Andy

November 16, 2016 at 4:44 pm #713025

vnfan
Participant

Hallo Andy,
xpoveda hat also asked the same question. I have tried the codes what Yigit offered on my website but it doesn`t work.

https://kriesi.at/support/topic/on-hover-effect-in-masonry-images/

November 16, 2016 at 4:50 pm #713029
Yigit
Keymaster
Hey!

Please try adding following code to Quick CSS
```
.av-masonry-image-container:after {
    color: blue;
    position: relative;
    top: -150px;
    left: 10px;
    width: 100%;
    font-size: 50px;
    font-weight: normal;
    content: '\E803';
    font-family: 'entypo-fontello';
}
```
Best regards,
Yigit
November 19, 2016 at 4:09 pm #714357

vnfan
Participant

Hi Yigit,
i have applied the codes for the page 8050. However the zoom-icon is always there. I just want it appear on hover. Further I don’t know why it is more space between the lines after I have added the CSS.

Could you please help me again?

.page-id-8050 .av-masonry-image-container:after {
color: #fff!important;
position: relative!important;
top: -150px!important;
left: 10px!important;
width: 100%!important;
font-size: 50px!important;
font-weight: normal!important;
content: ‘\E803’!important;
font-family: ‘entypo-fontello’!important;
}

November 22, 2016 at 4:14 pm #715386
Yigit
Keymaster
Hi,

Please add following code to Quick CSS as well
```
.page-id-8050 .av-masonry-image-container:hover:after {
    opacity: 1;
}
.page-id-8050 .av-masonry-image-container:after {
    opacity: 0;
}
.page-id-8050 .av-masonry-image-container {
    margin-bottom: -35px;
}
```
Best regards,
Yigit
November 24, 2016 at 2:57 pm #716433

vnfan
Participant

Dear Yigit,
it works now. However the zoom-icon isn’t on the middle of the image on mobile versions. How can I correct it?

November 28, 2016 at 5:05 am #717549
Ismael
Moderator
Hey!

Place the css code above inside a css media query so that it won’t affect the mobile view.
```
@media only screen and (min-width: 768px) {
  /* Add your Desktop Styles here */
    .page-id-8050 .av-masonry-image-container:hover:after {
        opacity: 1;
    }
    .page-id-8050 .av-masonry-image-container:after {
        opacity: 0;
    }
    .page-id-8050 .av-masonry-image-container {
        margin-bottom: -35px;
    }
}
```
Cheers!
Ismael
Author

Posts

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.