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

Question

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.

Does this answer your question? Css transition from display none to display block, navigation with subnav — doğukan
– doğukan, Commented Mar 17, 2020 at 13:22

Rene van der Lende · Accepted Answer · 2020-03-17 15:45:54Z

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>

Pyry Lahtinen · Accepted Answer · 2020-03-17 13:59:44Z

Your code is actually pretty working. Your problem is that picture and div are not next to each other. Just move them side by side and it'll be fine.

Your div's id was Content and in CSS it was content. In some browsers IDs are case sensitive so that was maybe another problem.

I used opacity instead of display to make transition working.

Here's my code:

#picture {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 200px;
    height: 200px;
}

#content {
    opacity: 0;
    position: fixed;
    left: 200px;
    top: 0px;
    width: 200px;
    height: 200px;
    background-color: #7377a8;
    transition: opacity .5s;
}

#picture:hover + #content {
    opacity: 1;
}

#content:hover {
    opacity: 1;
}

<img src="" alt="Picture" id="picture" />
<div id="content">
    Something goes here
</div>

Subrat-lima · Accepted Answer · 2020-03-17 14:39:52Z

0

simple trick would be to put both the image and content inside of a div.

HTML

<div class="container">
  <img src="img.jpg" alt="image" class="container__img">
  <p class="container__content">
    Something goes here
  </p>
</div>

CSS

.container {
  width: 300px;
  height: auto;
  overflow: hidden;
}
.container__img {
  width: 100%;
  object-fit: cover;
}
.container_content {
  transform: translateX(-100%);
  transition: transform .5s;
}
.container:hover > .container__content {
  transform: translateX(0);
}

change display property for the content if you dont want space to be taken before it displays.
ask if something is unclear.

answered Mar 17, 2020 at 14:39

Subrat-lima

413 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related