How TO - Image Overlay Zoom
Naučte se, jak vytvořit efekt přiblížení překryvného obrázku při umístění kurzoru myši.
Přiblížení obrazu po najetí myší na celou obrazovku
Umístěním ukazatele myši na obrázek zobrazíte efekt přiblížení.
Jak vytvořit efekt přiblížení překrytí
Krok 1) Přidejte HTML:
Příklad
<div class="container">
<img src="img_avatar.png" alt="Avatar"
class="image">
<div class="overlay">
<div
class="text">Hello World</div>
</div>
</div>
Krok 2) Přidejte CSS:
Příklad
/* Container
needed to position the overlay. Adjust the width as needed */
.container {
position: relative;
width: 50%;
}
/* Make the image to responsive */
.image {
width: 100%;
height: auto;
}
/*
The overlay effect (full height and width) - lays on top of the container and
over the image */
.overlay {
position: absolute;
bottom: 0;
left: 0;
right:
0;
background-color: #008CBA;
overflow: hidden;
width: 100%;
height: 100%;
transform: scale(0);
transition: .3s ease;
}
/* When you mouse over the container, the
overlay text will "zoom" in display */
.container:hover .overlay {
transform:
scale(1);
}
/* Some text inside the overlay, which is positioned in
the middle vertically and horizontally */
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
Tip: Podívejte se také na další efekty překryvného obrázku (vyblednutí, posunutí atd.) v našem Návodu – Překryvný obrázek s přechodem .
Přejděte do našeho výukového programu pro obrázky CSS , kde se dozvíte více o tom, jak upravovat obrázky.