Announcement

Collapse
No announcement yet.

How to remove a hover transparent screen over product

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • How to remove a hover transparent screen over product

    I don't even know what the search term for this. The template designer placed a transparent screen over every product. So, you don't see the product name or price unless the mouse is hovered over the item. Then this screen pops up and gives the product name and price. Like it's top secret. Where would I begin to look for the code for this? I tried "hover" in the frame file. Can someone point me in the right direction? I want to shut it off, off. Any advice will be most appreciated. Thank you.

    Here's an example. Look at the first item under Featured Items. No name or price unless you go through the hover. Plus, with my products "Add to Cart" isn't applicable. It needs to be "See details".
    http://themes.3dcart.com/Chiclumber-...ive_p_107.html


    Last edited by Davef; 03-27-2015, 03:32 PM. Reason: Added example

  • #2
    I may have fixed it. Here's what I tried - in case someone else bought this template and didn't know about the hover. I commented out with /* and */ on the following items. (There may be some duplication on my cut and paste.) I someone thinks that this is incorrect, please let me know, OK?

    .product-item:hover {
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    }
    .product-item:hover:after {
    content: "\00a0";
    background: rgba(84,51,73, 0.8);
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    -webkit-box-shadow: inset 0px 0px 51px 0px rgba(84,51,73,1);
    -moz-box-shadow: inset 0px 0px 51px 0px rgba(84,51,73,1);
    box-shadow: inset 0px 0px 51px 0px rgba(84,51,73,1);
    }
    .product-item:hover .name {
    display: block;
    }
    .product-item:hover .price {
    display: block;
    }
    .product-item:hover .action {
    display: block;
    }
    }
    /*.product-item:hover .name {
    display: block;
    }
    .product-item .price {
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    position: absolute;
    text-align: center;
    height: 30px;
    width: 100%;
    overflow: hidden;
    top: 120px;
    left: 0;
    margin: 0;
    padding: 0;
    z-index: 100;
    display: none;
    }
    .product-item:hover .price {
    display: block;*/

    Comment


    • #3
      Well, folks. It works if only I wouldn't be so dumb that I can't figure out how to get the product name to display. Got the price, but not the name. But, anyway, someone may find this useful.

      Comment

      Working...
      X