Dlaczego gdy kliknę na obrazek z boxa nie wyświetla się zawartość klasy .show? Co jest nie tak w kodzie jQuery?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>JavaScript</title>
</head>
<style>
* { margin: 10px; }
.content { width: auto; height: auto; padding: 10px; background: #D9D9D9; border: 1px #444 solid; }
.square { width: 250px; height: 250px; display: inline-block; }
.square img { max-width: 100%; border: 1px #444 solid; }
.square a:hover img { opacity: 0.9; }
/*Show image*/
.show { width: auto; height: auto; padding: 1px; border: 1px #777 solid; }
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function(){
$(".square a:hover img").click(function(){
$(".show").fadeToggle("slow");
});
});
</script>
<body>
<div class="content">
<div class="square">
<a href="#"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR0HAczCD0mZObxheRam07H5Lro1cx7O6-mfQKUNMuLcrRUhB73og"/></a>
</div>
</div>
</body>
</html>
Link do demo: https://jsfiddle.net/hadaa5re/
Pytanie drugie. Dlaczego gdy przybliżę tą stronę nawet w demo do 150% w chrome to box ze zdjęciem wychodzi poza content? Jak to naprawić?