Tagged: 

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • June 19, 2014 at 11:42 am #281147
    xpoveda

    Hi, in my new web

    http://thegallery.artistandbeer.com
    info/break2008

    I like in “on hover” effect of masonry images the background and text is in red (C20000) and white (FFFFFF) respectively.

    I like too the red background is in 100% of image and with opacity and add an icon

    like this:
    http://www.nauart.com/

    Can you help me with css modifications?

    Thanks so much!!

    Xavier.

    June 19, 2014 at 11:53 am #281156
    Yigit

    Hi xpoveda!

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

    .av-masonry-entry .av-masonry-entry-title {
color: #C20000;
}

    Cheers!
    Yigit

    June 19, 2014 at 12:11 pm #281167
    xpoveda

    Hi Yigit,

    With these changes(abobe) ok, but I like too add and icon to overlay.
    Can you help me please?

    Thanks!!

    Xavier.

    —

    .avia_desktop.avia_transform3d .av-caption-on-hover .av-masonry-entry.av-masonry-item-with-image .av-inner-masonry-content {
    height: 100%;
    opacity: 0.6;
    }
    .av-caption-on-hover .av-masonry-item-with-image .av-inner-masonry-content {
    background-color: #C20000;
    }
    .av-masonry-entry .av-masonry-entry-title {
    color: #FFFFFF;
    }

    June 19, 2014 at 12:25 pm #281170
    Yigit

    Hi!

    Can you post a screenshot and show the changes you would like to make?

    Best regards,
    Yigit

    June 19, 2014 at 2:35 pm #281204
    xpoveda

    Hi Yigit,

    http://thegallery.artistandbeer.com/wp-content/uploads/2014/06/masonry-hover.png
    info/break2008

    June 19, 2014 at 2:59 pm #281214
    Yigit

    Hey!

    Please try following code as a starting point

    h3.av-masonry-entry-title.entry-title:after {
content: '+';
position: relative;
top: 100px;
left: 10px;
width: 100%;
font-size: 90px;
font-weight: normal;
}

    You can change + sign with url to your icon.

    Best regards,
    Yigit

    June 26, 2014 at 11:22 am #283994
    xpoveda

    Perfect!!!

    Xavier.

    June 26, 2014 at 12:03 pm #284008
    Yigit

    Hi!

    You are welcome Xavier, glad we could help! :)

    Regards,
    Yigit

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