Hover Effect Background Scale

 

CSS:

 

.blocks-gallery-item figure a:before{
transition: all .5s ease;
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #333;
transform: scale(0);
}

.blocks-gallery-item figure a:hover:before{
opacity: .5;
transform: scale(1);
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTMxLjYgMjcuN2wtNi4yLTYuMmMtLjMtLjMtLjctLjQtMS4xLS40aC0xYzEuNy0yLjIgMi44LTUgMi44LTggMC03LjItNS44LTEzLTEzLTEzUzAgNS44IDAgMTNzNS44IDEzIDEzIDEzYzMgMCA1LjgtMSA4LTIuOHYxYzAgLjQuMi44LjQgMS4xbDYuMiA2LjJjLjYuNiAxLjUuNiAyLjEgMGwxLjgtMS44Yy42LS41LjYtMS40LjEtMnpNMTMgMjFjLTQuNCAwLTgtMy42LTgtOHMzLjYtOCA4LTggOCAzLjYgOCA4LTMuNiA4LTggOHoiLz48L3N2Zz4=");
background-size: 32px 32px;
background-position: center;
background-repeat: no-repeat;
}

.blocks-gallery-item figure a:after{
transition: all .6s ease .2s;
content: "";
position: absolute;
top: 8px;
left: 8px;
right: 8px;
bottom: 8px;
border: 1px solid #aaa;
background: #000;
opacity: 0;
transform: scale(0);
}

.blocks-gallery-item figure a:hover:after{
opacity: .35;
transform: scale(1);
}