Here is my HTML

         <div className="products">
            <img
                className="products-img shadow  "
                src={products.img}
                alt="threeDimage"
              />
              <div >
              <h1 style={{ color: "balack" }}>{products.title}</h1>
                <p>
                  Lorem Ipsum is simply dummy text from the printing and
                  typeseting industry
                </p>
                <button>Know More</button>
              </div>
            </div>

And here is my CSS part.

.products {
  width: 300px;
  height: 300px;
  border-radius: 15px;
  padding: 1.5rem;
  background: white;
  position: relative;
  display: flex;
  align-items: flex-end;
  transition: 0.4s ease-out;
  box-shadow: 0px 7px 10px rgba(0, 0, 0, 0.5);
}

  .products:hover {
    transform: translateY(-20px);
  }
  .products:hover:before {
    opacity: 1;
  }
  .products:hover .info {
    opacity: 1;
    transform: translateY(0px);
  }
  .products:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 15px;
    background: rgba(0, 0, 0, 0.6);
    z-index: 2;
    transition: 0.5s;
    opacity: 0;
  }

I am trying to disable the hover effect for mobile devices which has lesser with of 768px and am doing it by writing media queries like the below mention but it is not working. can anyone please help me with this

@media screen and (min-width: 768px){
       /*my className:hover{
        display:none;
   }
   }

CodePudding user response：

Target only the devices that can hover using the below media query

@media (hover: hover) {
  .products:hover {
    transform: translateY(-20px);
  }
  .products:hover:before {
    opacity: 1;
  }
  .products:hover .info {
    opacity: 1;
    transform: translateY(0px);
  }
  .products:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 15px;
    background: rgba(0, 0, 0, 0.6);
    z-index: 2;
    transition: 0.5s;
    opacity: 0;
  }
}