Viewing 21 posts - 1 through 21 (of 21 total)
  • Author
    Posts
  • March 3, 2017 at 1:55 pm #755043
    fcp

    Hello,

    I tried this code to zoom in an image, but the borders are not getting cut off…

    -webkit-transform: scale(1.05,1.05);
    -moz-transform: scale(1.05,1.05);
    transform: scale(1.05,1.05);
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;

    Which code do I need to add to have this result ?

    Thanks !

    March 5, 2017 at 6:33 am #755838
    Rikard

    Hey fcp,

    Could you post a link to the site in question so that we can take a closer look please?

    Best regards,
    Rikard

    March 6, 2017 at 1:02 am #756075
    fcp

    Hello Rikard !

    Here is the link to the page I was talking about.

    Thanks !

    March 7, 2017 at 5:37 am #756745
    Rikard

    Hi,

    Thanks for that, though I’m not sure I understand what you mean by the boarders not getting cut off? Could you try to explain a bit further maybe?

    Best regards,
    Rikard

    March 7, 2017 at 12:35 pm #756934
    fcp

    Hi,

    You can look on this page in private content… What I simply would like is zooming in the image on hover, but it keeps the same size, it’s not becoming bigger. Exactly like on this page in fact.

    Thanks !

    March 10, 2017 at 11:40 am #758827
    fcp

    Hello !

    Can you help please ?

    Thanx

    March 13, 2017 at 5:10 pm #760100
    Victoria

    Hi,

    It is the intended behavior, the container stays the same size, just the image inside zooms a little bit, seeming to be bigger(closer) and yes, gets cut on the edges (visually). If you make images scale on hover, it will look like a lot of jumping elements on the page. Many people find it annoying.

    You can put gallery elements closer, it might look nicer:

    
.av-large-gap.av-flex-size .av-masonry-entry .av-inner-masonry {
    position: relative;
    margin-right: 3px;
    margin-bottom: 3px;
}

    Let me know if this was helpful.
    Best regards,
    Victoria

    March 14, 2017 at 11:31 am #760594
    fcp

    Hi Victoria,

    You didn’t understand my problem but you exactly explained what I want !

    What I want is this “intended behavior, the container stays the same size, just the image inside zooms a little bit, seeming to be bigger(closer) and yes, gets cut on the edges (visually)” but on images from this page in private content.

    Thank you !

    March 19, 2017 at 10:28 am #763155
    Victoria

    Hi fcp,

    You could use here masonry gallery also and just display these three items and you would get the effect you want out of the box. It is the easiest solution I see now.

    If you want us to take a closer look, please provide us temporary admin access to your website in the private content box.

    Best regards,
    Victoria

    March 19, 2017 at 6:36 pm #763277
    fcp

    Hi Victoria,

    I can not use a masonry gallery here, because I couldn’t build the page the same way as I did.

    What I simply would like is the css code to reproduce the same behavior, that’s all. Could you help me to do this ?

    I give you the credentials to access to my website in private content.

    Thanks !

    March 21, 2017 at 5:58 pm #764283
    Victoria

    Hi fcp,

    You can put this rule in your enfold-child/styles.css

    
.flex_column.av_one_third.av-animated-generic {
	overflow: hidden;
}

    Let us know if you have any more questions.

    Best regards,
    Victoria

    March 21, 2017 at 6:00 pm #764284
    Victoria

    Hi,

    The image you use for background of the page makes the page load very slow. Maybe, it’s better to optimize the image, or make a small square and make it repeat all over.

    Best regards,
    Victoria

    March 22, 2017 at 1:25 am #764496
    fcp

    Hi Victoria,

    Thanks for your help.
    We’re closed to the goal…
    I tried without the “.av_one_third” (because I will not need this code on this page only) and it’s closed to work.

    As you can see, there still is one problem : it doesn’t work on the bottom of the images. Indeed, what I would like is a code which acts on images only, not on the entire columns…

    I tried to attribute a css class (image-sous-menu) to the images and add this code :

    .image-sous-menu {overflow: hidden;}

    …but it doesn’t work.

    Any help ?

    PS : thanks for the advice about the background :-)

    March 23, 2017 at 10:42 am #765290
    Victoria

    Hi fcp,

    Here is the css rule for that:

    
.page.page-id-2508 .hr.hr-invisible.avia-builder-el-4.el_after_av_image.el_before_av_font_icon  {
    background-color: #eee;
}

    Let us know if this was helpful :)

    Best regards,
    Victoria

    March 25, 2017 at 3:59 am #766442
    fcp

    Hi,

    What you did here is adding the same background-color than my background, but this code will not work if I use it on another image somewhere else on my website…
    What I simply would like to know is the code to use to do this effect on any image.

    Thanks

    March 26, 2017 at 8:55 pm #767048
    Victoria

    Hi fcp,

    Unfortunately, this kind of fixes are not universal, because elements and styles applied to them vary greatly from page to page.

    If you need further assistance please let us know.

    Best regards,
    Victoria

    March 27, 2017 at 11:55 am #767356
    fcp

    Hi,

    Ok thanks !

    March 31, 2017 at 5:26 pm #770095
    fcp

    Hi Victoria,

    The zoom in animation on the image works properly with this code :
    .custom-class {
    -webkit-transform: scale(1.06);
    -moz-transform: scale(1.06);
    transform: scale(1.06);
    -webkit-transition: all 0.6s ease-in-out;
    -moz-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;}

    …but when the cursor is leaving the image, it immediately recovers its original size, without “zoom out transition”.
    Which code is missing to apply this transition after mouse hover ?

    Thanks !

    April 1, 2017 at 5:39 pm #770376
    Victoria

    Hi fcp,

    I think it should be something like:

    
.custom-class:hover {
-webkit-transform: scale(1.06);
-moz-transform: scale(1.06);
transform: scale(1.06);
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;}

.custom-class {
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out; }

    If you need further assistance please let us know.
    Best regards,
    Victoria

    April 17, 2017 at 1:26 am #778530
    fcp

    Hi Victoria,

    It works perfectly !
    For now, it’s ok for me. The topic can be closed.

    Thanks a lot Victoria !!

    April 17, 2017 at 10:42 am #778604
    Rikard

    Hi,

    Glad we could help. Please open a new thread if you should have any further questions or problems.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 21 posts - 1 through 21 (of 21 total)
  • The topic ‘Image with Zoom In effect when hover and getting cut off’ is closed to new replies.