Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • March 25, 2020 at 10:27 am #1197611
    tomketelings

    Hi,
    I want to change specific items in the portfolio grid to show a small video when hover over the item.
    I searched the forum and managed to create it with an animated gif.
    I added custom CSS in the code block for that page. That works.
    But for now I can only manage it by assigning the item number: .grid-entry:nth-child(1)
    That works, but if I add a new item or change the order, than the numbers won’t match anymore.
    Is there a solution to use the name of the item or the name of the portfolio number instead of the child(x) number?
    Or maybe there’s another way to create video on hover? For example with a mp4?

    Thank you.
    Best regards,
    Tom Ketelings

    March 25, 2020 at 11:01 am #1197618
    Yigit

    Hey Tom,

    Thanks for contacting us!

    You can use post entry ID to target more precisely – https://imgur.com/a/hUbBe4o

    .grid-entry.post-entry-4486 article.inner-entry a.grid-image { 
/* Your code goes here */ 
}

    Regards,
    Yigit

    March 25, 2020 at 9:23 pm #1197863
    tomketelings

    Hi Yigit,

    thank you for your reply. It works great.
    I use this code now.
    It has a fade-in to the video, but how can I make a nice fade-out from the gif-video back to the image?

    Do you know if the GIF’s slow down the website?
    regards Tom

    March 27, 2020 at 4:38 pm #1198370
    tomketelings

    Hi,

    or is there a way to use mp4 or webm for this?

    regards Tom

    March 31, 2020 at 4:53 am #1199253
    Ismael

    Hi,

    You can create a pseudo element inside the grid image, set its initial opacity to 0 and apply the gif background to it. You can then set it to fade in on hover.

    .grid-entry.post-entry-3831 .grid-image::before {
	background-size: contain;
	background-image: url(https://beeldwerk.tv/wp-content/uploads/2020/03/venlo-3sec.gif);
	background-color: rgba(255,255,255,0.0);
	background-repeat: no-repeat;
	background-position: 50% 50%;
	transition: all 0.5s;
	content: '';
	width: 100%;
	height: 100%;
	display: block;
	position: absolute;
	z-index: 0;
	opacity: 0;
}

.grid-entry.post-entry-3831:hover .grid-image::before {
	opacity: 1;
}

    Best regards,
    Ismael

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