New Topic/Question
Reply
I'm back, with a new problem on a new day, except...I've tried multiple things before coming to you guys.
Problem:
Using an Image Gallery (I found a nice image gallery online free of charge so I'm using it)as a video gallery (videos embedded from youtube)
Gallery Code
<!doctype html> <html> <head> <link rel=stylesheet href=g.css> <title>Gallery</title> </head> <body> <a href="index.html">Home</a> <span id=1> <span id=2> <span id=3> <span id=4> <a data-paginate href=#1></a> <a data-paginate href=#2></a> <a data-paginate href=#3></a> <a data-paginate href=#4></a> <a data-dir=l href=#1></a> <a data-dir=l href=#2></a> <a data-dir=l href=#3></a> <a data-dir=r href=#2></a> <a data-dir=r href=#3></a> <a data-dir=r href=#4></a> <span> <img src=1.jpg> <img src=2.jpg> <img src=3.jpg> <img src=4.jpg> </span> </span> </span> </span> </span> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /><br /><br /> <br /> <br /> <br /> <br /> <br /> <center> Youtube Backgrounds I have done <a href="index.html">Home</a> <br /> </center> </body> </html>
CSS
body {
background:rgb(28,28,28);
}
[id="1"] {
overflow:hidden;
position:absolute;
top:50%;
left:50%;
width:800px;
height:450px;
margin:-260px 0 0 -400px;
border-radius:10px;
-webkit-box-shadow:0 1px 7px #000;
box-shadow:0 1px 7px #000;
}
[id="1"]:hover a {
opacity:1;
}
[id="1"]:target [data-paginate][href$="1"],
[id="2"]:target [data-paginate][href$="2"],
[id="3"]:target [data-paginate][href$="3"],
[id="4"]:target [data-paginate][href$="4"] {
background-position:0 0;
}
[id="1"]:target *+span {
-webkit-transform:translate3d(0,0,0);
-moz-transform:translateX(0);
}
[id="2"]:target *+span {
-webkit-transform:translate3d(-800px,0,0);
-moz-transform:translateX(-25%);
}
[id="3"]:target *+span {
-webkit-transform:translate3d(-1600px,0,0);
-moz-transform:translateX(-50%);
}
[id="4"]:target *+span {
-webkit-transform:translate3d(-2400px,0,0);
-moz-transform:translateX(-75%);
}
[id="2"] {
display:block;
height:100%;
-webkit-mask-box-image:url(mask.png);
}
[id="2"]::before {
content:"";
width:100%;
height:100%;
background:url(border.png);
pointer-events:none;
}
[id="2"]::before, a {
position:absolute;
z-index:1;
}
a {
opacity:0;
-webkit-transition:opacity .8s cubic-bezier(0,0,.4,1);
-moz-transition:opacity .8s cubic-bezier(0,0,.4,1);
}
[data-paginate] {
left:356px;
bottom:15px;
width:16px;
height:17px;
background:url(dots.png) no-repeat 0 100%;
}
[data-paginate][href$="2"] {
left:381px;
}
[data-paginate][href$="3"] {
left:405px;
}
[data-paginate][href$="4"] {
left:429px;
}
[data-dir] {
top:200px;
background:url(arrows.png);
width:29px;
height:29px;
visibility:hidden;
}
[data-dir]:active {
-webkit-transform:translateY(1px);
-moz-transform:translateY(1px);
}
[data-dir="l"] {
left:30px;
background-position:0 100%;
}
[data-dir="r"] {
right:30px;
}
[id="1"]:target [data-dir="r"][href$="2"],
[id="2"]:target [data-dir="l"][href$="1"],
[id="2"]:target [data-dir="r"][href$="3"],
[id="3"]:target [data-dir="l"][href$="2"],
[id="3"]:target [data-dir="r"][href$="4"],
[id="4"]:target [data-dir="l"][href$="3"] {
visibility:visible;
}
*+span {
display:block;
width:3200px;
-webkit-transition:-webkit-transform 1s cubic-bezier(0,0,.2,1);
-moz-transition:-moz-transform 1s cubic-bezier(0,0,.2,1);
}
img {
float:left;
}
I've tried changing around the CSS to try suit for videos...not really sure what to do
As the website I got this from didn't explain the CSS I'm a little stuck as to what to do :| so if anyone has the time to go through with some of what it means it'd be much appreciated!
Thanks
Brent
MultiQuote
| 