Képgaléria

Galéria overlay efekttel

 

 

 

<!--kód eleje ==================================== --> 
 <div class="row">
    <div class="col-sm-4">
        <div class="overlay-container">
            <img src="/kepek/images/890.jpg" alt=""><a class="overlay fancybox" href="/kepek/images/890.jpg" rel="group"><i class="fa fa-search-plus"></i><span>App Development</span></a>
        </div>
    </div>
    
    <div class="col-sm-4">
        <div class="overlay-container">
            <img src="/kepek/images/890.jpg" alt=""><a class="overlay fancybox" href="/kepek/images/890.jpg" rel="group"><i class="fa fa-search-plus"></i><span>App Development</span></a>
        </div>
    </div>
    
    <div class="col-sm-4">
        <div class="overlay-container">
            <img src="/kepek/images/890.jpg" alt=""><a class="overlay fancybox" href="/kepek/images/890.jpg" rel="group"><i class="fa fa-search-plus"></i><span>App Development</span></a>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-sm-4">
        <div class="overlay-container">
            <img src="/kepek/images/890.jpg" alt=""><a class="overlay fancybox" href="/kepek/images/890.jpg" rel="group"><i class="fa fa-search-plus"></i><span>App Development</span></a>
        </div>
    </div>
    
    <div class="col-sm-4">
        <div class="overlay-container">
            <img src="/kepek/images/890.jpg" alt=""><a class="overlay fancybox" href="/kepek/images/890.jpg" rel="group"><i class="fa fa-search-plus"></i><span>App Development</span></a>
        </div>
    </div>
    
    <div class="col-sm-4">
        <div class="overlay-container">
            <img src="/kepek/images/890.jpg" alt=""><a class="overlay fancybox" href="/kepek/images/890.jpg" rel="group"><i class="fa fa-search-plus"></i><span>App Development</span></a>
        </div>
    </div>
</div>  
<!--kód vége ==================================== -->

Galéria sima

<!--kód eleje ==================================== --> 
 <div class="row">
<div class="col-sm-4">
<p><a class="fancybox" href="/kepek/images/890.jpg" rel="group"><img alt="" class="normal" src="/kepek/images/890.jpg" /></a></p>
</div>

<div class="col-sm-4">
<p><a class="fancybox" href="/kepek/images/890.jpg" rel="group"><img alt="" class="normal" src="/kepek/images/890.jpg" /></a></p>
</div>

<div class="col-sm-4">
<p><a class="fancybox" href="/kepek/images/890.jpg" rel="group"><img alt="" class="normal" src="/kepek/images/890.jpg" /></a></p>
</div>
</div>

<div class="row">
<div class="col-sm-4">
<p><a class="fancybox" href="/kepek/images/890.jpg" rel="group"><img alt="" class="normal" src="/kepek/images/890.jpg" /></a></p>
</div>

<div class="col-sm-4">
<p><a class="fancybox" href="/kepek/images/890.jpg" rel="group"><img alt="" class="normal" src="/kepek/images/890.jpg" /></a></p>
</div>

<div class="col-sm-4">
<p><a class="fancybox" href="/kepek/images/890.jpg" rel="group"><img alt="" class="normal" src="/kepek/images/890.jpg" /></a></p>
</div>
</div>  
<!--kód vége ==================================== -->

 

 

 

Galéria 3

Text Caption

Text Caption

Text Caption

Text Caption

Text Caption

Text Caption

Text Caption

Text Caption

Text Caption

Text Caption

Text Caption

 

 

 

Html

<!--kód eleje ==================================== --> 
            <div class="container-fluid">

                <div class="row">
                    <div class="cover-card col-sm-4" style="background: url(http://lorempixel.com/300/200/nightlife/2) no-repeat center top;background-size:cover;">
                        <p>
                            Text Caption
                        </p>
                    </div>
                    <div class="cover-card col-sm-8" style="background: url(http://lorempixel.com/600/200/nightlife/3) no-repeat center top;background-size:cover;">
                        <p>
                            Text Caption
                        </p>
                    </div>
                    <div class="cover-card col-sm-3" style="background: url(http://lorempixel.com/300/200/nightlife/1) no-repeat center top;background-size:cover;">
                        <p>
                            Text Caption
                        </p>
                    </div>
                    <div class="cover-card col-sm-3" style="background: url(http://lorempixel.com/300/200/nightlife/4) no-repeat center top;background-size:cover;">
                        <p>
                            Text Caption
                        </p>
                    </div>
                    <div class="cover-card col-sm-3" style="background: url(http://lorempixel.com/300/200/nightlife/6) no-repeat center top;background-size:cover;">
                        <p>
                            Text Caption
                        </p>
                    </div>
                    <div class="cover-card col-sm-3" style="background: url(http://lorempixel.com/300/200/nightlife/) no-repeat center top;background-size:cover;">
                        <p>
                            Text Caption
                        </p>
                    </div>

                    <div class="cover-card col-sm-4" style="background: url(http://lorempixel.com/600/200/city/4) no-repeat center top;background-size:cover;">
                        <p>
                            Text Caption
                        </p>
                    </div>
                    <div class="cover-card col-sm-4" style="background: url(http://lorempixel.com/300/200/city/5) no-repeat center top;background-size:cover;">
                        <p>
                            Text Caption
                        </p>
                    </div>
                    <div class="cover-card col-sm-4" style="background: url(http://lorempixel.com/300/200/city/6) no-repeat center top;background-size:cover;">
                        <p>
                            Text Caption
                        </p>
                    </div>
                    <div class="cover-card col-sm-6" style="background: url(http://lorempixel.com/300/200/city/7) no-repeat center top;background-size:cover;">
                        <p>
                            Text Caption
                        </p>
                    </div>
                    <div class="cover-card col-sm-6" style="background: url(http://lorempixel.com/300/200/city/8) no-repeat center top;background-size:cover;">
                        <p>
                            Text Caption
                        </p>
                    </div>
                </div>
            </div>
<!--kód vége ==================================== -->

Css

<!--kód eleje ==================================== --> 
        .cover-card {
            border: 2px solid white;
            background: silver;
            padding: 0px;
            margin: 0px;
            height: 200px;
        }
        
        .cover-card > p {
            text-align: center;
            background-color: rgba(6, 6, 6, 0.0);
            color: rgba(6, 6, 6, 0.0);
            width: 100%;
            height: 100%;
            font-weight: bold;
            font-size: 20px;
        }
        
        .cover-card:hover > p {
            background-color: rgba(6, 6, 6, 0.3);
            color: white;
            text-shadow: 3px 3px 10px #000;
        }
<!--kód vége ==================================== -->

 

 

 

Variáció

Hatalmas város
Az utolsó két kép linkelve van. Kép megjelenítés: fancybox

Hatalmas város
Az utolsó két kép linkelve van. Kép megjelenítés: fancybox

Hatalmas város
Az utolsó két kép linkelve van. Kép megjelenítés: fancybox

Hatalmas város
Az utolsó két kép linkelve van. Kép megjelenítés: fancybox

Hatalmas város
Az utolsó két kép linkelve van. Kép megjelenítés: fancybox

Hatalmas város
Az utolsó két kép linkelve van. Kép megjelenítés: fancybox

Hatalmas város
Az utolsó két kép linkelve van. Kép megjelenítés: fancybox

Hatalmas város
Az utolsó két kép linkelve van. Kép megjelenítés: fancybox

Html

<!--kód eleje ==================================== --> 
<a class="fancybox" href="/kepek/images/890.jpg" rel="group">
    <div class="kepfelirat col-sm-6" style="background: url(http://lorempixel.com/900/500/city/6) no-repeat center top;background-size:cover;">
        <p>
            <big>Hatalmas város</big><br>Az utolsó két kép linkelve van. Kép megjelenítés: fancybox
        </p>
    </div>
</a>

 <a class="fancybox" href="/kepek/images/890.jpg" rel="group">
    <div class="kepfelirat col-sm-6" style="background: url(http://lorempixel.com/900/500/city/7) no-repeat center top;background-size:cover;">
        <p>
            <big>Hatalmas város</big><br>Az utolsó két kép linkelve van. Kép megjelenítés: fancybox
        </p>
    </div>
</a>   

<!--  ---------------------------------------------------------------------------------------->   

<a class="fancybox" href="/kepek/images/890.jpg" rel="group">
    <div class="kepfelirat100 col-sm-2" style="background: url(http://lorempixel.com/900/500/city/8) no-repeat center top;background-size:cover;">
        <p>
            <big>Hatalmas város</big><br>Az utolsó két kép linkelve van. Kép megjelenítés: fancybox
        </p>
    </div>
</a>

<a class="fancybox" href="/kepek/images/890.jpg" rel="group">
    <div class="kepfelirat100 col-sm-2" style="background: url(http://lorempixel.com/900/500/city/8) no-repeat center top;background-size:cover;">
        <p>
            <big>Hatalmas város</big><br>Az utolsó két kép linkelve van. Kép megjelenítés: fancybox
        </p>
    </div>
</a>

<a class="fancybox" href="/kepek/images/890.jpg" rel="group">
    <div class="kepfelirat100 col-sm-2" style="background: url(http://lorempixel.com/900/500/city/8) no-repeat center top;background-size:cover;">
        <p>
            <big>Hatalmas város</big><br>Az utolsó két kép linkelve van. Kép megjelenítés: fancybox
        </p>
    </div>
</a>

<a class="fancybox" href="/kepek/images/890.jpg" rel="group">
    <div class="kepfelirat100 col-sm-2" style="background: url(http://lorempixel.com/900/500/city/8) no-repeat center top;background-size:cover;">
        <p>
            <big>Hatalmas város</big><br>Az utolsó két kép linkelve van. Kép megjelenítés: fancybox
        </p>
    </div>
</a>

<a class="fancybox" href="/kepek/images/890.jpg" rel="group">
    <div class="kepfelirat100 col-sm-2" style="background: url(http://lorempixel.com/900/500/city/8) no-repeat center top;background-size:cover;">
        <p>
            <big>Hatalmas város</big><br>Az utolsó két kép linkelve van. Kép megjelenítés: fancybox
        </p>
    </div>
</a>

<a class="fancybox" href="/kepek/images/890.jpg" rel="group">
    <div class="kepfelirat100 col-sm-2" style="background: url(http://lorempixel.com/900/500/city/8) no-repeat center top;background-size:cover;">
        <p>
            <big>Hatalmas város</big><br>Az utolsó két kép linkelve van. Kép megjelenítés: fancybox
        </p>
    </div>
</a>
<!--kód vége ===================================== -->

css

<!--kód eleje ==================================== --> 
            .kepfelirat {
            border: 4px solid white;
            background: silver;
            padding: 0px;
            margin: 0px;
            height: 200px;
        }
         .kepfelirat big{
            font-size: 20px;
        }
        .kepfelirat > p {
            text-align: center;
            background-color: rgba(6, 6, 6, 0.0);
            color: rgba(6, 6, 6, 0.0);
            width: 100%;
            height: 100%;
            font-weight: bold;
            font-size: 13px;
            padding-top: 15px;
        }
        .kepfelirat:hover > p {
            background-color: rgba(6, 6, 6, 0.3);
            color: white;
            text-shadow: 3px 3px 10px #000;
        } 
        
        
         .kepfelirat100 {
            border: 4px solid white;
            background: silver;
            padding: 0px;
            margin: 0px;
            height: 100px;
        }
         .kepfelirat100 big{
            font-size: 20px;
        }
        .kepfelirat100 > p {
            text-align: center;
            background-color: rgba(6, 6, 6, 0.0);
            color: rgba(6, 6, 6, 0.0);
            width: 100%;
            height: 100%;
            font-weight: bold;
            font-size: 13px;
            padding-top: 5px;
        }
        .kepfelirat100:hover > p {
            background-color: rgba(6, 6, 6, 0.3);
            color: white;
            text-shadow: 3px 3px 10px #000;
        } 
<!--kód vége ===================================== -->

 

 

 

Teljes oldalszélességben (container-fluid)

Szükség szerint a képeket linkelni is lehet. Utolsó kettő kép be is van linkelve.

Text Caption

Text Caption

Text Caption

Text Caption

Text Caption

Text Caption

Text Caption

Text Caption

Text Caption

A nagy operaház
Helyszín: Ausztrália 2015. Címsor < big >

Hatalmas város
Az utolsó két kép linkelve van. Kép megjelenítés: fancybox

KATcms | K@tilla | Weblapkészítés, webdesign, Balatonfüred | Tartalom | Kinézet: K@tilla | Statsztika

Tájékoztatunk, hogy az oldal „cookie”-kat (sütiket) használ. Fontos azonban tudnod, hogy ezek semmilyen adatot nem tárolnak illetve küldenek rólad vagy böngészési szokásaidról, csak is az oldal használatát segítik. Weboldalunk használatával beleegyezel a cookie-k használatába. Ha mégsem szeretnéd akkor az internetböngésződ beállításainak megváltoztatásával a sütik küldése letiltható!

oldalcíme.hu © 1999 - 2017

Top