Runde Vorschaubilder originalbild Lightbox CSS hilfe
Moin, moin,
ich baue grade einen One-Pager und will ein Portfolio bestehend aus drei Bildern bzw. zwei Bildern und einem Video, einbauen. Die Vorschaubilder auf der Webseite sollen kreisförmig sein, wenn man sie anklickt, soll allerdings das Originalbild (bzw. Video) in einer Light Box erscheinen. Ich bin eher ein HTML / CSS Laie (weil eher der Designertyp) und weiß nicht wie ich das so hinbekomme ._.
Hat jemand eine Idee, wie ich das machen kann?
Falls ihr weitere Informationen braucht, gebt gern Bescheid
Der hier verwendete Code
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="/js_webseite/jquery.js"></script>
<style>
body{
background:lightgrey;
}
#infolinks {
display: flex;
text-align: center;
}
#infolinks a {
margin-left: 5vw;
margin-right: 5vw;
}
#infolinks a:hover {
color: red;
cursor: help;
}
#hintergrund{
margin: -10px;
padding: 10px;
display: none;
position: fixed;
top:0px;
left:0px;
height: 100vh;
width: 100vw;
background:black;
opacity: 0.8;
text-align:center;
z-index: 1000;
border:10px solid black;
}
#boxinfo {
position: fixed;
display: none;
height: 70vh;
width: 70vw;
top: 15vh;
left: 15vw;
text-align: center;
background:black;
border: 2px solid red;
color: white;
overflow: auto;
z-index:1001;
}
#boxinfo img{
width:100%;
height:auto;
}
#close {
display: block;
position:fixed;
top: 0px;
left: 0px;
width: 5vw;
height: 5vw;
Background: red;
color: white;
font-weight: 900;
font-size: 4vw;
z-index: 1002;
cursor: pointer;
}
#conti{
position:absolute;
top:25vh;
left:15vw;
text-align:center;
}
#conti img{
width:150px;
height:150px;
border:1px solid black;
border-radius:50%;
}
#conti video{
width:150px;
height:150px;
border:1px solid black;
border-radius:50%;
}
/* EOS */
</style>
</head>
<body>
<div id="hintergrund">
<div id="close">X</div>
</div>
<div id="boxinfo">
</div>
<div id="conti">
<img class="bild" src="/image//ppt2html5-video-1.gif">
<video class="video" controls>
<source src="/media/mov_bbb.mp4" type="video/mp4">
</video>
<img class="bild" src="/image/HTML5-Video-Download-Titelbild-rcm1200x627u.jpg">
</div>
<script>
$('.bild').click(function() {
src= $(this).attr('src');
$('#boxinfo').html("<img src="+src+">");
$('#hintergrund,#boxinfo').css('display', 'block');
$('#boxinfo').css('display', 'block');
})
$('.video').click(function() {
src= $('source').attr('src');
$('#boxinfo').html('<video controls> <source src="/media/mov_bbb.mp4" type="video/mp4">');
$('#hintergrund,#boxinfo').css('display', 'block');
$('#boxinfo').css('display', 'block');
})
$('#close').click(function() {
$('#hintergrund,#boxinfo').css('display', 'none');
$('#boxinfo').css('display', 'none');
})
</script>
</body>
</html>