I have one div .product-wrapper that contains group of elements. And I need to animate them all on hovering on the div container.

the problem is I only get animation when hovering on the main container div .product-wrapper, and whenever I hover any other element included inside the container .product-wrapper all animation get lose.

    .product-wrapper{
      width: 270px;
      height: auto;
      margin-bottom: 8px;
      overflow: hidden;
      position: relative;
      border: 1px solid #9999;
    }

    .product-wrapper>img{
      width: 100%;
      height: 180px;
      margin: 0 auto;
      transition: transform .5s; /* Animation */
    }
    .product-wrapper>img:hover{
      transform: scale(1.5); 
    }

    .product-wrapper .title{
      background-color: #9999;
      border-top: 1px solid #fff;
      border-bottom: 1px solid #fff;
      color: #fff;
      opacity: 0;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      padding: 8px;
      text-align: center;
      z-index: 1;
      font-size: 20px;
      transition: .3s ease;
    }
    .product-wrapper:hover .title{ 
      opacity: 1;
      top: 10%;
      box-shadow:0 0 0 200vmax rgba(0,0,0,.2);
    }

    .product-wrapper>a {
        cursor: pointer;
        background-color: #9999;
        color: #fff;
        padding: 10px;
        border: 1px solid #fff;
        opacity: 0;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        text-align: center;
        transition: .5s ease;
        z-index: 2;
    }
    .product-wrapper:hover a{ 
        opacity: 1;
        bottom: 5%;
    }

    .product-wrapper>div {
        background-color: #9999;
        color: #fff;
        padding: 10px;
        text-align: center;
        z-index: 2;
        position: absolute;
        bottom: 0;
        left: 0px;
        width: 100%;
        border-top: 1px solid #fff;
    }
    .product-wrapper:hover div{ 
        opacity: 0;
        bottom: 30%;
    }

<div >
  <span >product name</span>
  <img  src="https://img.freepik.com/free-vector/hand-drawn-illustration-container-ship-sea_23-2149149324.jpg?w=2000" />
  <a asp-controller="News" asp-action="PalNew" asp-route-id="@item.ID" >more ...</a>
  <div >product name</div>
</div>

CodePudding user response：

The issue with your code was that you weren't telling your code to change when hovered on parent element but rather specifically on the img element itself. Here's what I could do with your question

css:

.product-wrapper{
    width: 270px;
    height: auto;
    margin-bottom: 8px;
    overflow: hidden;
    position: relative;
    border: 1px solid #9999;
  }

  .product-wrapper>img{
    width: 100%;
    height: 180px;
    margin: 0 auto;
    transition: transform .5s; /* Animation */
  }
  .product-wrapper:hover > img{
    transform: scale(1.5); 
  }

  .product-wrapper .title{
    background-color: #9999;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    color: #fff;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 8px;
    text-align: center;
    z-index: 1;
    font-size: 20px;
    transition: .3s ease;
  }
  .product-wrapper:hover .title{ 
    opacity: 1;
    top: 10%;
    box-shadow:0 0 0 200vmax rgba(0,0,0,.2);
  }

  .product-wrapper>a {
      cursor: pointer;
      background-color: #9999;
      color: #fff;
      padding: 10px;
      border: 1px solid #fff;
      opacity: 0;
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      text-align: center;
      transition: .5s ease;
      z-index: 2;
  }
  .product-wrapper:hover a{ 
      opacity: 1;
      bottom: 5%;
  }

  .product-wrapper>div {
      background-color: #9999;
      color: #fff;
      padding: 10px;
      text-align: center;
      z-index: 2;
      position: absolute;
      bottom: 0;
      left: 0px;
      width: 100%;
      border-top: 1px solid #fff;
  }
  .product-wrapper:hover div{ 
      opacity: 0;
      bottom: 30%;
  }

<div >
  <span >product name</span>
  <img  src="https://img.freepik.com/free-vector/hand-drawn-illustration-container-ship-sea_23-2149149324.jpg?w=2000" />
  <a asp-controller="News" asp-action="PalNew" asp-route-id="@item.ID" >more ...</a>
  <div >product name</div>
</div>

not much changed just told the code to transform the child when the parent is hovered. hope this helped.