merhabalar blogger tema da post'un üstüne gelince alttaki resimdeki gibi kare açılıyor bu karenin tam ortasına ufak bir büyüteç resmi nasıl koyabilirim? css kodları aşağıdadır.



span.overlay:hover {
opacity: 1;
background: rgba(34, 34, 34, 0.55);
}

span.overlay::before {
z-index: 3;
border-top: 1px solid rgba(255, 255, 255, 0.5);
border-bottom: 1px solid rgba(255, 255, 255, 0.5);
-webkit-transform: scale(0, 1);
transform: scale(0, 1);
}

span.overlay::after {
z-index: 3;
border-right: 1px solid rgba(255, 255, 255, 0.5);
border-left: 1px solid rgba(255, 255, 255, 0.5);
-webkit-transform: scale(1, 0);
transform: scale(1, 0);
}

span.overlay::before,
span.overlay::after {
z-index: 3;
position: absolute;
top: 10px;
right: 10px;
bottom: 10px;
left: 10px;
content: '
'
;
opacity: 0;
-webkit-transition: opacity 0.5s, -webkit-transform 0.5s;
transition: opacity 0.5s, transform 0.5s;
}

span.overlay:hover::before,
span.overlay:hover::after {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}