Animated mask and hide circle on hover with css - css

Question

I wanna make info box with this design.
This design is important to me. When mouse is over the circle, I need some animation and transform design to this...
jsFiddle Example :
.wrapper{
width:400px;
height:200px;
background: white;
position: relative;
}
.mask {
width: 100%;
height: 100%;
background: green;
background-size: cover;
transition: 0.4s ease;
clip-path: circle(80px at 50% 50%);
position: relative;
}
.mask:hover {
clip-path: circle(100% at 50% 50%);
}
.wrapper:after {
content: ' ';
display: block;
position: relative;
width: 160px;
height: 160px;
top: calc(-50% - 83px);
left: calc(50% - 83px);
border-radius: 50%;
background:transparent;
border: 3px solid #fff;
box-shadow: 0px 0px 6px #aaa;
pointer-events: none;
}
<div class="wrapper">
<div id="map-canvas" class="mask">
</div>
</div>
But I don't know how to hide the circle.
Is there any solution how to make and hide that circle with border and shadow ?

Answer 1

Try use transition and opacity for wrapper:after
You would want to transparent pseudo element after on hover and target it with .wrapper:hover:after.
.wrapper{
width:400px;
height:200px;
background: white;
position: relative;
}
.mask {
width: 100%;
height: 100%;
background: green;
background-size: cover;
transition: 0.4s ease;
clip-path: circle(80px at 50% 50%);
position: relative;
}
.mask:hover {
clip-path: circle(100% at 50% 50%);
}
.wrapper:after {
content: ' ';
display: block;
position: relative;
width: 160px;
height: 160px;
top: calc(-50% - 83px);
left: calc(50% - 83px);
border-radius: 50%;
background:transparent;
border: 3px solid #fff;
box-shadow: 0px 0px 6px #aaa;
pointer-events: none;
opacity:1;
transition: all 0.5s forwards ; /*added */
}
.wrapper:hover:after{
opacity:0 ; /*added */
}
<div class="wrapper">
<div id="map-canvas" class="mask">
</div>
</div>
also if you want some animation on hover out you can use bellow code:
.wrapper{
width:400px;
height:200px;
background: white;
position: relative;
}
.mask {
width: 100%;
height: 100%;
background: green;
background-size: cover;
transition: 0.4s ease;
clip-path: circle(80px at 50% 50%);
position: relative;
}
.mask:hover {
clip-path: circle(100% at 50% 50%);
}
.wrapper:after {
content: ' ';
display: block;
position: relative;
width: 160px;
height: 160px;
top: calc(-50% - 83px);
left: calc(50% - 83px);
border-radius: 50%;
background:transparent;
border: 3px solid #fff;
box-shadow: 0px 0px 6px #aaa;
pointer-events: none;
transition: all 0.5s ease-in ;
}
.wrapper:hover:after{
opacity:0 ;
transition: all 0.5s forwards ; /* added */
}
<div class="wrapper">
<div id="map-canvas" class="mask">
</div>
</div>

Answer 2

You can just unset the border and box-shadow on :hover and transition that change, too, if you want.
.wrapper{
width:400px;
height:200px;
background: white;
position: relative;
}
.mask {
width: 100%;
height: 100%;
background: green;
background-size: cover;
clip-path: circle(80px at 50% 50%);
position: relative;
}
.mask, .wrapper:after {
transition: 0.4s ease;
}
.wrapper:hover .mask {
clip-path: circle(100% at 50% 50%);
}
.wrapper:hover:after {
border: 0;
box-shadow: none;
}
.wrapper:after {
content: ' ';
display: block;
position: relative;
width: 160px;
height: 160px;
top: calc(-50% - 83px);
left: calc(50% - 83px);
border-radius: 50%;
background:transparent;
border: 3px solid #fff;
box-shadow: 0px 0px 6px #aaa;
pointer-events: none;
}
<br/>
<br/>
<div class="wrapper">
<div id="map-canvas" class="mask">
</div>
</div>