Hovering over a particular text and display an image in CSS

Question

I am trying to design a menu for my web page. To create a responsive menu I need some properties to get interact on basic logic. For e.g. There are Four texts on the left [Which are hoverable] and when hovering on them an image to be shown on the right side of the page. [which is a fixed position for displaying the image] Every individual text to show up a different image. When hovering on Ice-cream text it shows an ice-cream image, while hovering on pizza text it shows the user a pizza image. (Solution only required using HTML and CSS).

enter image description here

Welcome to Stack Overflow! Please visit the [help], take the [tour] to see what and [ask]. Do some research, search for related topics on SO; if you get stuck, post a [mcve] of your attempt, noting input and expected output using the `[<>]` snippet editor. — mplungjan, May 08 '20 at 13:44

score 1 · Answer 1 · answered May 08 '20 at 14:11

All you need to do is create a connection between your Item and its image by some id or other attribute

$(document).ready(function() {
  $('.menu li').hover(function(){
    var setRelation = $(this).data('relation');
    var a = $('.content').find('#'+setRelation);
    $('.image').hide();
    a.show();
  });
});

section {display: flex;}
ul {
  width: 30%;
}
.content {
  width: 70%;
}
img {
  max-width: 100%;
}
.image {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
<ul class="menu">
  <li data-relation="item1">Item 1</li>
  <li data-relation="item2">Item 2</li>
  <li data-relation="item3">Item 3</li>
  <li data-relation="item4">Item 4</li>
</ul>
<div class="content">
  <div id="item1" class="image">
    put your IMG here 1
    <img src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/delish-homemade-pizza-horizontal-1542312378.png" alt="">
  </div>
  <div id="item2" class="image">
    put your IMG here 2
    <img src="https://upload.wikimedia.org/wikipedia/commons/3/31/Ice_Cream_dessert_02.jpg" alt="">
  </div>
  <div id="item3" class="image">
    put your IMG here 3
  </div>
  <div id="item4" class="image">
    put your IMG here 4
  </div>
</div>
</section>

Hovering over a particular text and display an image in CSS

1 Answers1