How to display a div when hovering over an image using CSS/HTML + Transitions?

I'm trying to achieve two things I can't figure out:
1) How to display a div when I hover over an image, ideally with a transition effect.
2) How to make the div stay up when the user shifts the mouse from the image to the div itself.

Here's my code so far; it has no transition effect and unless the div is directly next to the image, it doesn't stay up when I mouse over to it.

<style>
#Picture {
position: fixed; left: 0px; right: 0px; top: 0px; bottom: 0px; margin: auto;
width: 375px;
height: 375px;
}

#content {
display: none;
position: fixed; left: -800px; right: 0px; top: 0px; bottom: 0px; margin: auto;
width: 300px;
height: 300px;
background-color: #7377a8;
}

#Picture:hover + #content {display: block;}

#content:hover {display:block;}
</style>
<body>
<img src="" alt="Picture" id="Picture" />
<div id="Content">
Something goes here
</div>
</body>

P.S. I am sorry if I formatted anything incorrectly; I am brand new to the site.

Solution

The hover effect is not mobile-friendly (though there are more and more 'hover-sensitive' devices). To accomodate most devices I often use both :hover and :focus to 'dropdown' things. However, this requires 'focusable' elements, for which I usually use the <a>nchor tag.

But first: The point in your code is consistency as you are mix-matching lowercase and uppercase in #content and id="Content". That is why it does not work anyway.

Answering your questions:

1) make upper/lowercase consistent!

2) To create a hover with persistency, trigger the display of 'content' with a focusable 'trigger' element

On hover/click the outer <a> stays focused and therefore its sibling #content visible. On hover .shorttext its sibling .longtext will show.

On click .shorttext (actually anywhere in #content) the content box will close again as the outer <a> loses focus again.

FYI-1, attribute display is not animatable, so you will need an alternative when you need a transition on some element. In this case opacity going from 0 to 1 is used (optionally combined with width and height, from 0 to 300px).

FYI-2, using href="javascript:void(0)" instead of href="#" will prevent browers from adding an entry in their history log each click.

FYI-3 final, use CSS classes by default, these are generic making it a lot easier to copy the same behaviour in your HTML, without repeating CSS each time. IDs are specific and require you to copy equal CSS over and over.

a {
  color: currentColor;
  text-decoration: none
}

.picture {
  position: fixed;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  margin: auto;
  width: 375px;
  height: 375px;
}

.content {
  /*  display: none;  remove */
  opacity: 0; /* add */
  transition: all 150ms ease-in-out; /* add */
  position: fixed;
  left: -800px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  margin: auto;
  width: 0; /* [OPTIONAL] modify from 300px */
  height: 0; /* ditto */
  background-color: #7377a8;
}

.trigger:hover+.content,
.trigger:focus+.content {
  /* add, for persistent display of content. click elsewhere to close again */
  /*  display: block; remove */
  opacity: 1; /* add */
  width: 300px; /* [OPTIONAL] add, see above */
  height: 300px;
}

.shorttext { /* eye-candy only */
  width: 100%;
  text-align: center
}

.longtext {
  display: none
}

.shorttext:hover+.longtext {
  display: block;
}

/* little debug helper */

[outlines="1"] * {
  outline: 1px dashed purple
}

<body outlines="0">
<a class="trigger" href="javascript:void(0)"><img src="https://picsum.photos/300?random=1" alt="Picture" class="picture" /></a>
<div class="content">
    <h3 class="shorttext">short intro text, hover me</h3>

    <p class="longtext">Lorem ipsum dolor sit amet, exerci dolorem est ad. Sumo rebum prompta vim ad. Legendos expetendis id sed. Ex ius quem accusamus, pri et
        deleniti copiosae.</p>
</div>
</body>