diedVIPs

html knowhow

Bild dreht bei hover horizontal










Bild dreht sich bei hover horizontal

So sieht´s aus


Avatar
Avatar


Quellcode
<html>
<head>
Hier nichts

<style type="text/css">
.flip-card {background-color: transparent;width: 28%;height: 300px;perspective: 500px;}
.flip-card-inner {position: absolute;width: 60%;height: 100%;text-align: center;transition: transform 0.6s;transform-style: preserve-3d;box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);}
.flip-card:hover .flip-card-inner {transform: rotateY(180deg);}
.flip-card-front, .flip-card-back {position: absolute;width: 100%;height: 100%;-webkit-backface-visibility: hidden;backface-visibility: hidden;}
.flip-card-front {background-color: #bbb;color: black;}
.flip-card-back {background-color: #2980b9;color: white;transform: rotateY(180deg);}
</style>
<head>

<body >
<center><div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front"><a href="http://ovoice.de"><img src="Bilder/W-ovoice.jpg" alt="Avatar" style="width:140%;height:100%;" /></a></div>
<div class="flip-card-back"><a href="http://ovoice.de"><img src="Bilder/W-ovoice.jpg" alt="Avatar" style="width:140%;height:100%;" class="auto-style54" /></a></div>
</div></div></center>

</body>
</html>








Kontakt    Datenschutz    Impressum