Pomoc, kliknięcie na miniaturę a następnie powiększenie obrazka.

Question

Witam !

Jestem początkującym programistą dlatego prosiłbym o jak najprostrze wytłumaczenie mi tego ;)

Mam problem odnośnie Miniaturki na mojej stronie. Stworzyłem ładny efekt Hover itd... jednak zależy mi na tym aby po naciśnięciu obrazek pojawiał się w pełnych wymiarach. I tutaj problem bo nie chcę aby otwierał się na nowej karcie lecz na tej samej stronie. Np z lekko szarawym tłem przeźroczystym, obrazek na środku i jakiś X w prawym rogu aby zamknąć podgląd. Czy jest to bardzo trudny efekt do uzyskania ?

Z góry dziękuję za pomoc ;)

Answer 1

Możesz też poszukać w internecie o lightboxie.

Comments

Dokładnie o to mi chodziło ! jak przy 2 normalnych zdjęciach udało mi się to zrobić bez problemu tak przy 3 już one się pojawiły...

Dlatego że ustawiłem sobie testowo efekt który wyświetla się po najechaniu na zdjęcie. I Jako iż jestem jeszcze bardzo nieobeznany w tym temacie nie mogę sobie z tym poradzić.

Zdjęcia które działa

HTML

                <div class="postcard"> 
                    <div class="photo2">
                        <a href="#img2""><img src="obrazy/1.png" width="250px" height="141px" class="thumbnail2"  style="float: left"/></a>
                        <a href="#_" class="lightbox2" id="img2"/> <img src="obrazy/1.png">
                    </div>    
                </div>

CSS
.thumbnail2
{
    max-width: 100%;
    border: 2px solid #be5f00;
    transition: all 0.5s ease-in-out
}

.thumbnail2:hover 
{
    -webkit-transform: scale(1.20);
    -ms-transform: scale(1.20);
    transform: scale(1.20);
}

    /** Opcje Powiększenia **/

.lightbox2 {
    display: none;

    position: fixed;
    z-index: 999;
    width: 100%;
    height: 100%;
    text-align: center;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.8);
}

.lightbox2 img {
    max-width: 90%;
    max-height: 80%;
    margin-top: 10%;
}

.lightbox2:target {
    outline: none;
    display: block;
}

Zdjęcie z którym mam problem (ponieważ nałożony został efekt najechania) Wzorowałem się filmem https://www.youtube.com/watch?v=BjlC18jZe1o (23:58)

HTML

        <div class="postcard"> 
                    <div class="photo1">
                        <div class="overlay">
                        <img src="obrazy/2.png" width="250px" height="141px" class="photo1"/>
                        <a class="link" href=""><span class="icon"><i class="icon-thumbs-down-alt"></i><p>Robione na szybko</p></span></a>
                        </div>
                    </div>
                </div>

CSS

.photo1
{
    width: 250px;
    position: relative;
    border: 2px solid #be5f00;
}

.overlay
{
    position: relative;
    width: 250px;
    height: 141px;
}

.overlay .link
{
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    background-color: rgba(254, 127, 0, 0.4);
    left: 0px;
    top: 0px;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.overlay:hover .link
{
    opacity: 0.9;
}

.icon
{
    opacity: 1;
    display: block;
    top: 16%;
    position: relative;
    font-size: 50px;
}

.icon p
{
    font-size: 15px;
}

Czy pomoże ktoś w tym kodzie nałożyć to powiększenie z pierwszego zdjęcia tak aby jego efekt nie przepadł ?

Answer 2

To raczej pytanie do działu JavaScript :)

Answer 3

To się nazywa modal. Można to osiągnąć samym css za pomocą pseudoklasy :target;