Social Media 5
Am linken Browserrand werden die Social-Media Button eingeblendet.
CSS-Code
<style>
.social {
transition: transform 0.6s ease-in-out;
}
.social:hover {
transform: translate(115px, 0px);
}
</style>
Quelltext
<div style="position: fixed; top:200px; left:-115px; z-index:7000;"
class="social"
><a href="https://www.facebook.com/probsteizella"
target="_blank"><img title="zu Facebook" alt="" border="0"
src="http://zella.de/code/bilder/slide-fb.jpg"></a></div>
<div style="position: fixed; top:235px; left:-115px; z-index:7000;"
class="social"
><a href="https://plus.google.com/+probsteizella/about"
target="_blank"><img title="zu Google+" alt="" border="0"
src="http://zella.de/code/bilder/slide-google.jpg"></a></div>
<div style="position: fixed; top:270px; left:-115px; z-index:7000;"
class="social"
><a href="https://twitter.com/probsteizella"
target="_blank"><img title="zu Twitter" alt="" border="0"
src="http://zella.de/code/bilder/slide-tw.jpg"></a></div>
<div style="position: fixed; top:305px; left:-115px; z-index:7000;"
class="social"
><a href="http://code.zella.de/kontakt.html"
target="_blank"><img title="zu den Kontaktdaten" alt="" border="0"
src="http://zella.de/code/bilder/slide-kont.jpg"></a></div>
In der mobilen Ansicht kann dies aber durchaus als störend empfunden werden. Mit dem unten stehenden Code können wir die Button in der mobilen Ansicht ausbleneden. Der Wert 820px gibt die Bildschirmbreite an ab welcher die Butten ausgeblendet werden. Diesen Wert müsst ihr je nach Layout anpassen.
@media (max-width: 820px) {
.social {
display: none;
}}
code
