default image hyperlink effects

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.

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 9 years, 1 month ago by Dutchman.

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.

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;
}

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)