Trigger an animation on one element by hovering over another element - html

Question

I am new to this and I'm stuck on a project.
I am trying to get an animation to cause an image to appear on the page when you hover over another element.
I already have the animation working, but what I can't figure out is how first to make the image invisible and the cause the animation to start when the said element is hovered in this case a h4 element.
I've tried everything I can think of and read several other posts relating to this but no luck. I think it might be something with me having to add position (absolute or relative) but I'm not sure.
This is the css for that section without any hovering function:
.timeline-img {
visibility: hidden;
}
.hovered:hover + p + .timeline-img {
animation: 7s alternate slideIn;
transition: all .2s;
visibility: visible;
}
.hovered:hover:after + p + .timeline-img {
visibility: visible;
}
#keyframes slideIn {
from {
margin-left: 100%;
width: 300%;
opacity: 0;
}
to {
margin-left: 0%;
width: 100%;
opacity: 1;
}
}
<div class="content">
<h4 class="hovered">Shepherds discovered coffee in Ethiopia circa 800 A.D.</h4>
<p>Legend has it that 9th century goat herders noticed the effect caffeine had on their goats, who appeared to "dance" after eating coffee berries. A local monk then made a drink with coffee berries and found that it kept him awake at night, thus the original cup of coffee was born.</p>
<div class="timeline-img">
<img src="shepherd.jpg" alt="Shepherd" class="fact-img">
</div>
</div>
Thanks to whoever helps me out and please explain as I'm still very new to this and learning.

Answer 1

You can do something like this:
The syntax is straightforward enough: just two or more selectors separated by a plus (+) symbol. The simplest construction is two elements with a plus between them. read more: Adjacent-Sibling Selector
.content h4:hover + p + .timeline-img{
animation: 7s alternate slideIn;
transition: all .2s;
}
#keyframes slideIn {
from {
margin-left: 100%;
width: 300%;
opacity: 0;
}
to {
margin-left: 0%;
width: 100%;
opacity: 1;
}
}
<div class="content">
<h4 class="hovered">Shepherds discovered coffee in Ethiopia circa 800 A.D.</h4>
<p>Legend has it that 9th century goat herders noticed the effect caffeine had on their goats, who appeared to "dance" after eating coffee berries. A local monk then made a drink with coffee berries and found that it kept him awake at night, thus the original cup of coffee was born.</p>
<div class="timeline-img">
<img src="shepherd.jpg" alt="Shepherd" class="fact-img">
</div>
</div>

Answer 2

In this example,
We set a :hover pseudo-class on the target sibling (~) class.
i.e. .hovered:hover ~ .timeline-img
We then use the animation-play-state property on the standard + hover state items.
animation-play-state: paused
animation-play-state: running
https://developer.mozilla.org/en-US/docs/Web/CSS/animation-play-state
.timeline-img {
-webkit-transition: all .2s;
-o-transition: all .2s;
transition: all .2s;
/* necessary */
-webkit-animation: 2s alternate slideIn;
animation: 2s alternate slideIn;
-webkit-animation-play-state: paused;
animation-play-state: paused;
/* Optional */
-webkit-animation-iteration-count: 2;
animation-iteration-count: 2;
-webkit-animation-direction: alternate;
animation-direction: alternate;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.hovered:hover ~ .timeline-img {
-webkit-animation-play-state: running;
animation-play-state: running;
}
#-webkit-keyframes slideIn {
from {
margin-left: 100%;
width: 300%;
opacity: 0;
}
to {
margin-left: 0%;
width: 100%;
opacity: 1;
}
}
#keyframes slideIn {
from {
margin-left: 100%;
width: 300%;
opacity: 0;
}
to {
margin-left: 0%;
width: 100%;
opacity: 1;
}
}
.red {
background: red;
height: 50px;
width: 50px;
border-radius: 100%
}
<div class="content">
<h4 class="hovered">Shepherds discovered coffee in Ethiopia circa 800 A.D.
</h4>
<p>
Legend has it that 9th century goat herders noticed the effect caffeine had on their goats, who appeared to "dance" after eating coffee berries. A local monk then made a drink with coffee berries and found that it kept him awake at night.
</p>
<div class="timeline-img">
<div class="red"></div>
</div>
</div>

Answer 3

Try this once.
.timeline-img{
transition: all .2s;
animation: 7s alternate slideIn;
animation-play-state: paused;
}
.hovered:hover ~ .timeline-img{
animation-play-state:running;
}
#keyframes slideIn {
from {
margin-left: 100%;
width: 300%;
opacity: 0;
}
to {
margin-left: 0%;
width: 100%;
opacity: 1;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
<h4 class="hovered">Shepherds discovered coffee in Ethiopia circa 800 A.D.</h4>
<p>Legend has it that 9th century goat herders noticed the effect caffeine had on their goats, who appeared to "dance" after eating coffee berries. A local monk then made a drink with coffee berries and found that it kept him awake at night, thus the original cup of coffee was born.</p>
<div class='timeline-img'>
<img src="shepherd.jpg" alt="Shepherd" class="fact-img">
</div>
</div>