Hi Yigit! Problem solved in 9 minutes thats a record!!!
I tried

@media only screen and (max-width: 767px) {
.coloricons .av_one_third {
    width: 33% !important;
}}

Case closed :D

Hi Andy,
It won’t work. My current settings: Title, Summary and Read more. Enfold, Blog: “Advanced layout editor to build your own blog”.
When i insert the read-more tag in a post it does not replace the current tag. I tried a button but the button doesn’t show up at the main blog post website. Could you take a look please?

Josue!!!! This works GREAT! Awesome!

Ok thanks for the info Ismael

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)

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

Thank you.

Hi Andy,
1. Since the last update the order of the “slide-meta” in the main blog page + tag page + category page is changed. Why? Now its changed to CATEGORY with the TITLE below. Then, below the TITLE there is COMMENTS and TIME. As soon as i open a blog post from this blog main page the “slide-meta” order is ok! Screenshot: http://goo.gl/4t9NLb
Red is how its displayed since the last big update, green is how i would like it.
2. In the main blog page (private content link 1) you can see the “read-more” links/buttons at every post. As soon as i open a category page or a tag page (private content links 2) the “Read more” buttons are gone. I’m not sure but i thought they where there before the big update. How can i add the read-more-link to the items in the category and the tag page?
Screenshot: http://goo.gl/P5crt7

3. Ismael gave me a full replacement code for the postslider.php. So i asked about future updates.
4. there is no 4.

Hi Andy! Did you have a look at my screenshot? The resolutions displayed below the images are the upload-resolutions. All of them are displayed in a small container on a pc. On a mobile that container is displayed much bigger. As soon as i use the 1920×1080 image the image looks like picture 1 in the screenshot (like its too sharp) So a big high quality image displayed in a small container doesn’t look good. As soon as i replace it with a smaller image the quality goes up (image 2 and smaller, image 3)
but never mind, you can close this case.

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 8 years, 5 months ago by Dutchman.

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.