87

I'm trying to show a description when hovering over an image. I've already done it in a less than desirable way, using image sprites and hovers here: I want it to look exactly like how I have it, but using real text instead of an image.

I've tried a few different things but I can't seem to figure out how to do it. I'm trying to do it using HTML and CSS only, but I'm not sure if that's possible.

Feel free to poke around in my code, I'll paste what I think is relavent here.

HTML

div#projectlist {
  width: 770px;
  margin: 0 auto;
  margin-top: 20px;
  margin-bottom: 40px;
}

div#buzzbutton {
  display: block;
  float: left;
  margin: 2px;
  background: url(content/assets/thumbnails/design/buzz_sprite.jpg) 0 0px no-repeat;
  width: 150px;
  height: 150px;
}

div#buzzbutton:hover {
  background: url(content/assets/thumbnails/design/buzz_sprite.jpg);
  width: 150px;
  height: 150px;
  background-position: 0 -150px;
}

div#slinksterbutton {
  display: block;
  float: left;
  background: url(content/assets/thumbnails/design/slinkster_sprite.jpg) 0 0px no-repeat;
  width: 150px;
  height: 150px;
  margin: 2px;
}

div#slinksterbutton:hover {
  background: url(content/assets/thumbnails/design/slinkster_sprite.jpg);
  width: 150px;
  height: 150px;
  background-position: 0 -150px;
}
<div id="projectlist">
  <div id="buzzbutton">
    <a href="buzz.html" title=""><img src="content/assets/thumbnails/transparent_150x150.png" alt="" /></a>
  </div>

  <div id="slinksterbutton">
    <a href="slinkster.html" title=""><img src="content/assets/thumbnails/transparent_150x150.png" alt="" /></a>
  </div>
</div>
Rnne Msly
  • 59
  • 12
Will Ryan
  • 1,815
  • 4
  • 19
  • 21
  • Make sure you keep in mind that text is not 100% controllable. Even if it looks like it all fits within the dimensions of your image with the styles you're using, there is a potential for overflow and/or hidden text if a user specifies a larger font-size. – cimmanon Jan 10 '13 at 17:57
  • 1
    chances are you're using bootstrap, if you are there's a nice functionality called 'tooltip' which does exactly what you're describing – Robert Sinclair Aug 16 '16 at 03:24

10 Answers10

142

It's simple. Wrap the image and the "appear on hover" description in a div with the same dimensions of the image. Then, with some CSS, order the description to appear while hovering that div.

/* quick reset */
* {
  margin: 0;
  padding: 0;
  border: 0;
}

/* relevant styles */
.img__wrap {
  position: relative;
  height: 200px;
  width: 257px;
}

.img__description {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(29, 106, 154, 0.72);
  color: #fff;
  visibility: hidden;
  opacity: 0;

  /* transition effect. not necessary */
  transition: opacity .2s, visibility .2s;
}

.img__wrap:hover .img__description {
  visibility: visible;
  opacity: 1;
}
<div class="img__wrap">
  <img class="img__img" src="http://placehold.it/257x200.jpg" />
  <p class="img__description">This image looks super neat.</p>
</div>

A nice fiddle: https://jsfiddle.net/govdqd8y/

EDIT:

There's another option if you don't want to explicitly set the height of the <img> on the wrapping <div>, and that is simply setting the <div>'s display to inline-block. (Keep in mind, though, that it won't look good if the image fails to load.)

If you choose this option, you'll notice that there'll be a slight spacing between the <img> and the bottom of the wrapping <div>. That's because of the <img>'s default vertical-align value of baseline. If you set it to bottom it will disappear.

Here's a fiddle using this option: https://jsfiddle.net/joplomacedo/5cL31o0g/

João Paulo Macedo
  • 15,297
  • 4
  • 31
  • 41
  • Gah, I knew I was making it more complicated than it needed to be! Thanks a lot, I'm going to mess around with this code a bit but it looks like it's just what I wanted. – Will Ryan Jan 10 '13 at 17:56
  • .imgDescription {visibility: none;... better. Cheers. – justinkoh Jun 12 '14 at 00:08
  • 1
    Does that exist? "visibility: none"? I don't think so. (not trying to be a dick =P ) – João Paulo Macedo Jun 12 '14 at 10:26
  • When the text is large, the box shrinks away from the top and bottom. I can't figure out how to fix this. – Luke Miles Feb 16 '16 at 05:13
  • why can't you do .imgDescription: hover instead? – I Like Sep 07 '16 at 19:04
  • In the particular case that I used as an example (in that the .imgDescription element is covering the whole image from the beginning), you could - whenever you hover over the image, you're hovering over the description as well - so .imgDescription:hover would work. But suppose that the .imgDescription doesn't cover the image to start with - that it slides up from the bottom of the image when you hover over the image... – João Paulo Macedo Sep 08 '16 at 12:11
  • ... Like this: http://jsbin.com/jehibucopa/edit?html,css,js,output . Then .imgDescription:hover wouldn't work because, at the start, when you hover over the image you're not hovering the description. I hope I made myself clear :) – João Paulo Macedo Sep 08 '16 at 12:11
  • @banzomaikaka I think its display:none or visibility:hidden – ScottC Oct 12 '16 at 17:12
  • 2
    Is there a way to center the hovered text vertically? – CentrixDE Feb 20 '17 at 00:23
  • Waiting for this answer too, @CentrixDE! – Robert Feduș Apr 01 '20 at 19:56
  • Hi Centrix. You can center content in a variety of ways. Pick your favorite here: https://css-tricks.com/centering-css-complete-guide/ – João Paulo Macedo Apr 01 '20 at 21:56
  • While this answer in the technique is correct and has the most simplicity it should not be used for any modern approach. Since 2016 (WCAG) has release guidelines for accessibility reasons (which did not exist in 2013, the time of the answer). As such you should use `figure` as wrapping element instead of a `div` and `figcaption` as a text container instead of `p`. – tacoshy Sep 22 '22 at 09:58
117

In your HTML, try and put the text that you want to come up in the title part of the code:

<a  href="buzz.html" title="buzz hover text">

You can also do the same for the alt text of your image.

mrpopo
  • 1,563
  • 2
  • 12
  • 19
22

You can also use the title attribute in your image tag

<img src="content/assets/thumbnails/transparent_150x150.png" alt="" title="hover text" />
Sathish M
  • 345
  • 2
  • 6
6

This is what I use to make the text appear on hover:

* {
  box-sizing: border-box
}

div {
  position: relative;
  top: 0px;
  left: 0px;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  overflow: hidden;
  text-align: center
}

img {
  width: 400px;
  height: 400px;
  position: absolute;
  border-radius: 50%
}

img:hover {
  opacity: 0;
  transition:opacity 2s;
}

heading {
  line-height: 40px;
  font-weight: bold;
  font-family: "Trebuchet MS";
  text-align: center;
  position: absolute;
  display: block
}

div p {
  z-index: -1;
  width: 420px;
  line-height: 20px;
  display: inline-block;
  padding: 200px 0px;
  vertical-align: middle;
  font-family: "Trebuchet MS";
  height: 450px
}
<div>
  <img src="https://68.media.tumblr.com/20b34e8d12d4230f9b362d7feb148c57/tumblr_oiwytz4dh41tf8vylo1_1280.png">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing <br>elit. Reiciendis temporibus iure dolores aspernatur excepturi <br> corporis nihil in suscipit, repudiandae. Totam.
  </p>
</div>
aditya
  • 81
  • 1
  • 4
4

.container {
  position: relative;
  width: 50%;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #008CBA;
}

.container:hover .overlay {
  opacity: 1;
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
<!DOCTYPE html>
<html>
<head></head>
<body>

<div class="container">
  <img src="http://lorempixel.com/500/500/" alt="Avatar" class="image">
  <div class="overlay">
    <div class="text">Hello World</div>
  </div>
</div>

</body>
</html>

Reference Link W3schools with multiple styles

Muddasir Abbas
  • 1,699
  • 1
  • 20
  • 37
2
HTML
<img id="close" className="fa fa-close" src="" alt="" title="Close Me" />

CSS
#close[title]:hover:after {
  color: red;
  content: attr(title);
  position: absolute;
  left: 50px;
}
Hamid Hemani
  • 21
  • 1
  • 3
    When posting source code, it is a good to explain what it does and how it solves the problem. – Justin Feb 23 '20 at 02:41
1

I saw a lot of people use an image tag. I prefer to use a background image because I can manipulate it. For example, I can:

  • Add smoother transitions
  • save time not having to crop images by using the "background-size: cover;" property.

The HTML/CSS:

.overlay-box {
  background-color: #f5f5f5;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
}

.overlay-box:hover .desc,
.overlay-box:focus .desc {
  opacity: 1;
}

/* opacity 0.01 for accessibility */
/* adjust the styles like height,padding to match your design*/
.overlay-box .desc {
  opacity: 0.01;
  min-height: 355px;
  font-size: 1rem;
  height: 100%;
  padding: 30px 25px 20px;
  transition: all 0.3s ease;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
}
<div class="overlay-box" style="background-image: url('https://via.placeholder.com/768x768');">
  <div class="desc">
    <p>Place your text here</p>
    <ul>
      <li>lorem ipsum dolor</li>
      <li>lorem lipsum</li>
      <li>lorem</li>
    </ul>
  </div>
</div>
Gcamara14
  • 510
  • 4
  • 14
1

For accessibility reasons, you should use the correct semantic tags. Use a figure as a container and include the text to the image as figcaption.

Apply position: relative to the container and then position: absolute to the figcaption. Simply hide the figcaption with display: block and make it visible again by using :hover on the wrapping figure element.

figure {
  position: relative;
}

figcaption {
  position: absolute;
  inset: 2px;  
  display: none;
}

figure:hover figcaption {
  display: flex;
}


/* for visualization only */
figure {
  display: inline-block;
}

figcaption {
  padding: 1em;
  justify-content: center;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.7);
}

img {
  border: 2px dashed red;
}
<figure>
  <img src="https://via.placeholder.com/200.jpg" alt="placeholder image used for demonstration">
  <figcaption>placeholder image used for demonstration</figcaption>
</figure>
tacoshy
  • 10,642
  • 5
  • 17
  • 34
0
<!DOCTYPE html><html lang='en' class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/nelsonleite/pen/RaGwba?depth=everything&order=popularity&page=4&q=product&show_forks=false" />
<link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<style class="cp-pen-styles">.product-description {
  transform: translate3d(0, 0, 0);
  transform-style: preserve-3d;
  perspective: 1000;
  backface-visibility: hidden;
}

body {
  color: #212121;
}

.container {
  padding-top: 25px;
  padding-bottom: 25px;
}

img {
  max-width: 100%;
}

hr {
  border-color: #e5e5e5;
  margin: 15px 0;
}

.secondary-text {
  color: #b6b6b6;
}

.list-inline {
  margin: 0;
}
.list-inline li {
  padding: 0;
}

.card-wrapper {
  position: relative;
  width: 100%;
  height: 390px;
  border: 1px solid #e5e5e5;
  border-bottom-width: 2px;
  overflow: hidden;
  margin-bottom: 30px;
}
.card-wrapper:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.card-wrapper:hover:after {
  opacity: 1;
}
.card-wrapper:hover .image-holder:before {
  opacity: .75;
}
.card-wrapper:hover .image-holder:after {
  opacity: 1;
  transform: translate(-50%, -50%);
}
.card-wrapper:hover .image-holder--original {
  transform: translateY(-15px);
}
.card-wrapper:hover .product-description {
  height: 205px;
}
@media (min-width: 768px) {
  .card-wrapper:hover .product-description {
    height: 185px;
  }
}

.image-holder {
  display: block;
  position: relative;
  width: 100%;
  height: 310px;
  background-color: #ffffff;
  z-index: 1;
}
@media (min-width: 768px) {
  .image-holder {
    height: 325px;
  }
}
.image-holder:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #4CAF50;
  opacity: 0;
  z-index: 5;
  transition: opacity 0.6s;
}
.image-holder:after {
  content: '+';
  font-family: 'Raleway', sans-serif;
  font-size: 70px;
  color: #4CAF50;
  text-align: center;
  position: absolute;
  top: 92.5px;
  left: 50%;
  width: 75px;
  height: 75px;
  line-height: 75px;
  background-color: #ffffff;
  opacity: 0;
  border-radius: 50%;
  z-index: 10;
  transform: translate(-50%, 100%);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  transition: all 0.4s ease-out;
}
@media (min-width: 768px) {
  .image-holder:after {
    top: 107.5px;
  }
}
.image-holder .image-holder__link {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 15;
}
.image-holder .image-holder--original {
  transition: transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.image-liquid {
  width: 100%;
  height: 325px;
  background-size: cover;
  background-position: center center;
}

.product-description {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 80px;
  padding: 10px 15px;
  overflow: hidden;
  background-color: #fafafa;
  border-top: 1px solid #e5e5e5;
  transition: height 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  z-index: 2;
}
@media (min-width: 768px) {
  .product-description {
    height: 65px;
  }
}
.product-description p {
  margin: 0 0 5px;
}
.product-description .product-description__title {
  font-family: 'Raleway', sans-serif;
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  margin: 0;
  font-size: 18px;
  line-height: 1.25;
}
.product-description .product-description__title:after {
  content: '';
  width: 60px;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), #fafafa);
}
.product-description .product-description__title a {
  text-decoration: none;
  color: inherit;
}
.product-description .product-description__category {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.product-description .product-description__price {
  color: #4CAF50;
  text-align: left;
  font-weight: bold;
  letter-spacing: 0.06em;
}
@media (min-width: 768px) {
  .product-description .product-description__price {
    text-align: right;
  }
}
.product-description .sizes-wrapper {
  margin-bottom: 15px;
}
.product-description .color-list {
  font-size: 0;
}
.product-description .color-list__item {
  width: 25px;
  height: 10px;
  position: relative;
  z-index: 1;
  transition: all .2s;
}
.product-description .color-list__item:hover {
  width: 40px;
}
.product-description .color-list__item--red {
  background-color: #F44336;
}
.product-description .color-list__item--blue {
  background-color: #448AFF;
}
.product-description .color-list__item--green {
  background-color: #CDDC39;
}
.product-description .color-list__item--orange {
  background-color: #FF9800;
}
.product-description .color-list__item--purple {
  background-color: #673AB7;
}
</style></head><body>
<!--
Inspired in this dribbble
https://dribbble.com/shots/986548-Product-Catalog
-->

<div class="container">
    <div class="row">

        <div class="col-xs-12 col-sm-6 col-md-4">
            <article class="card-wrapper">
                <div class="image-holder">
                    <a href="#" class="image-holder__link"></a>
                    <div class="image-liquid image-holder--original" style="background-image: url('https://upload.wikimedia.org/wikipedia/commons/2/24/Blue_Tshirt.jpg')">
                    </div>
                </div>

                <div class="product-description">
                    <!-- title -->
                    <h1 class="product-description__title">
                        <a href="#">                        
                            Adidas Originals
                            </a>
                    </h1>

                    <!-- category and price -->
                    <div class="row">
                        <div class="col-xs-12 col-sm-8 product-description__category secondary-text">
                            Men's running shirt
                        </div>
                        <div class="col-xs-12 col-sm-4 product-description__price">
                            € 499
                        </div>
                    </div>

                    <!-- divider -->
                    <hr />

                    <!-- sizes -->
                    <div class="sizes-wrapper">
                        <b>Sizes</b>
                        <br />
                        <span class="secondary-text text-uppercase">
                            <ul class="list-inline">
                                <li>xs,</li>                                
                                <li>s,</li>                             
                                <li>sm,</li>                                
                                <li>m,</li>
                                <li>l,</li>                             
                                <li>xl,</li>                                
                                <li>xxl</li>                                
                            </ul>
                        </span>
                    </div>

                    <!-- colors -->
                    <div class="color-wrapper">
                        <b>Colors</b>
                        <br />
                        <ul class="list-inline color-list">
                            <li class="color-list__item color-list__item--red"></li>
                            <li class="color-list__item color-list__item--blue"></li>
                            <li class="color-list__item color-list__item--green"></li>
                            <li class="color-list__item color-list__item--orange"></li>
                            <li class="color-list__item color-list__item--purple"></li>
                        </ul>
                    </div>
                </div>

            </article>
        </div>

        <div class="col-xs-12 col-sm-6 col-md-4">
            <article class="card-wrapper">
                <div class="image-holder">
                    <a href="#" class="image-holder__link"></a>
                    <div class="image-liquid image-holder--original" style="background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/7/75/Jeans_BW_2_(3213391837).jpg/543px-Jeans_BW_2_(3213391837).jpg')">
                    </div>
                </div>

                <div class="product-description">
                    <!-- title -->
                    <h1 class="product-description__title">
                        <a href="#">                        
                            Adidas Originals
                            </a>
                    </h1>

                    <!-- category and price -->
                    <div class="row">
                        <div class="col-sm-8 product-description__category secondary-text">
                            Men's running shirt
                        </div>
                        <div class="col-sm-4 product-description__price text-right">
                            € 499
                        </div>
                    </div>

                    <!-- divider -->
                    <hr />

                    <!-- sizes -->
                    <div class="sizes-wrapper">
                        <b>Sizes</b>
                        <br />
                        <span class="secondary-text text-uppercase">
                            <ul class="list-inline">
                                <li>xs,</li>                                
                                <li>s,</li>                             
                                <li>sm,</li>                                
                                <li>m,</li>
                                <li>l,</li>                             
                                <li>xl,</li>                                
                                <li>xxl</li>                                
                            </ul>
                        </span>
                    </div>

                    <!-- colors -->
                    <div class="color-wrapper">
                        <b>Colors</b>
                        <br />
                        <ul class="list-inline color-list">
                            <li class="color-list__item color-list__item--red"></li>
                            <li class="color-list__item color-list__item--blue"></li>
                            <li class="color-list__item color-list__item--green"></li>
                            <li class="color-list__item color-list__item--orange"></li>
                            <li class="color-list__item color-list__item--purple"></li>
                        </ul>
                    </div>
                </div>

            </article>
        </div>

        <div class="col-xs-12 col-sm-6 col-md-4">
            <article class="card-wrapper">
                <div class="image-holder">
                    <a href="#" class="image-holder__link"></a>
                    <div class="image-liquid image-holder--original" style="background-image: url('https://upload.wikimedia.org/wikipedia/commons/b/b8/Columbia_Sportswear_Jacket.jpg')">
                    </div>
                </div>

                <div class="product-description">
                    <!-- title -->
                    <h1 class="product-description__title">
                        <a href="#">                        
                            Adidas Originals
                            </a>
                    </h1>

                    <!-- category and price -->
                    <div class="row">
                        <div class="col-sm-8 product-description__category secondary-text">
                            Men's running shirt
                        </div>
                        <div class="col-sm-4 product-description__price text-right">
                            € 499
                        </div>
                    </div>

                    <!-- divider -->
                    <hr />

                    <!-- sizes -->
                    <div class="sizes-wrapper">
                        <b>Sizes</b>
                        <br />
                        <span class="secondary-text text-uppercase">
                            <ul class="list-inline">
                                <li>xs,</li>                                
                                <li>s,</li>                             
                                <li>sm,</li>                                
                                <li>m,</li>
                                <li>l,</li>                             
                                <li>xl,</li>                                
                                <li>xxl</li>                                
                            </ul>
                        </span>
                    </div>

                    <!-- colors -->
                    <div class="color-wrapper">
                        <b>Colors</b>
                        <br />
                        <ul class="list-inline color-list">
                            <li class="color-list__item color-list__item--red"></li>
                            <li class="color-list__item color-list__item--blue"></li>
                            <li class="color-list__item color-list__item--green"></li>
                            <li class="color-list__item color-list__item--orange"></li>
                            <li class="color-list__item color-list__item--purple"></li>
                        </ul>
                    </div>
                </div>

            </article>
        </div>

        <div class="col-xs-12 col-sm-6 col-md-4">
            <article class="card-wrapper">
                <div class="image-holder">
                    <a href="#" class="image-holder__link"></a>
                    <div class="image-liquid image-holder--original" style="background-image: url('http://www.publicdomainpictures.net/pictures/20000/nahled/red-shoes-isolated.jpg')">
                    </div>
                </div>

                <div class="product-description">
                    <!-- title -->
                    <h1 class="product-description__title">
                        <a href="#">                        
                            Adidas Originals
                            </a>
                    </h1>

                    <!-- category and price -->
                    <div class="row">
                        <div class="col-sm-8 product-description__category secondary-text">
                            Men's running shirt
                        </div>
                        <div class="col-sm-4 product-description__price text-right">
                            € 499
                        </div>
                    </div>

                    <!-- divider -->
                    <hr />

                    <!-- sizes -->
                    <div class="sizes-wrapper">
                        <b>Sizes</b>
                        <br />
                        <span class="secondary-text text-uppercase">
                            <ul class="list-inline">
                                <li>xs,</li>                                
                                <li>s,</li>                             
                                <li>sm,</li>                                
                                <li>m,</li>
                                <li>l,</li>                             
                                <li>xl,</li>                                
                                <li>xxl</li>                                
                            </ul>
                        </span>
                    </div>

                    <!-- colors -->
                    <div class="color-wrapper">
                        <b>Colors</b>
                        <br />
                        <ul class="list-inline color-list">
                            <li class="color-list__item color-list__item--red"></li>
                            <li class="color-list__item color-list__item--blue"></li>
                            <li class="color-list__item color-list__item--green"></li>
                            <li class="color-list__item color-list__item--orange"></li>
                            <li class="color-list__item color-list__item--purple"></li>
                        </ul>
                    </div>
                </div>

            </article>
        </div>

    </div>
</div>

</body></html>

The sample is made

mirazimi
  • 814
  • 10
  • 11
0

<html>
<head>
<style>
.hide {
  display: none;
}
    
.myDIV:hover + .hide {
  display: block;
  color: red;
}
</style>
</head>
<body>

<h2>Display an Element on Hover</h2>

<div class="myDIV">Hover over me.</div>
<div class="hide">I am shown when someone hovers over the div above.</div>

</body>
</html>
kirilinko
  • 1
  • 2
  • 1
    Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Apr 14 '22 at 13:19