Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • February 5, 2015 at 9:10 pm #391668
    lightseed

    Hey guys,

    I have a homepage with four sub-sections (see private info for site link).

    Each sub-section contains images that link off to other parts of the site. Some have been created as a masonry gallery, one set is a portfolio gallery and the last three are blog posts.

    What I want to do is make the hover/overlay effect for each of these images consistent. I am aiming to have the hover/overlay effect be a simple icon that appears, similarly to the current situation on the items in the ‘Reach’ subsection, except I want to use a different custom icon for each sub-section.

    Can you advise me on the CSS needed to make this image hover/overlay effect consistent in this way that will also apply across the site? I can’t quite figure out how to apply it to masonry gallery items.

    It seems to be applied to Portfolio items and Blog posts automatically and I have edited it a little to remove the white overlay and I think I know how to add a custom icon but how do you remove the default arrow?

    many thanks in advance,

    Jody

    February 6, 2015 at 7:11 pm #392207
    Elliott

    Hi Jody!

    Unfortunately I do not see an easy way of going about that. It might be feasible if we use images instead of icons. In that case you could use some CSS like so.

    #after_section_3 .image-overlay.overlay-type-extern .image-overlay-inside:before {
  background: url("URL to your image") !important;
  content: "" !important;
}

    And then rinse and repeat for each section. I really like how you used the grey filters on the images. Personally I would be doing that for each section.

    Regards,
    Elliott

    • This reply was modified 9 years, 9 months ago by Elliott.
    February 6, 2015 at 8:17 pm #392251
    lightseed

    Hey Elliot,

    Thanks for your reply.

    I don’t quite understand how would I apply this to the images in the first few sections. The masonry gallery elements don’t seem to have an overlay class?

    Ideally I would like all of them to start off greyscale and then display an image on hover, in all sections. I guess this isn’t going to be possible?

    thanks in advance,

    Jody

    February 9, 2015 at 11:17 am #392936
    Ismael

    Hi!

    Maybe a screenshot of the hover state will help. You can start with this code:

    .av-masonry-outerimage-container:hover .av-masonry-image-container:before {
content: '';
display: block;
background: red;
width: 20px;
height: 20px;
position: absolute;
top: 0;
left: 0;
z-index: 1000;
}

    Notice the red square when you hover over the gallery images. Adjust the code to get what you want.

    Cheers!
    Ismael

    February 9, 2015 at 4:08 pm #393116
    lightseed

    Hey Ishmael,

    Thanks for your help, thats was great! I’m almost there…

    So on the http://dev.forest-carbon.org/ I’ve added my own image for the overlays in each subsection. So far so good.

    On the http://dev.forest-carbon.org/reach#projects page, I have managed to make a custom overlay using the same image as I use on the homepage in the ‘Reach’ section, but here it fades in and also the image seems knocked back a bit?

    Could you tell me how I can apply the same fade in effect to the homepage overlays and how I control the opacity of them? I’m trying to get both the homepage image overlays and the project overlays to be identical in their effects and I’m so close!

    many thanks!

    Jody

    February 11, 2015 at 9:59 am #394168
    Ismael

    Hey!

    Replace the code with this:

    .grid-entry:hover a.grid-image:before {
content: '';
display: block;
background: transparent url('http://dev.forest-carbon.org/wp-content/themes/enfold-child/images/project-overlay.png');
width: 350px;
height: 300px;
position: absolute;
top: 0;
left: 0;
z-index: 1000;
border-radius: 0 !important;
top: 0 !important;
margin: 0 !important;
background-color: transparent !important;
}

.grid-entry span.image-overlay.overlay-type-extern {
display: none !important;
}

    Best regards,
    Ismael

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