|
@@ -14,7 +14,7 @@ require('functions.php');
|
|
|
|
|
|
|
|
<style>
|
|
<style>
|
|
|
|
|
|
|
|
- .col-sm-3 > a > img {
|
|
|
|
|
|
|
+ .col-sm-3 > div > a > img {
|
|
|
width: 100%;
|
|
width: 100%;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
@@ -22,6 +22,26 @@ require('functions.php');
|
|
|
padding-bottom: 15px;
|
|
padding-bottom: 15px;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
+ .image-zoom {
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .image-zoom img {
|
|
|
|
|
+ -webkit-transition: all 1s ease; /* Safari and Chrome */
|
|
|
|
|
+ -moz-transition: all 1s ease; /* Firefox */
|
|
|
|
|
+ -ms-transition: all 1s ease; /* IE 9 */
|
|
|
|
|
+ -o-transition: all 1s ease; /* Opera */
|
|
|
|
|
+ transition: all 1s ease;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .image-zoom:hover img {
|
|
|
|
|
+ -webkit-transform:scale(1.15); /* Safari and Chrome */
|
|
|
|
|
+ -moz-transform:scale(1.15); /* Firefox */
|
|
|
|
|
+ -ms-transform:scale(1.15); /* IE 9 */
|
|
|
|
|
+ -o-transform:scale(1.15); /* Opera */
|
|
|
|
|
+ transform:scale(1.15);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
</style>
|
|
</style>
|
|
|
</head>
|
|
</head>
|
|
|
<body>
|
|
<body>
|
|
@@ -47,9 +67,9 @@ require('functions.php');
|
|
|
|
|
|
|
|
echo "<div class=\"row\">";
|
|
echo "<div class=\"row\">";
|
|
|
foreach($list as $object) {
|
|
foreach($list as $object) {
|
|
|
- echo "<div class=\"col-sm-3\">";
|
|
|
|
|
|
|
+ echo "<div class=\"col-sm-3\"><div class=\"image-zoom\">";
|
|
|
echo "<a href=\"?path=" . $path . "/" . $object . "\">" . "<img src=\"" . getImageByName($object) . "\" alt=\"" . $object . "\">" . "</a><br>";
|
|
echo "<a href=\"?path=" . $path . "/" . $object . "\">" . "<img src=\"" . getImageByName($object) . "\" alt=\"" . $object . "\">" . "</a><br>";
|
|
|
- echo "</div>";
|
|
|
|
|
|
|
+ echo "</div></div>";
|
|
|
}
|
|
}
|
|
|
echo "</div>";
|
|
echo "</div>";
|
|
|
}
|
|
}
|
