Help on web development

I am trying to practice the little i have learnt so far on javascript. please I want to make a card that looks like what is in the picture.
I want to make something like whats in the screen shot.
the screenshot 110 isa a result of when screenshot 111 was hovered on. the website:
Screenshot (110)|690x297
Screenshot (111)

Kindly find my code below:

<!DOCTYPE html>
   <div id="jar-heart" onmouseover="show()">
    <h2>JAR OF HEARTS</h2>
    <p id="caption">Little hearts melt in your chosen fragrance.</p>
     <button id="options">Show Options</button>
hr {
  width: 27rem;
  position: absolute;
  left: 0;

#options {
  border-radius: 1.3rem;
  border: none;
  box-shadow: 2px 2px 10px;
  display: none;

@jQuery show() {
  #caption {
    display: none;
  #jar-heart {
    border: none;
    box-shadow: 2px 2px 10px;
  #options {
    display: grid;
let jarHeart = document.querySelector("#jar-heart")
let button = document.querySelector("#options")
let wax = ["JAR OF HEART", "$7.00", button]

function show() {
   jarHeart.textContent = wax
  for (i = 0; i < wax.length; i++) {
    jarHeart.textContent += wax[i]

Thank you

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.