showing the information with mouse hover

Question

I'm trying to create an application that lets the user place an order from the menu. My problem is When the user hovers the mouse over one of the images in the menu, another image should be displayed with the description and price of the item. The id attribute of each image identifies the image to be displayed when it's rolled over. I tired to manged the first image to flip and show the description and price but the problem is when you click on the first image it does not show the price on the order box and the image is not showing either

 $(function(){ //declare prices and varaibles var item1 = $("#item1"); item1.val(7.99); var item2 = $("#item2"); item2.val(1.99); var item3 = $("#item3"); item3.val(9.99); var item4 = $("#item4"); item4.val(12.99); var item5 = $("#item5"); item5.val(17.99); var item6 = $("#item6"); item6.val(3.99); var Total = $("#Total"); var Amount = 0; //onclick var item = $(".item"); var txtArea = $("#txtArea"); var orderList = ""; //Events item.click(function(event){ Amount+=parseFloat($(event.target).val()); orderList+=parseFloat($(event.target).val())+"$ -"+event.target.id +"\\n"; txtArea.val(orderList); Total.html("Total: "+Amount.toFixed(2)+"$"); }); //Events item.hover(function(){ $(event.target).text($(event.target).val()+"$"); $(event.target).addClass("dark"); }, function(){ $(event.target).text(""); $(event.target).removeClass("dark"); }); //Clear Button var ClearOrder = $("#ClearOrder"); //Events ClearOrder.click(function(){ Amount = 0; Total.html("Total: "+Amount.toFixed(2)); orderList =""; txtArea.val(orderList); }); })

 * { box-sizing: border-box; font-family: "san-serif"; } body{ margin:0px; padding:0px; } .Outside-Container{ margin:10px; position:absolute; border:2px solid black; border-radius:5%; width:60%; height:auto; left:20%; overflow:hidden; } .container{ position:relative; width:70%; height:auto; left:15%; overflow:hidden; } .top-logo-holder{ width:100%; height:auto; } .logo-img{ width: 31%; display: block; margin: 0 auto; } .line{ height:2px; width:100%; position:relative; background:teal; border-radius:25%; } .main-section{ width:100%; position:relative; height:auto; } .row1{ display:flex; flex-wrap:no-wrap; flex-direction: row; } .row2{ display:flex; flex-wrap:no-wrap; flex-direction: row; transition:0.8s; } .item{ width:300px; height:17vh; background:pink; margin:5px; color:#fff; transition:0.3s; font-size:20px; cursor:pointer; } .row1 .item:nth-child(1){ background:url("https://i.postimg.cc/2yCtXwNn/img1.jpg"); background-size:cover; } .row1 .item:nth-child(2){ background:url("https://i.postimg.cc/vTXKRVGk/img2.jpg"); background-size:cover; } .row1 .item:nth-child(3){ background:url("https://i.postimg.cc/J7QvH9jx/img3.jpg"); background-size:cover; } .row2 .item:nth-child(1){ background:url("[img4.jpg](https://postimg.cc/hh6pg86y)"); background-size:cover; } .row2 .item:nth-child(2){ background:url("https://i.postimg.cc/vZ4NjTk2/img5.jpg"); background-size:cover; } .row2 .item:nth-child(3){ background:url("https://i.postimg.cc/vZ4NjTk2/img5.jpg"); background-size:cover; } #txtArea{ width:60%; height:150px; } .last-footer-line{ width:100%; height:auto; margin-bottom:20px; } .dark{ filter:brightness(0.7); text-align:center; font-size:20px; line-height: 5em; } .flip-card { background-color: transparent; width: 300px; height: 200px; border: 1px solid #f1f1f1; perspective: 1000px; /* Remove this if you don't want the 3D effect */ } /* This container is needed to position the front and back side */ .flip-card-inner { position: relative; width: 100%; height: 100%; text-align: center; transition: transform 0.8s; transform-style: preserve-3d; } /* Do an horizontal flip when you move the mouse over the flip box container */ .flip-card:hover .flip-card-inner { transform: rotateY(180deg); } /* Position the front and back side */ .flip-card-front, .flip-card-back { position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; /* Safari */ backface-visibility: hidden; } /* Style the front side (fallback if image is missing) */ .flip-card-front { background-color: #bbb; color: black; } /* Style the back side */ .flip-card-back { background-color: dodgerblue; color: white; transform: rotateY(180deg); }

 <!DOCTYPE html> <html lang="en"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta charset="utf-8"/> <link rel="stylesheet" href="style.css"> <script src="js/tabs.js"></script> <head> <title>Test</title> </head> <body> <div class="Outside-Container"> <div class = "container"> <div class="top-logo-holder"> <img src ="https://i.postimg.cc/pL36txtW/logo.png" class="logo-img"/> <div class="line"></div> </div> <div class="main-section"> <div class ="row1"> <div class="flip-card"> <div class="flip-card-inner"> <div class="flip-card-front"> <div class="flip"></div> </div> <div class="flip-card-back"> <h1>Coffee</h1> <h1>7.22$</h1> </div> </div> </div> <div class="item" id="item2"></div> <div class="item" id="item3"></div> </div> <div class ="row2"> <div class="item" id="item4"></div> <div class="item" id="item5"></div> <div class="item" id="item6"></div> </div> <div class="line"></div> <p>Your Order:</p> <textarea name="message" id="txtArea"></textarea> <p id="Total">Total: </p> </div> <div class="last-footer-line"> <button id="PlaceOrder">Place Order</button> <button id="ClearOrder">Clear Order</button> <div> </div> </div> </div> <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script> <script src="js/tabs.js"></script> </body> </html>

Answer 1

 $(function() { //declare prices and varaibles var item1 = $("#item1"); item1.val(7.99); var item2 = $("#item2"); item2.val(1.99); var item3 = $("#item3"); item3.val(9.99); var item4 = $("#item4"); item4.val(12.99); var item5 = $("#item5"); item5.val(17.99); var item6 = $("#item6"); item6.val(3.99); var Total = $("#Total"); var Amount = 0; //onclick var item = $(".item"); var txtArea = $("#txtArea"); var orderList = ""; //Events $('.flip-card-back').click(function() { var price = $('.flip-card-back .Item1_price').text().slice(0, -1); Amount += parseFloat(price); orderList += parseFloat(price) + "$ -item1 \\n"; txtArea.val(orderList); Total.html("Total: " + Amount.toFixed(2) + "$"); }); item.click(function(event) { Amount += parseFloat($(event.target).val()); orderList += parseFloat($(event.target).val()) + "$ -" + event.target.id + "\\n"; txtArea.val(orderList); Total.html("Total: " + Amount.toFixed(2) + "$"); }); //Events item.hover(function() { $(event.target).text($(event.target).val() + "$"); $(event.target).addClass("dark"); }, function() { $(event.target).text(""); $(event.target).removeClass("dark"); }); //Clear Button var ClearOrder = $("#ClearOrder"); //Events ClearOrder.click(function() { Amount = 0; Total.html("Total: " + Amount.toFixed(2)); orderList = ""; txtArea.val(orderList); }); })

 * { box-sizing: border-box; font-family: "san-serif"; } body { margin: 0px; padding: 0px; } .Outside-Container { margin: 10px; position: absolute; border: 2px solid black; border-radius: 5%; width: 60%; height: auto; left: 20%; overflow: hidden; } .container { position: relative; width: 70%; height: auto; left: 15%; overflow: hidden; } .top-logo-holder { width: 100%; height: auto; } .logo-img { width: 31%; display: block; margin: 0 auto; } .line { height: 2px; width: 100%; position: relative; background: teal; border-radius: 25%; } .main-section { width: 100%; position: relative; height: auto; } .row1 { display: flex; flex-wrap: no-wrap; flex-direction: row; } .row2 { display: flex; flex-wrap: no-wrap; flex-direction: row; transition: 0.8s; } .item { width: 300px; height: 17vh; background: pink; margin: 5px; color: #fff; transition: 0.3s; font-size: 20px; cursor: pointer; } .row1 .item:nth-child(1) { background: url("https://i.postimg.cc/2yCtXwNn/img1.jpg"); background-size: cover; } .row1 .item:nth-child(2) { background: url("https://i.postimg.cc/vTXKRVGk/img2.jpg"); background-size: cover; } .row1 .item:nth-child(3) { background: url("https://i.postimg.cc/J7QvH9jx/img3.jpg"); background-size: cover; } .row2 .item:nth-child(1) { background: url("[img4.jpg](https://postimg.cc/hh6pg86y)"); background-size: cover; } .row2 .item:nth-child(2) { background: url("https://i.postimg.cc/vZ4NjTk2/img5.jpg"); background-size: cover; } .row2 .item:nth-child(3) { background: url("https://i.postimg.cc/vZ4NjTk2/img5.jpg"); background-size: cover; } #txtArea { width: 60%; height: 150px; } .last-footer-line { width: 100%; height: auto; margin-bottom: 20px; } .dark { filter: brightness(0.7); text-align: center; font-size: 20px; line-height: 5em; } .flip-card { background-color: transparent; width: 300px; height: 200px; border: 1px solid #f1f1f1; perspective: 1000px; /* Remove this if you don't want the 3D effect */ } /* This container is needed to position the front and back side */ .flip-card-inner { position: relative; width: 100%; height: 100%; text-align: center; transition: transform 0.8s; transform-style: preserve-3d; } /* Do an horizontal flip when you move the mouse over the flip box container */ .flip-card:hover .flip-card-inner { transform: rotateY(180deg); } /* Position the front and back side */ .flip-card-front, .flip-card-back { position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; /* Safari */ backface-visibility: hidden; } /* Style the front side (fallback if image is missing) */ .flip-card-front { background-color: #bbb; color: black; } /* Style the back side */ .flip-card-back { background-color: dodgerblue; color: white; transform: rotateY(180deg); }

 <!DOCTYPE html> <html lang="en"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta charset="utf-8" /> <link rel="stylesheet" href="style.css"> <script src="js/tabs.js"></script> <head> <title>Test</title> </head> <body> <div class="Outside-Container"> <div class="container"> <div class="top-logo-holder"> <img src="https://i.postimg.cc/pL36txtW/logo.png" class="logo-img" /> <div class="line"></div> </div> <div class="main-section"> <div class="row1"> <div class="flip-card"> <div class="flip-card-inner"> <div class="flip-card-front"> <div class="flip"></div> </div> <div class="flip-card-back"> <h1>Coffee</h1> <h1 class='Item1_price'>7.22$</h1> </div> </div> </div> <div class="item" id="item2"></div> <div class="item" id="item3"></div> </div> <div class="row2"> <div class="item" id="item4"></div> <div class="item" id="item5"></div> <div class="item" id="item6"></div> </div> <div class="line"></div> <p>Your Order:</p> <textarea name="message" id="txtArea"></textarea> <p id="Total">Total: </p> </div> <div class="last-footer-line"> <button id="PlaceOrder">Place Order</button> <button id="ClearOrder">Clear Order</button> <div> </div> </div> </div> <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script> <script src="js/tabs.js"></script> </body> </html>

Answer 2

i added rotate card on hover for any item & set item1 as first item

item.mouseleave(function() { $('.flip-card-inner').removeClass('flipcard'); }); $('.flip-card-inner').addClass('flipcard');

added css class .flipcard { transform: rotateY(180deg); } .flipcard { transform: rotateY(180deg); }

also added img & price onhover event using $('.flip-card-back').html($(event.target).val()+'$'); $('.flip-card-back').css('background', $(event.target).css('background')); $('.flip-card-back').html($(event.target).val()+'$'); $('.flip-card-back').css('background', $(event.target).css('background'));

.

is this what you want😘

 $(function() { //declare prices and varaibles var item1 = $("#item1"); item1.val(7.99); var item2 = $("#item2"); item2.val(1.99); var item3 = $("#item3"); item3.val(9.99); var item4 = $("#item4"); item4.val(12.99); var item5 = $("#item5"); item5.val(17.99); var item6 = $("#item6"); item6.val(3.99); var Total = $("#Total"); var Amount = 0; //onclick var item = $(".item"); var txtArea = $("#txtArea"); var orderList = ""; //Events item.hover(function(event) { $('.flip-card-back').html($(event.target).val() + '$'); $('.flip-card-back').css('background', $(event.target).css('background')); $('.flip-card-inner').addClass('flipcard'); }, function() { $('.flip-card-inner').removeClass('flipcard'); }); item.click(function(event) { Amount += parseFloat($(event.target).val()); orderList += parseFloat($(event.target).val()) + "$ -" + event.target.id + "\\n"; txtArea.val(orderList); Total.html("Total: " + Amount.toFixed(2) + "$"); }); //Events item.hover(function() { $(event.target).text($(event.target).val() + "$"); $(event.target).addClass("dark"); }, function() { $(event.target).text(""); $(event.target).removeClass("dark"); }); //Clear Button var ClearOrder = $("#ClearOrder"); //Events ClearOrder.click(function() { Amount = 0; Total.html("Total: " + Amount.toFixed(2)); orderList = ""; txtArea.val(orderList); }); })

 * { box-sizing: border-box; font-family: "san-serif"; } body { margin: 0px; padding: 0px; } .Outside-Container { margin: 10px; position: absolute; border: 2px solid black; border-radius: 5%; width: 60%; height: auto; left: 20%; overflow: hidden; } .container { position: relative; width: 70%; height: auto; left: 15%; overflow: hidden; } .top-logo-holder { width: 100%; height: auto; } .logo-img { width: 31%; display: block; margin: 0 auto; } .line { height: 2px; width: 100%; position: relative; background: teal; border-radius: 25%; } .main-section { width: 100%; position: relative; height: auto; } .row1 { display: flex; flex-wrap: no-wrap; flex-direction: row; } .row2 { display: flex; flex-wrap: no-wrap; flex-direction: row; transition: 0.8s; } .item { width: 300px; height: 17vh; background: pink; margin: 5px; color: #fff; transition: 0.3s; font-size: 20px; cursor: pointer; } .row1 .item:nth-child(1) { background: url("https://i.postimg.cc/2yCtXwNn/img1.jpg"); background-size: cover; } .row1 .item:nth-child(2) { background: url("https://i.postimg.cc/vTXKRVGk/img2.jpg"); background-size: cover; } .row1 .item:nth-child(3) { background: url("https://i.postimg.cc/J7QvH9jx/img3.jpg"); background-size: cover; } .row2 .item:nth-child(1) { background: url("https://www.gourmesso.co.uk/blog/wp-content/uploads/sites/4/2017/03/Tiramisu-Coffee-in-a-Glass-Recipe-Italian-dessert-speciality.jpg"); background-size: cover; } .row2 .item:nth-child(2) { background: url("https://i.postimg.cc/vZ4NjTk2/img5.jpg"); background-size: cover; } .row2 .item:nth-child(3) { background: url("http://hopecoffeeco.com/wp-content/uploads/2017/01/Grid-home-item-show-img.jpg"); background-size: cover; } #txtArea { width: 60%; height: 150px; } .last-footer-line { width: 100%; height: auto; margin-bottom: 20px; } .dark { filter: brightness(0.7); text-align: center; font-size: 20px; line-height: 5em; } .flip-card { background-color: transparent; width: 300px; height: 200px; border: 1px solid #f1f1f1; perspective: 1000px; /* Remove this if you don't want the 3D effect */ } /* This container is needed to position the front and back side */ .flip-card-inner { position: relative; width: 100%; height: 100%; text-align: center; transition: transform 0.8s; transform-style: preserve-3d; } /* Do an horizontal flip when you move the mouse over the flip box container */ .flip-card:hover .flip-card-inner { transform: rotateY(180deg); } .flipcard { transform: rotateY(180deg); } /* Position the front and back side */ .flip-card-front, .flip-card-back { position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; /* Safari */ backface-visibility: hidden; } /* Style the front side (fallback if image is missing) */ .flip-card-front { background-color: #bbb; color: black; } /* Style the back side */ .flip-card-back { background-color: dodgerblue; color: white; transform: rotateY(180deg); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!DOCTYPE html> <html lang="en"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta charset="utf-8" /> <link rel="stylesheet" href="style.css"> <script src="js/tabs.js"></script> <head> <title>Test</title> </head> <body> <div class="Outside-Container"> <div class="container"> <div class="top-logo-holder"> <img src="https://i.postimg.cc/pL36txtW/logo.png" class="logo-img" /> <div class="line"></div> </div> <div class="main-section"> <div class="flip-card"> <div class="flip-card-inner"> <div class="flip-card-front"> <div class="flip"></div> </div> <div class="flip-card-back"> <h1></h1> <h1></h1> </div> </div> </div> <div class="row1"> <div class="item" id="item1"></div> <div class="item" id="item2"></div> <div class="item" id="item3"></div> </div> <div class="row2"> <div class="item" id="item4"></div> <div class="item" id="item5"></div> <div class="item" id="item6"></div> </div> <div class="line"></div> <p>Your Order:</p> <textarea name="message" id="txtArea"></textarea> <p id="Total">Total: </p> </div> <div class="last-footer-line"> <button id="PlaceOrder">Place Order</button> <button id="ClearOrder">Clear Order</button> <div> </div> </div> </div> <script src="js/tabs.js"></script> </body> </html>