how to hover group of elements on hovering another element? - css

Question

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 class="product-wrapper">
<span class="title">product name</span>
<img class="zoomImg" 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" class="ajax">more ...</a>
<div class="ribbon">product name</div>
</div>

Answer 1

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 class="product-wrapper">
<span class="title">product name</span>
<img class="zoomImg" 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" class="ajax">more ...</a>
<div class="ribbon">product name</div>
</div>
not much changed just told the code to transform the child when the parent is hovered. hope this helped.