Thumbnails durch Zeigen vergrößern?
Hallo,
wäre es möglich, dass ein Besucher auf ein Tumb zeigt, (nicht klickt!), das nur in meinem CMS skaliert wurde, aber in der Originalgröße vorliegt, dieses Bild in meiner gewünschten Größe (vielleicht 250 px Höhe) zu sehen bekommt?
Ich zeige hier einen Ausschnitt einer langen Liste mit diesen Tumb.
In meinem CMS kann ich HTML und CSS einfügen.
Herzlichen Dank für eine Idee!
Der hier verwendete Code
<script src="/js_webseite/jquery.js"></script>
<style>
*{
margin:0;
padding:0;
}
.media{
display:flex;
border:3px solid grey;
margin:10px 0;
padding:5px;
}
.media img{
height:60px;
margin:0 10px;
}
.media img:hover{
transition:all;
width:50%;
height:auto;
position:absolute;
background:rgba(0,0,0,0.7);
padding:0 25%;
}
#big{
height:100vh;
width:100vw;
display:none;
position:fixed;
left:0;
top:0;
}
#big img{
height:100%;
width:100%;
}
</style>
<div id="aus"></div>
<div id="big"></div>
<script>
for(a=0;a<=10;a++){
document.getElementById('aus').innerHTML+='<div class="media"> <img class="media__image" src="/image/400x300.png" alt=""><div class="media__body"> <p>Lorem ipsum dolor sit amet, <a href="/mylink">consectetur adipisicing</a> elit. Nesciunt laboriosam voluptatem necessitatibus cum, tenetur repellat, eaque eos debitis! Quaerat.</p> </div></div>';
}
$('img').click(function(){
lin=$(this).attr('src')
neu=lin.replace('400/300','1200/800');
$('#big').html('<img src="'+neu+'">');
$('#big').css('display','block');
})
$('#big').click(function(){
$('#big').css('display','none');
})
</script>