applying transform on an overlapped element - html

Question

hey guys I was working on transforms and testing them on overlapping divs and I couldn't make the div that is beneath to transform too
is it possible to do it without any JS?
as you can see the purple div on hover transforms and disappears and I want the red div under it to slightly rotate too and I couldn't make It work
.container {
position: relative;
padding: 2%;
}
.cover {
position: absolute;
top: 13px;
left: 13px;
}
.box1 {
display: inline-block;
width: 200px;
height: 200px;
background-color: red;
}
.box2 {
display: inline-block;
width: 200px;
height: 200px;
background-color: purple;
transition: 2s ease-in-out;
}
.box2:hover {
transform: rotate(35deg);
transition: 2s ease-in-out;
border-radius: 50%;
opacity: 0;
}
<div class="container">
<div class="top">
<div class="box1"></div>
<div class="box1"></div>
</div>
<div class="cover">
<div class="box2"></div>
<div class="box2"></div>
</div>
</div>

Answer 1

Update based on a comment, now using pseudo elements instead of a doubled markup
.container {
padding: 2%;
}
.box {
position: relative;
display: inline-block;
width: 150px;
height: 150px;
}
.box::before,
.box::after {
content: ' ';
position: absolute;
left: 0; top: 0;
height: 100%;
width: 100%;
transition: 2s ease-in-out;
background-color: purple;
}
.box::before {
background: url(http://lorempixel.com/200/200/nature/1);
background-size: cover;
}
.box:hover::before,
.box:hover::after {
transform: rotate(35deg);
transition: 2s ease-in-out;
border-radius: 50%;
opacity: 0;
}
.box:hover::before {
opacity: 0.6;
}
<div class="container">
<div class="top">
<div class="box"></div>
<div class="box"></div>
</div>
</div>

Answer 2

This is what you could do
.container {
width: 500px;
}
.box {
display: inline-block;
position: relative;
}
.box:hover .top,
.box:hover .cover {
transform: rotate(35deg);
transition: 2s ease-in-out;
border-radius: 50%;
opacity: 0;
}
.top {
width: 200px;
height: 200px;
background-color: red;
}
.cover {
position: absolute;
width: 200px;
height: 200px;
background-color: purple;
}
<div class="container">
<div class="box">
<div class="cover"></div>
<div class="top"></div>
</div>
<div class="box">
<div class="cover"></div>
<div class="top"></div>
</div>
</div>

Answer 3

Just brainstorming: How about creating a parent by putting both divs inside a div3, make div3 transparent, position with z-index above the other ones, capturing the hover. Select the other divs then simply as childs of div3:hover.