Wie kann man Bilder und Hintergrundbilder beim Hover zoomen
In diesem Kapitel erfahren Sie, wie man ein Element nur mit CSS vergrößert und skaliert, insbesondere Bilder und Hintergrundbilder beim Hover. Dieser Effekt wird vor allem in Galerien, beim Verkauf von Produkten und bei Portfoliofällen, bei denen das Design sowohl visuelle als auch informative Details darstellen soll, eingesetzt.
Um einen Zoomeffekt zu bekommen, müssen Sie die CSS-Eigenschaft transform mit Ihrem bevorzugten Skalenwert verwenden. Es ermöglicht die Verwaltung der Vergrößerung des Bildes. Die CSS-Animationen profitieren von der Hardwarebeschleunigung und wirken daher flacher als andere Animationstypen.
Die empfohlene Größe ist transform: scale (1.5), was einen 150%igen Zoomeffekt ergibt.
Wenn der Zoom zu groß ist, wird er außerhalb des Ansichtsfensters platziert.
Verwenden Sie ein zusätzliches Tag <div> innerhalb des übergeordneten Objekts anstelle von <img>, um sich als ein Bild zu verhalten.
Definieren Sie dann die Dimensionen für das übergeordnete Element. Als nächstes kann das Kind das Elternteil mit width: 100% und height: 100% füllen sowie background-image einstellen, um sicherzustellen, dass es so skaliert wird, dass es den Bereich berücksichtigt.
Der nächste Schritt ist die Anwendung von den Effekten :hover auf das übergeordnete Element, die das untergeordnete Element betreffen. Ein Stil :focus ist auch gut für die Bequemlichkeit.
Um das notwendige Ergebnis zu bekommen, fügen Sie einige Übergänge zum üblichen Zustand unseres untergeordneten Elements hinzu, indem Sie die CSS-Eigenschaft transition verwenden.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
* {
box-sizing: border-box;
}
.myzoom {
padding: 50px;
background-color: #1c87c9;
transition: transform .2s;
width: 200px;
height: 200px;
margin: 0 auto;
}
.myzoom:hover,
.myzoom:focus {
-ms-transform: scale(1.5); /* IE */
-webkit-transform: scle(1.5); /* Safari */
transform: scale(1.5);
}
</style>
</head>
<body>
<h2>Zoomeffekt bei Hover</h2>
<p>Bewegen Sie den Mauszeiger über das Element, um die Wirkung zu sehen.</p>
<div class="myzoom"></div>
</body>
</html>Sie können Pseudoelemente wie ::before verwenden, um ein Farb-Overlay hinzuzufügen.
Dann zeigt das untergeordnete Element eine Farbüberlagerung an, wenn Sie mit der Maus über das übergeordnete Element bewegen.
Und am Ende erfahren Sie, wie man Text zu unserem Overlay hinzufügen kann. Das kann erreicht werden, indem der Text in den Tags <span> oder <a> Tag platziert wird, so dass er nur sichtbar ist, wenn er mit der Maus bewegt wird.
Beispiel
<!DOCTYPE html>
<html>
<head>
<style>
html, body {
margin:0px;
padding: 0px;
}
.wrapper {
padding: 50px 50px;
max-width: 1200px;
text-align: center;
margin-left: auto;
margin-right: auto;
}
.container {
width: 45%;
margin: 20px;
height: 300px;
border: 3px solid #eee;
overflow: hidden;
position: relative;
float: left;
display: inline-block;
cursor: pointer;
}
.child {
height: 100%;
width: 100%;
background-size: cover;
background-repeat: no-repeat;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.bg-one {
background-image: url(http://w3docs.com/uploads/media/default/0001/03/66cf5094908491e69d8187bcf934050a4800b37f.jpeg);
}
.bg-two {
background-image: url(https://w3docs.com/uploads/media/default/0001/03/5bfad15a7fd24d448a48605baf52655a5bbe5a71.jpeg);
}
span {
display: none;
font-size: 35px;
color: #ffffff !important;
font-family: sans-serif;
text-align: center;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
height: 50px;
cursor: pointer;
text-decoration: none;
}
.container:hover .child, .container:focus .child {
-ms-transform: scale(1.2);
-moz-transform: scale(1.2);
-webkit-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
}
.container:hover .child:before, .container:focus .child:before {
display: block;
}
.container:hover span, .container:focus span {
display: block;
}
.child:before {
content: "";
display: none;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
background-color: rgba(52,73,94,0.75);
}
@media screen and (max-width: 960px) {
.container {
width: 100%;
margin: 20px 0;
}
.wrapper {
padding: 20px;
}
}
</style>
</head>
<body>
<p>Bewegen Sie mit der Maus über die Bilder, um den Effekt zu sehen.</p>
<div class="wrapper">
<div class="container">
<div class="child bg-one">
<span>London</span>
</div>
</div>
<div class="container">
<div class="child bg-two">
<span>New York</span>
</div>
</div>
</div>
</body>
</html>Ein weiteres Beispiel, wo das Tag <img> verwendet wird und der Zoomeffekt darauf ist. Die Bilder werden in eine Liste eingefügt, so dass Sie einen Galerie-Effekt bekommen können.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style >
ul {
padding: 0;
margin: 50px 20px;
list-style: none;
}
ul li {
margin: 5px;
display: inline-block;
padding: 5px;
border: 1px solid #f2f2f2;
}
ul li img {
width: 125px;
height: 125px;
display: block;
}
ul li:hover img {
transform: scale(1.5);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
</style>
</head>
<body>
<ul>
<li>
<img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq">
</li>
<li>
<img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq">
</li>
<li>
<img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq">
</li>
</ul>
</body>
</html>Hier sehen Sie ein weiteres Beispiel, das 10 Zoomeffekte beim Hover enthält: zoom in, zoom out, slide, rotate, blur, grayscale, sepia und blur+grayscale.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
h1 {
margin: 30px 15px 0;
font-weight: 300;
}
h2 {
margin: 60px 15px 0;
padding: 0;
font-weight: 300;
}
.column {
margin: 15px 15px 0;
padding: 0;
}
.column:last-child {
padding-bottom: 60px;
}
.column::after {
content: '';
clear: both;
display: block;
}
.column div {
position: relative;
float: left;
width: 300px;
height: 200px;
margin: 0 0 0 25px;
padding: 0;
}
.column div {
margin-left: 0;
}
.column div span {
position: absolute;
bottom: -20px;
left: 0;
z-index: -1;
display: block;
width: 300px;
margin: 0;
padding: 0;
color: #444;
font-size: 18px;
text-decoration: none;
text-align: center;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
opacity: 0;
}
figure {
width: 300px;
height: 200px;
margin: 0;
padding: 0;
background: #fff;
overflow: hidden;
}
figure:hover+span {
bottom: -36px;
opacity: 1;
}
/* Zoom In #1 */
.hover01 figure img {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.hover01 figure:hover img {
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
/* Zoom In #2 */
.hover02 figure img {
width: 300px;
height: auto;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.hover02 figure:hover img {
width: 350px;
}
/* Zoom Out #1 */
.hover03 figure img {
-webkit-transform: scale(1.5);
transform: scale(1.5);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.hover03 figure:hover img {
-webkit-transform: scale(1);
transform: scale(1);
}
/* Zoom Out #2 */
.hover04 figure img {
width: 400px;
height: auto;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.hover04 figure:hover img {
width: 300px;
}
/* Slide */
.hover05 figure img {
margin-left: 30px;
-webkit-transform: scale(1.5);
transform: scale(1.5);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.hover05 figure:hover img {
margin-left: 0;
}
/* Rotate */
.hover06 figure img {
-webkit-transform: rotate(15deg) scale(1.4);
transform: rotate(15deg) scale(1.4);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.hover06 figure:hover img {
-webkit-transform: rotate(0) scale(1);
transform: rotate(0) scale(1);
}
/* Blur */
.hover07 figure img {
-webkit-filter: blur(3px);
filter: blur(3px);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.hover07 figure:hover img {
-webkit-filter: blur(0);
filter: blur(0);
}
/* Gray Scale */
.hover08 figure img {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.hover08 figure:hover img {
-webkit-filter: grayscale(0);
filter: grayscale(0);
}
/* Sepia */
.hover09 figure img {
-webkit-filter: sepia(100%);
filter: sepia(100%);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.hover09 figure:hover img {
-webkit-filter: sepia(0);
filter: sepia(0);
}
/* Blur + Gray Scale */
.hover10 figure img {
-webkit-filter: grayscale(0) blur(0);
filter: grayscale(0) blur(0);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.hover10 figure:hover img {
-webkit-filter: grayscale(100%) blur(3px);
filter: grayscale(100%) blur(3px);
}
</style>
</head>
<body>
<h1>Hover over the images to see the effect</h1>
<h2 id="demo01">1. Zoom In #1</h2>
<div class="hover01 column">
<div>
<figure>
<img src="/uploads/media/default/0001/03/b847dafa71d0dc9d81db3ddda418e12934a5aa88.png" alt="Zoom in one" />
</figure>
<span>Hover</span>
</div>
</div>
<h2 id="demo02">2. Zoom In #2</h2>
<div class="hover02 column">
<div>
<figure>
<img src="/uploads/media/default/0001/03/b847dafa71d0dc9d81db3ddda418e12934a5aa88.png" alt="Zoom in two" />
</figure>
<span>Hover</span>
</div>
</div>
<h2 id="demo03">3. Zoom Out #1</h2>
<div class="hover03 column">
<div>
<figure>
<img src="/uploads/media/default/0001/03/b847dafa71d0dc9d81db3ddda418e12934a5aa88.png" alt="Zoom out one" />
</figure>
<span>Hover</span>
</div>
</div>
<h2 id="demo04">4. Zoom Out #2</h2>
<div class="hover04 column">
<div>
<figure>
<img src="/uploads/media/default/0001/03/b847dafa71d0dc9d81db3ddda418e12934a5aa88.png" alt="Zoom out two" />
</figure>
<span>Hover</span>
</div>
</div>
<h2 id="demo05">5. Slide</h2>
<div class="hover05 column">
<div>
<figure>
<img src="/uploads/media/default/0001/03/b847dafa71d0dc9d81db3ddda418e12934a5aa88.png" alt="Slide" />
</figure>
<span>Hover</span>
</div>
</div>
<h2 id="demo06">6. Rotate<small>(+Zoom Out)</small></h2>
<div class="hover06 column">
<div>
<figure>
<img src="/uploads/media/default/0001/03/b847dafa71d0dc9d81db3ddda418e12934a5aa88.png" alt="Rotate" />
</figure>
<span>Hover</span>
</div>
</div>
<h2 id="demo07">7. Blur</h2>
<div class="hover07 column">
<div>
<figure>
<img src="/uploads/media/default/0001/03/b847dafa71d0dc9d81db3ddda418e12934a5aa88.png" alt="Blur" />
</figure>
<span>Hover</span>
</div>
</div>
<h2 id="demo08">8. Gray Scale</h2>
<div class="hover08 column">
<div>
<figure>
<img src="/uploads/media/default/0001/03/b847dafa71d0dc9d81db3ddda418e12934a5aa88.png" alt="Gray Scale" />
</figure>
<span>Hover</span>
</div>
</div>
<h2 id="demo09">9. Sepia</h2>
<div class="hover09 column">
<div>
<figure>
<img src="/uploads/media/default/0001/03/b847dafa71d0dc9d81db3ddda418e12934a5aa88.png" alt="Sepia" />
</figure>
<span>Hover</span>
</div>
</div>
<h2 id="demo10">10. Blur + Gray Scale</h2>
<div class="hover10 column">
<div>
<figure>
<img src="/uploads/media/default/0001/03/b847dafa71d0dc9d81db3ddda418e12934a5aa88.png" alt="Blur and Gray Scale" />
</figure>
<span>Hover</span>
</div>
</div>
</body>
</html>