Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #531260

    http://goo.gl/TfLoDX
    On this page, below the 4 blog posts i have a 5 cell-row with 5 pictures with hyperlinks. I would like to replace the default image-hyperlink effects with this:
    -webkit-transform: scale(1.2) rotate(5deg);
    moz-transform: scale(1.2) rotate(5deg);
    -o-transform: scale(1.2) rotate(5deg);
    transform: scale(1.2) rotate(5deg) !important;
    }
    I’m going to use a css class for this container so the replacement of the default image-hyperlink effect is only for these 5 images.

    #532513

    Hi Dutchman!

    if you want to give them a unique css class you need to turn on custom css field for all alb elements: http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/

    Regards,
    Andy

    #532853

    Hi Andy, i allready have the custom css field but can you tell me how to disable the default image hyperlink effect and replace them with this one (only in the 5 cell row container)?
    transform: scale(1.2) rotate(5deg) !important;
    On this page,http://goo.gl/TfLoDX, below the 4 blog posts the 5 cell-row with 5 pictures with hyperlinks.

    #533588

    Hi!

    Please add following code to Quick CSS in Enfold theme options under General Styling tab

    .page-id-731 #av-layout-grid-1 img:hover {
        -webkit-transform: scale(1.2) rotate(5deg);
        moz-transform: scale(1.2) rotate(5deg);
        -o-transform: scale(1.2) rotate(5deg);
        transform: scale(1.2) rotate(5deg) !important;
    }
    .page-id-731 #av-layout-grid-1 .image-overlay {
        display: none!important;
    }

    Regards,
    Yigit

    #533693

    Hi Yigit! Could you take a look at the 5 cell-row with 5 pictures at my website please? Image 4 and 5 have the effects i would like to use to replace the default image-hyperlink effects. I would like a code that is not based on only this grid but a general replacement code so i can use it with css class at different containers :D
    This is the code i’m using for image 4 and 5:

    .av-hover-grow:hover img {
    -webkit-transform: scale(1.2) rotate(5deg);
    moz-transform: scale(1.2) rotate(5deg);
    -o-transform: scale(1.2) rotate(5deg);
    transform: scale(1.2) rotate(5deg) !important;
    }
    .av-hover-grow img {
    -webkit-transition: transform .2s ease-out !important;
    -moz-transition: transform .2s ease-out !important;
    -o-transition: transform .2s ease-out !important;
    transition: transform .2s ease-out !important;
    }
    • This reply was modified 5 years, 6 months ago by  Dutchman.
    #534570

    Hi!

    Edit the grid row element then add a unique id (ex: custom-grid) in the Section ID field. Append the id selector in your css modification. Example:

    #custom-grid .av-hover-grow:hover img {
    -webkit-transform: scale(1.2) rotate(5deg);
    moz-transform: scale(1.2) rotate(5deg);
    -o-transform: scale(1.2) rotate(5deg);
    transform: scale(1.2) rotate(5deg) !important;
    }

    Regards,
    Ismael

    #534617

    Hi! I did excactly what you told me but nothing happens. (and i would like the transform and transition as in my previous reply here) Maybe you can login and take a look please.

    #536677

    Hey!

    change Ismael’s code to this one:

    .custom-grid .av-hover-grow:hover img {
    -webkit-transform: scale(1.2) rotate(5deg);
    moz-transform: scale(1.2) rotate(5deg);
    -o-transform: scale(1.2) rotate(5deg);
    transform: scale(1.2) rotate(5deg) !important;
    }
    

    and adjust as needed.

    Best regards,
    Andy

    #536892

    Hi, there is no difference. Nothing happens. To clear things up:http://goo.gl/TfLoDX
    On this page, below the 4 blog posts i have a 5 cell-row with 5 pictures. The first 3 images have hyperlinks. The last 2 images don’t have hyperlinks (yet). I would like to use the effects from the last 2 images (the images without hyperlinks yet) to replace the default hyperlink effects from the first 3 images. The code from these last 2 images:

    .av-hover-grow:hover img {
    -webkit-transform: scale(1.2) rotate(5deg);
    moz-transform: scale(1.2) rotate(5deg);
    -o-transform: scale(1.2) rotate(5deg);
    transform: scale(1.2) rotate(5deg) !important;
    }
    .av-hover-grow img {
    -webkit-transition: transform .2s ease-out !important;
    -moz-transition: transform .2s ease-out !important;
    -o-transition: transform .2s ease-out !important;
    transition: transform .2s ease-out !important;
    }

    But this code doesn’t apply to the first 3 images which have hyperlinks. How can i apply this code to images with hyperlinks? (only applied to this container with css class “custum-grid”)

    Yigit allready gave me the code to disable the overlay effect:

    .page-id-731 #av-layout-grid-1 .image-overlay {
        display: none!important;
    }
    
    #537649

    Hey!

    edit those 3 images in question and define a unique css class in “Aangepaste CSS Class”. Define the same unique css class for all three images. Then simply add your code to something like this:

    .your-unique-css-class-for-all-three-images {
    
    }
    

    or/and

    .your-unique-css-class-for-all-three-images:hover {
    
    }
    

    Best regards,
    Andy

    #537882

    Hi! Now the container+image has the effect. Only the image has to get the effect without the container itself. Please have look at image 1. (I’ve added the css class to the first image)

    #538076

    Hi!

    the missing thing was to activate “Image Hover effect” with “Yes, slightly increase image size” when editing the image in question. I changes it for your first image and not it’s working as expected for me. Can you confirm please?

    Cheers!
    Andy

    #538079

    Hey!

    in addition you need to change the code you are using to this one:

    .avia-image-container-inner .custom-grid:hover {
    -webkit-transform: scale(1.2) rotate(5deg);
    moz-transform: scale(1.2) rotate(5deg);
    -o-transform: scale(1.2) rotate(5deg);
    transform: scale(1.2) rotate(5deg) !important;
    }
    .avia-image-container-inner .custom-grid {
    -webkit-transition: transform .2s ease-out !important;
    -moz-transition: transform .2s ease-out !important;
    -o-transition: transform .2s ease-out !important;
    transition: transform .2s ease-out !important;
    }
    

    I already changed it in your Quick CSS.

    Cheers!
    Andy

    #538526

    Andy you’re the master!!! Thank you very much! :D

    #538871

    Hi!

    glad we could help. Let us know in a new ticket if you have some more questions related to the theme. We are happy to assist you.

    Regards,
    Andy

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

The topic ‘default image hyperlink effects’ is closed to new replies.