Help on web development

HTML-CSS
1

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: thespottedcow.com
Screenshot (110)|690x297
Screenshot (111)

Kindly find my code below:

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
   <div id="jar-heart" onmouseover="show()">
    <h2>JAR OF HEARTS</h2>
    <p>$2.00</p>
    <p id="caption">Little hearts melt in your chosen fragrance.</p>
     <button id="options">Show Options</button>
    </div>
    <hr>
  </body>
</html>
<style>
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;
  }
}
</style>
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
2

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