Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • April 22, 2021 at 11:45 am #1296008
    AliAbabwa

    Dear support,
    How can I make Timeline images to be animated like animation inside photo (image-overlay-inside)?

    April 25, 2021 at 12:31 am #1296562
    Mike

    Hey AliAbabwa,
    Thank you for your patience when I take a look at an example of our timeline I see that it already shows the “fadein” animation, but I’m not sure which image animation you would like to achieve. Please try creating a test page with the timeline element as you will be using it and an image with the animation that you like and we can try copying the animation for you. We will need to see the timeline as you intend to use it because the different options apply different classes to it and this is not a general kind of customization.

    Best regards,
    Mike

    April 26, 2021 at 11:54 am #1296738
    AliAbabwa

    Timeline-images.jpg

    April 28, 2021 at 7:57 am #1297112
    Ismael

    Hi,

    Thank you for the info.

    The image in the milestone bullet is actually added as background and not as an actual image element, so it cannot have the overlay or the hover effect. But you can use css to create a different overlay effect.

    .milestone_icon .milestone_inner:before {
    opacity: 0;
    content: '>';
    display: table;
    text-align: center;
    vertical-align: middle;
    width: 100%;
    height: 100%;
    transition: all 1s;
}

.milestone_icon:hover .milestone_inner:before {
    background: rgba(255,255,255,0.5);
    opacity: 1;
}

    Best regards,
    Ismael

    April 28, 2021 at 4:06 pm #1297180
    AliAbabwa

    Thank you, Ismael.
    I try…
    It’s not exactly like photo element:

    a .milestone_icon .milestone_inner:before {
	opacity: 0;
	content:"\E832";
	font-family: 'entypo-fontello';
	font-size: 18px;
	font-weight: normal; 
	position: absolute;
	border-radius: 50px;
	background: #000;
	height:80px;
	width:80px;
	line-height:80px;
	left:50%;
	top:50%;
	margin: -40px 0 0 -40px;
	z-index: 500;
	text-align: center;
	color:#fff;
	transition: all 0.5s;
}
a .milestone_icon:hover .milestone_inner:before {
	background: rgba(255,255,255,0.5);
	opacity: 1;
}

    So, how can I make it to be exactly like photo element?

    • This reply was modified 3 years, 7 months ago by AliAbabwa.
    April 30, 2021 at 5:07 am #1297452
    Ismael

    Hi,

    Unfortunately, that is not possible without significant modification in the theme. The function or script js > avia.js > avia_hover_effect requires an actual image element, which is not available in the milestone bullet because the image is applied as background. You may have to continue using the css code that we recommended above.

    Thank you for your patience.

    Best regards,
    Ismael

    April 30, 2021 at 1:16 pm #1297551
    AliAbabwa

    Thanks, Ismael.
    So, I will use my alternative code with a similar result.

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