Css Galleri hjælp søges

Her kan du stille og svare på spørgsmål omkring CSS
Besvar
Voodoo
Begynder
Indlæg: 12
Tilmeldt: 15. feb 2014, 17:36
Geografisk sted: Gladsaxe.

Css Galleri hjælp søges

Indlæg af Voodoo » 30. okt 2014, 14:41

Hej, jeg er igang med at lave et image gallery til en opgave på skolen.
Jeg har fået lavet html delen og css delen færdig, Som er et simpelt galleri men med en zoom effekt som Css koden længere nede viser.

Men jeg tænkte så på at lave en hover caption effekt på billederne også som skal vises ved hover. men man skal stadig kunne trykke på billedet og forstørre/zoom...

Alt input på hvordan jeg kan lave hover captions uden at ødelægge forstørre effekten modtages med kyshånd.

HTML:

Kode: Vælg alt

<div class="container" id="container">

            	<div class="gallery">
			
                    <a tabindex="1"><img src="Pics/Galleri/Galleri01.jpg"></a>
             		<a tabindex="1"><img src="Pics/Galleri/Galleri02.jpg"></a>
                    <a tabindex="1"><img src="Pics/Galleri/Galleri03.jpg"></a>
                    <a tabindex="1"><img src="Pics/Galleri/Galleri04.jpg"></a>
                    <a tabindex="1"><img src="Pics/Galleri/Galleri05.jpg"></a>
                    <a tabindex="1"><img src="Pics/Galleri/Galleri06.jpg"></a>
                    <a tabindex="1"><img src="Pics/Galleri/Galleri07.jpg"></a>
                    <a tabindex="1"><img src="Pics/Galleri/Galleri08.jpg"></a>
                    <a tabindex="1"><img src="Pics/Galleri/Galleri09.jpg"></a>
                    <a tabindex="1"><img src="Pics/Galleri/Galleri10.jpg"></a>
                    <a tabindex="1"><img src="Pics/Galleri/Galleri11.jpg"></a>
                    <a tabindex="1"><img src="Pics/Galleri/Galleri12.jpg"></a>        

            			<span class="close">
            			</span>

            </div>
        </div>

CSS:

Kode: Vælg alt

/* CSS Styling til mit galleri */

.container {

    background:#ddd;
    margin:70px auto;
    padding:20px;
    position:relative;
    width:880px;
 	border: 5px solid #CCC;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;

}

 

/* css3 photo gallery styles */

.gallery {

    width:880px;
	padding-left: 25px;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:auto;
	margin-top:auto;
}

.gallery a {

    display:inline-block;
    height:150px;
    position:relative;
    width:200px;

}

.gallery a img {

    border:5px solid #fff;
    cursor:pointer;
    display:block;
    height:100%;
    left:0px;
    position:absolute;
    top:0px;
    width:100%;
    z-index:1;

    -moz-user-select: none;
    -khtml-user-select: none;
    user-select: none;

    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;

    -webkit-transition-property:width, height, top, bottom, left, right, z-index, border;
    -webkit-transition-duration:0.5s;
    -moz-transition-property:width, height, top, bottom, left, right, z-index, border;
    -moz-transition-duration:0.5s;
    -o-transition-property:width, height, top, bottom, left, right, z-index, border;
    -o-transition-duration:0.5s;
    transition-property:width, height, top, bottom, left, right, z-index, border;
    transition-duration:0.5s;

}

.gallery a:focus img {

    border:15px solid #fff;
    cursor:default;
    height:250%;
    position:absolute;
    width:250%;
    z-index:25;

    box-shadow:1px 1px 5px #888;
    -moz-box-shadow:1px 1px 5px #888;
    -webkit-box-shadow:1px 1px 5px #888;
    -webkit-transition-property:width, height, top, bottom, left, right, z-index, border;
    -webkit-transition-duration:0.5s;
    -moz-transition-property:width, height, top, bottom, left, right, z-index, border;
    -moz-transition-duration:0.5s;
    -o-transition-property:width, height, top, bottom, left, right, z-index, border;
    -o-transition-duration:0.5s;
    transition-property:width, height, top, bottom, left, right, z-index, border;
    transition-duration:0.5s;

}

 

/* Galleri Focus Styling, sørger for at billedet rykkes ved zoom effekt */ 

/* Øverste række */

.gallery a:focus:nth-child(1) img {

	left:150px;
	top:45px;
}

.gallery a:focus:nth-child(2) img {

    left:-50px;
	top:45px;
}

.gallery a:focus:nth-child(3) img {

    left:-250px;
	top:45px;
}

.gallery a:focus:nth-child(4) img {

    left:-425px;
	top:45px;
}

/* Anden række */

.gallery a:focus:nth-child(5) img {

	left:150px;
	top:-80px;
}

.gallery a:focus:nth-child(6) img {

    left:-50px;
	top:-80px;
}

.gallery a:focus:nth-child(7) img {

    left:-250px;
	top:-80px;
}

.gallery a:focus:nth-child(8) img {

    left:-425px;
	top:-80px;
}

/* Nederste række */
.gallery a:focus:nth-child(9) img {

	left:150px;
	top:-270px;
}

.gallery a:focus:nth-child(10) img {

    left:-50px;
	top:-270px;
}

.gallery a:focus:nth-child(11) img {

    left:-250px;
	top:-270px;
}

.gallery a:focus:nth-child(12) img {

    left:-425px;
	top:-270px;
}

/* extra close layer */

.gallery .close {

    background:transparent;
    cursor:pointer;
    display:none;
    height:1200px;
    left:0px;
    position:absolute;
    top:0px;
    width:1200px;
    z-index:30;

}

.gallery a:focus ~ .close {

    display:block;

}

På forhånd tak :D

Voodoo
Begynder
Indlæg: 12
Tilmeldt: 15. feb 2014, 17:36
Geografisk sted: Gladsaxe.

Re: Css Galleri hjælp søges

Indlæg af Voodoo » 1. nov 2014, 18:11

Jeg har fixet det.

Brugeravatar
ThomasI
Grundlægger
Grundlægger
Indlæg: 1526
Tilmeldt: 28. dec 2010, 10:49

Re: Css Galleri hjælp søges

Indlæg af ThomasI » 1. nov 2014, 18:22

Hej Voodoo

Godt du fandt ud af det - fortsat god weekend :)

Mvh.

Besvar