Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • October 23, 2015 at 4:32 pm #523961
    Ben

    Hello guys,

    First, thanx so much for the work and help you provide here
    here is my needs:
    On masonry portfolio grid, i’m looking for changing the way the title appears on mouse over, from the settled “window” style to a “fade in” style.
    i guess there is a css tricks that makes that possible but i can’t find how..
    Any help would be great..

    thanks !

    Ben

    October 23, 2015 at 5:01 pm #523985
    Guenni007

    if i understand your masonry grid right – this seem to be responsible for title:

    .avia_desktop.avia_transform3d .av-caption-on-hover .av-masonry-entry.av-masonry-item-with-image:hover .av-inner-masonry-content {
    transition: opacity 2s ease-in;
}

    effects other than ease you can find via google “transition”
    you have to play with the 2s mode

    • This reply was modified 9 years ago by Guenni007.
    October 23, 2015 at 6:31 pm #524056
    Ben

    hey !

    Thank you Guenni007 it works fine, i’ve tried to set the ‘mouse out’ to have the same effect than the ‘mouse hover ‘ with some google css tips..but in vain, if you have any idea on how do i have to organize my code, i would love it !

    thanks anyway for the help !

    Ben

    October 26, 2015 at 6:34 am #524648
    Ismael

    Hey!

    Thank you for using Enfold.

    Please try this in the Quick CSS field:

    .avia_desktop .av-hover-overlay-active .av-masonry-image-container {
    opacity: 1;
}

.avia_desktop .av-hover-overlay-active .av-masonry-entry:hover .av-masonry-image-container {
    opacity: 0.7;
}

    Best regards,
    Ismael

    October 26, 2015 at 10:18 am #524761
    Ben

    Hey Ismael,
    thanks for the support, unfortunately those codes doesn’t work for me..
    First i’ve put Guenni ‘s code and have the good fade effect for the mouse hover on title, but in the same time i had the “window” effect for the mouse hover off, which wasn’t good, so i deleted the code and set it like this :

    .av-masonry-entry figcaption.av-inner-masonry-content.site-background {
    opacity: 1;
    background-color: rgba(0,0,0,0.7);
    -webkit-transition: opacity linear 0.5s;
    -moz-transition: opacity linear 0.5s;
    transition: opacity linear 0.5s;
    }

    now i do have the fade effect on mouse hover on and nothing on mouse hover off, which is better than the “window” effect.. what would be great is to have the same fade effect on mouse hover off to . :)

    October 26, 2015 at 3:12 pm #524928
    Yigit

    Hey!

    Can you please post the link to your page where we can see your element?

    Regards,
    Yigit

    October 26, 2015 at 3:37 pm #524946
    Ben

    Hey Ygit, thanks for helping, here are some accès code in private, as long as you have access can you have a quick look at a mobile issue i have that moves the content on the first section and image background on others section when scrolling down ( it acting weird, like there is a gap or something..).I couldn’t find any thread on this, but I could open another one if you prefer…

    October 29, 2015 at 12:13 pm #526693
    Ben

    well i just discover that the log in id didn’t work, i will open another thread with correct id’s,
    If there is nothing new for the hover effect then we can close this topic i guess.. thanks !

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘changing title effect on masonry’ is closed to new replies.