Bild zentrieren und verkleinern beim hovern

Beim Bild hoven das Bild verkleinern

Der hier verwendete Code

<style> .mediaobergroup{ background-color: aliceblue; } .Instaaagran { background: url(https://gravatar.com/avatar/05985c88be5fa0d7f448e068960452b9?s=80&d=https://codepen.io/assets/avatars/user-avatar-80x80-bdcd44a3bfb9a5fd01eb8b86f9e033fa1a9897c3a15b33adfc2649a002dab1b6.png) no-repeat; } .Instaaagran:hover { background: url(http://sebastian1012.bplaced.net/bilder/homer.jpeg) no-repeat; background-size:60px 80px; background-position:center center; } .TWIIII { background: url(https://gravatar.com/avatar/05985c88be5fa0d7f448e068960452b9?s=80&d=https://codepen.io/assets/avatars/user-avatar-80x80-bdcd44a3bfb9a5fd01eb8b86f9e033fa1a9897c3a15b33adfc2649a002dab1b6.png) no-repeat; } .TWIIII:hover { background: url(http://sebastian1012.bplaced.net/bilder/homer.jpeg) no-repeat; background-size:60px 80px; background-position:center center; } .YYYTT { background: url(https://gravatar.com/avatar/05985c88be5fa0d7f448e068960452b9?s=80&d=https://codepen.io/assets/avatars/user-avatar-80x80-bdcd44a3bfb9a5fd01eb8b86f9e033fa1a9897c3a15b33adfc2649a002dab1b6.png) no-repeat; } .YYYTT:hover { background: url(http://sebastian1012.bplaced.net/bilder/homer.jpeg) no-repeat; background-size:60px 80px; background-position:center center; } .flex-container { display: flex; justify-content: center; background-color: DodgerBlue; } .flex-container > a { background-color: white; width: 188px; height:200px; margin: 10px; transition:all 2.0s; font-size: 30px; background-size:160px 180px; background-position:center center; } </style> <div class="flex-container"> <a class="Instaaagran" href="http://instagram.com/playgalaxy"></a> <a class="TWIIII" href="http://twitter.com/playgalaxy_net"></a> <a class="YYYTT" href="http://youtube.com"></a> </div>

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!