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;
}
