Ich möchte fragen, wie kann ich hier einen schwebenden Effekt erzielen? Ich meine die, wenn Sie ein Bild schweben. Link to a page with desired effectWie erreicht man den Zoom-Effekt?
-3
A
Antwort
1
können Sie die folgende Eigenschaft:
.item:hover img {
-moz-transform: scale(2.0);
-webkit-transform: scale(2.0);
transform: scale(2.0);
}
Dies wird einen Zoom-in-Effekt auf dem Bild, wenn es einge schwebt. Sie können die Parameter variieren, um den gewünschten Effekt zu erzielen.
0
Sie können dies betrachten, seine ähnlich dem, was Sie wollen:
div {
height: 100px;
width: 100px;
overflow: hidden;
position: relative;
}
p {
background-color: black;
text-align: center;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: 0;
color: white;
line-height: 100px;
}
img:hover {
-moz-transform: scale(2.0);
-webkit-transform: scale(2.0);
transform: scale(2.0);
}
img {
height:100px;
width: 100px;
transition: all .2s ease-in-out;
opacity: 0.5;
}
<div>
<p>Text</p>
<img src="https://placeimg.com/640/480/any">
</div>
Verwandte Themen
- 1. Wie erreicht man RSS-Nachrichten?
- 2. Wie deaktiviert man den Doppelklick-Zoomeffekt in der Standard-Kartenaktivität und fügt ihn für den Marker hinzu?
- 3. Titan: Wie erreicht man den maximalen Wert einer Long-Eigenschaft?
- 4. Wie erreicht man den Datenfluss bei ungenutzten Variablenzuweisungen?
- 5. Wie erreicht man den Click-Effekt der Material UI?
- 6. Wie erreicht man Multiindex-Levels in Pandas?
- 7. wie man Paginierung erreicht HTML PHP-MySQL
- 8. Wie erreicht man tag agnostic gestylte Komponenten?
- 9. Wie erreicht man Text-Extrakt auf Schienen?
- 10. Wie erreicht man das asynchrone in Vertex
- 11. Rails RESTful to_xml - Wie erreicht man Verbundenheit?
- 12. Bluemix Iot Foudation, wie erreicht man Datenvisualisierung?
- 13. Wie erreicht man Android's getViewById in iOS?
- 14. Wie erreicht man Zeilenversionierung in Rotverschiebung?
- 15. Delegiertenmuster in Reagieren - wie erreicht man es?
- 16. Wie erreicht man eine animierte CollapsingToolbar?
- 17. Wie erreicht man diese Animation mit Spritekit?
- 18. Wie erreicht man Sicherheitsstufe 3 in FIWARE?
- 19. Wie erreicht man maximale Schreibgeschwindigkeit mit Python?
- 20. Wie erreicht man die Fadundurchsichtigkeit eines Elements?
- 21. Wie erreicht man dieses Bootstrap-Layout?
- 22. Wie erreicht man die Paginierung in HBase?
- 23. Wie erreicht man Methodenverkettung in Java?
- 24. Wie erreicht man dies mit Bootstrap?
- 25. Wie erreicht man automatische Abmeldung in PHP?
- 26. Wie erreicht man dies mit XmlSerializer?
- 27. Wie erreicht man Paginierung in Lucene?
- 28. Wie erreicht man Zero-Ausfallzeiten mit Chef?
- 29. Wie erreicht man ein Tabellenlayout ohne Tabellen?
- 30. Wie erreicht man vertikale Parallelität in Funken?
Ok, das ist toll: D Und wie kann ich einen Text hinzufügen? Zum Beispiel "Lorem Ipsum" auf schwebendem Teil? Genau wie auf dieser Seite :) – Atomix
@Atomix aktualisiert den Code für Text – Masoud