Tagged: , , , ,

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • June 28, 2021 at 4:30 pm #1307780
    Marc Bijl

    In the masonry grid options there’s an option to show captions on hover.
    See: https://snipboard.io/TrkFWE.jpg

    I like to have the same hover effect for the portfolio grid, but it’s not there…
    Can I add some css to achieve the same look & feel?

    June 29, 2021 at 3:39 pm #1307959
    Ismael

    Hey Marc,

    Thank you for the inquiry.

    You can try this css code to hide the grid content container initially and only display it on hover. 

    .grid-content {
	opacity: 0;
	transition: all 0.5s;
	position: absolute;
	bottom: 0;
	width: 100%;
}

.grid-entry:hover .grid-content {
	opacity: 1;
}

    Best regards,
    Ismael

    June 29, 2021 at 7:00 pm #1307988
    Marc Bijl

    Hi Ismael, sorry for my late reply; somehow the ‘Notify me of follow-up replies via email’ seems not to work…

    Your css code does a quite nice job, thank you.

    I’ve implemented it here: https://agsarchitects.e.wpstage.net/projecten-test/
    Would love to have it like here: https://agsarchitects.e.wpstage.net/projecten/

    So if we can get the font color the same, I think it’s a nice solution.

    June 29, 2021 at 9:28 pm #1308002
    Marc Bijl

    Hi Ismael, the css needed some adjustments, and I think I’ve managed to get the hover effect the same. I added following code, can you please check if it needs improvement, or if it’s quite right this way? Thanks!

    .grid-entry img { 
	transition: all .4s ease-in-out; }

.grid-entry:hover img {
    -webkit-transform: scale(1.05,1.05);
    transform: scale(1.05,1.05);
}

.grid-entry .grid-content {
	opacity: 0;
	transition: all 0.4s ease-in-out;
	position: absolute;
	bottom: 0;
	width: 100%;	
	-webkit-transform: rotateX(120deg);
	-webkit-transform-origin: center bottom;
	-webkit-transform-style: preserve-3d;
	-moz-transform: rotateX(120deg);
	-moz-transform-origin: center bottom;
	-moz-transform-style: preserve-3d;
	transform: rotateX(120deg);
	transform-origin: center bottom;
	transform-style: preserve-3d;
}

.grid-entry .grid-content h3 {
	font-size:15px;
}

.grid-entry:hover .grid-content {	
	opacity:1; 
	-webkit-transform: rotateX(0deg);
	-webkit-transform-origin: center bottom;
	-webkit-transform-style: preserve-3d;
  -moz-transform: rotateX(0deg);
	-moz-transform-origin: center bottom;
	-moz-transform-style: preserve-3d;
	transform: rotateX(0deg);
	transform-origin: center bottom;
	transform-style: preserve-3d;	
}

.grid-entry .image-overlay {
	background-color: transparent!important;
}

.grid-entry:hover .image-overlay {
	background-color: transparent!important;
}

.main_color .grid-entry-title {
	color:black;
}
    June 30, 2021 at 1:20 pm #1308120
    Marc Bijl

    Hey Ismael,

    Right now I have replaced the masonry grid by the portfolio grid at the original/right URL:
    https://agsarchitects.e.wpstage.net/projecten/

    The only thing that’s not exactly the I’d like to see, is the little content shift. After loading the page, the white space below each row of images is quite large, too large actually, and then (I guess after loading all portfolio items) this space disappears and the images move up (to the place where they belong).

    Any idea how to solve this?

    I thought it might be caused by the grid settings, so I set the image size to portfolio (495×400) instead of the width of the column. However, this does not make any difference.

    Suggestions appreciated ;-)

    July 1, 2021 at 10:01 am #1308274
    Ismael

    Hi,

    Glad to know that you managed to improve the css code. Now, regarding the layout shift, it seems that the script is still calculating the height of the grid content because we set the transition property to include all css properties including the position. To change it, try to set the transition property so that it only affect the opacity. Change this line..

    transition: all 0.4s ease-in-out;

    .. to.

    transition: opacity 0.4s ease-in-out;

    Best regards,
    Ismael

    July 1, 2021 at 10:11 am #1308276
    Marc Bijl

    Hi Ismael, thnx for thinking with me :-)

    Tried to change the transition property, however, didn’t have effect…

    Feel free to try through the admin environment; right now I’m doing the development css changes in the Customizer’s CSS panel.
    Admin account details in Private Content.

    July 5, 2021 at 8:22 am #1308711
    Ismael

    Hi,

    Where did you add the css code? We cannot find it in the Quick CSS field and the Appearance > Editor is not accessible, so we cannot access the style.css file. The transition is still set to “all” when we checked page.

    Best regards,
    Ismael

    July 5, 2021 at 8:46 am #1308721
    Marc Bijl

    Hi Isamael, tried css code, but since it didn’t work, I set the old code back.

    Now it’s in place again, through the customizer’s extra css panel: https://snipboard.io/dWzQiV.jpg

    Feel free to try and see what works ;-)

    July 7, 2021 at 7:04 am #1309040
    Ismael

    Hi,

    Looks like adjusting the transition is not helping but applying a maximum height does. Did you disable the portfolio grid animation? We added this css code.

    .grid-sort-container .grid-entry {
    max-height: 279px;
}

    Best regards,
    Ismael

    July 7, 2021 at 9:51 am #1309069
    Marc Bijl

    That is just perfect Ismael, you just made my day; thanks a ton, great support!

    Ticket resolved ;-)

    July 9, 2021 at 3:44 am #1309317
    Rikard

    Hi,

    Great, I’m glad that Ismael could help you out, and thanks for the update. I’ll go ahead and close this thread for now then, please open a new thread if you should have any further questions or problems.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘Portfolio grid hover like masonry grid hover’ is closed to new replies.