Hover для картинки с лупой и верхним покрытием
∘CSS 02.08.19 02.08.19 469
на главную сниппетовHover для картинки с лупой и верхним покрытием - вариант.
<![CDATA[<style>
.block {
position: relative;
display: inline-block;
line-height: 0;
cursor: pointer;
}
.layer {
position: absolute;
display: none;
top: 0;
background-color: rgba(0, 150, 255, 0.3);
height: 100%;
width: 100%;
}
.block:hover .layer {
display: block;
}
.bubu { /* Лупа */
position: absolute;
margin: auto; top: 0; bottom: 0; left: 0; right: 0; /* центрирование со всех сторон */
width: 40px; height: 40px;
text-align: center;
color: white;
font-family: 'Helvetica';
font-size: 50px;
padding-top: 18px;
box-sizing: border-box;
border: 3px solid white;
border-radius: 50%;
box-shadow: 1px 1px 5px #000;
}
.bubu::after { /* её ручка */
content: "";
width: 5px; height: 25px;
position: absolute;
background-color: white;
bottom: -20px;
right: -7px;
transform: rotate(-40deg);
box-shadow: 1px 1px 5px #000;
}
</style>
<div class="block">
<img src="https://gyazo.com/5e5d72d372a0ffa88dadb2da5ad479c4.png">
<div class="layer">
<div class="bubu">+</div>
</div>
</div>]]> на главную сниппетов
