Ich versuche ein Raster aus Fotos zu erstellen, in dem Sie den Mauszeiger darüber bewegen können und sie in andere Bilder wechseln. Ich habe versucht, das Bild auf CSS als Hintergrundbild zu platzieren, aber wenn Sie den Mauszeiger bewegen, scheint das andere Bild nicht genau die gleiche Größe zu haben (wenn es tatsächlich ist).Wie erstellt man ein Raster von Fotos, in denen man sie überfliegen kann und sie sich in andere Fotos verwandeln?
Ich habe auch versucht, zwei Bilder Methode (eine über der anderen) und es funktioniert gut mit nur einem Bild auf der Seite, aber mit einem Raster von Bildern, funktioniert es nicht wegen der position: absolute.
Der einzige Weg, dass ich fand, dass "Art" funktioniert, ist durch Ersetzen eines Bildes für das andere, aber dann haben Sie keinen fließenden Übergang (verblassen in ein anderes Bild).
Here is the access to code pen (seems to work better):
Code:
css:
.pages-content {
max-width: 400px
}
.left {
padding-left: 5px;
}
.right {
padding-right: 5px;
}
.bottom {
padding-bottom: 10px;
}
img.a {
\t position: absolute;
\t left: 0;
\t top: 0;
z-index: 10;
transition: opacity 1s ease-in-out;
}
img.a:hover {
opacity: 0;
}
img.b {
\t position: absolute;
\t left: 0;
\t top: 0;
}
HTML:<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<section class="container pages-content">
<div class="row">
\t <div class="col-md-12 bottom">
<img src="https://d1mwzmktacfw26.cloudfront.net/wp-content/uploads/2016/04/23105511/Frontier-400x200.jpg" alt="" class="img-fluid"/>
<!-- trying to use hover to change images
\t <img src="https://d1mwzmktacfw26.cloudfront.net/wp-content/uploads/2016/04/23105511/Frontier-400x200.jpg" alt="" class="img-fluid a"/>
<img src="http://www.tikbok.com/rahalat/wp-content/uploads/2011/08/1-400x200.jpg" alt="" class="img-fluid b"/> -->
\t </div>
\t </div>
\t <div class="row">
\t <div class="col-md-6 col-sm-12 right">
\t \t <img src="http://cheb-room.ru/uploads/cheb/2016/11/w9RC4W-QqXw-200x200.jpg" alt="" class="img-fluid" />
\t </div>
\t <div class="col-md-6 col-sm-12 bottom left">
\t \t <img src="http://cheb-room.ru/uploads/cheb/2016/11/w9RC4W-QqXw-200x200.jpg" alt="" class="img-fluid" />
\t </div>
</div>
\t <!-- Second block -->
\t <div class="row">
\t <div class="col-md-6 col-sm-12 right ">
\t \t <div class="row">
\t \t <div class="col-md-6 push-md-6 col-sm-12 bottom left">
<img src="http://www.animated-gifs.eu/category_cartoons/avatars-100x100-cartoons-spongebob/0038.gif" alt="" class="img-fluid"/>
\t \t </div>
\t \t <div class="col-md-6 pull-md-6 col-sm-12 bottom right">
<img src="http://www.animated-gifs.eu/category_cartoons/avatars-100x100-cartoons-spongebob/0038.gif" alt="" class="img-fluid"/>
\t \t </div>
\t \t <div class="col-md-12 bottom">
<img src="http://donsmaps.com/clickphotos/dolnivi200x100.jpg" alt="" class="img-fluid" />
\t \t </div>
\t \t <div class="col-md-12 bottom">
<img src="http://markcarson.com/images/SunBird-7-200x200.png" alt="" class="img-fluid" />
\t \t </div>
\t \t </div>
\t </div><!--./col-md-6-->
\t <div class="col-md-6 bottom col-sm-12 left project-image">
\t \t <img src="http://www.bravacasa.rs/wp-content/uploads/2014/03/Odlaganje-stvari-za-decu-slika-7-505x1025.jpg" width="200" class="img-fluid"/>
\t </div>
\t </div><!--./block 2-->
</section>
</body>
im codepen und der Code-Snippet sollte etwas passieren, wenn Sie über die Bilder schweben? Im Moment sind das nur statische Bilder. Ich weiß, dass du versuchst, es so zu haben, dass einer in den anderen übergeht ... – Anthony
@Anthony Der Code, den er für die Animation benutzt hat, wurde im HTML auskommentiert. – RMo
Ich habe eine Antwort unten gepostet. Sehen Sie, ob es für Sie funktioniert. – ITWitch