Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • April 20, 2015 at 10:04 pm #431631
    stompi

    Hello,

    How to add image overlay – yellow for example, and custom icon from fontello icon, or other way, from custom pngs?

    I want to have yellow overlay with custom icon, when mouse is over the image in masonary gallery.

    I don’y know how to set icon on mouse hover, and how to set custom color, different than background color for overlay….

    TIA!

    • This topic was modified 9 years ago by stompi.
    April 21, 2015 at 6:30 pm #432249
    stompi

    Generally i would like to add same, yellow image, with 40% opacity, and, but it would be the icing on the cake, the custom icon – from png file.

    April 22, 2015 at 11:37 am #432705
    Ismael

    Hi!

    Thank you for using Enfold.

    Add something like this in the Quick CSS field:

    .av-masonry-outerimage-container:hover .av-masonry-image-container:before {
  content: '';
  display: block;
  background: red;
  width: 100%;
  height: 100%;
  z-index: 5000;
  position: absolute;
}

    Place an image in the content property or adjust the background.

    http://www.w3schools.com/cssref/pr_gen_content.asp

    Best regards,
    Ismael

    April 22, 2015 at 6:33 pm #433039
    stompi

    Hi!

    Thank You very much. Yellow overlay does work, and this is perfect, but i still can’t add any icon :-/

    Before, there is no icon also, maybe i have some other setting, that disable icons?

    April 23, 2015 at 7:39 am #433279
    Ismael

    Hey!

    You can add an image in the content property. Please refer to the link above, look for the url value.

    http://www.w3schools.com/cssref/tryit.asp?filename=trycss_content_url

    .av-masonry-outerimage-container:hover .av-masonry-image-container:before {
  content: url(smiley.gif);
  display: block;
  background: red;
  width: 100%;
  height: 100%;
  z-index: 5000;
  position: absolute;
}

    Best regards,
    Ismael

    April 24, 2015 at 3:22 pm #434163
    stompi
    This reply has been marked as private.
    April 25, 2015 at 3:48 am #434546
    Ismael

    Hey!

    Remove the opacity then use rgba color values to create a transparent effect:

    .av-masonry-outerimage-container:hover .av-masonry-image-container:before {
content: '';
display: block;
background: rgba(255,222,0,.5) url('http://stompor.eu/wp-content/uploads/2015/04/zoom_in_1-1121.png') 50% 40% no-repeat;
width: 100%;
height: 100%;
z-index: 5000;
position: absolute;
}

    Regards,
    Ismael

    April 25, 2015 at 9:34 am #434648
    stompi

    Hey.

    Great! Now i total happy from this masonry gallery:-)

    Thanks!

    April 27, 2015 at 5:33 am #435010
    Rikard

    Hey!

    Great, glad we could help :)

    Regards,
    Rikard

    May 2, 2016 at 2:55 pm #625810
    MadRhino

    Hi there,

    I just came across this request and like the effect.

    Is there any way to just apply to the masonry image gallery but NOT TO the masonry style blog posts.

    I would also like to display a list of links (menu items), if you will, instead of an image.

    I’d really appreciate any pointers.

    Many thanks

    May 3, 2016 at 7:42 am #626247
    Rikard

    Hi,

    Could you provide us with a link to the site in question so that we can take a closer look please?

    Best regards,
    Rikard

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.