C

CSS – responsive Fotogalerie und overlay effekt

Diese Fotogalerie brauchst du einfach CSS und du muss wegen Javasript keine Sorge machen.

In diesem responsive Galerie „rows and columns“ passen sich zu deinem Bildschirm.

Hier seht meine HTML Kode dazu:

<ul id=“respi“>

<li>

<a class=“respi-cell“ href=“#“>

<img class=“respi-img“ src=“img/1.jpg“>

<span class=“respi-overlay“></span>

<span class=“respi-text“>Thun Küste</span>

</a>

</li>

</ul>

Und hier seht ihr das CSS,

Zuerst für die schöne Overlay effekt:

.respi-overlay {
position: absolute;
display:block;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
background: #3DC0F1 url(img/link.png) no-repeat center 20%;
background-size:50px 50px;
opacity:0;
filter:alpha(opacity=0);/For IE6 – IE8/
transition:all 0.6s;
}

respi li:hover .respi-overlay {opacity:0.8;}

Dann für die Responisiblität:

@media (max-width: 800px)

{ #respi li { width:50%;
}

}

CategoriesTutorial - Text

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.