Hover для картинки с лупой и верхним покрытием

02.08.19 20:19:23 02.08.19 20:20:06 88

Hover для картинки с лупой и верхним покрытием - вариант.

<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>