如何放大图像与翻转到另一个位置？

Question

您好我想创建一个图片库，其中图片重新定位并在翻转后调整大小。我不确定我是否必须使用javascript或只是css足够。我尝试了jQuery，但我无法将每个img与翻转图像相匹配。我还想过如果我可以在php脚本中为每张图片赋予不同的id，那么之后我可以使用这些id-s匹配jquery中的rollovered图像。下面是带有解释的照片：

这个php脚本生成了库：

  function showGallery()
{
$id = 0;
$size ='';
$galleryHTML = "<ul>";
$images = new DirectoryIterator("pildid");

foreach($images as $image) {

$file = $image -> current();
$filename = $file -> getFilename();
$src = "pildid/$filename";
$info = new Finfo( FILEINFO_MIME_TYPE );
$type = $info->file($src);
$galleryhtml = "";  
if($type ==="image/jpeg" )

    $galleryhtml ="<li><img src='$src' id='' height='100px' width='120px'/></li>";
    echo $galleryhtml;


}
 $galleryhtml = "</ul>";
 include_once('view/galerii.php');


}

Answer 1

您需要使用javaScript来完成此任务。

这是一个jsFiddle，它会显示鼠标悬停的图像。

http://jsfiddle.net/Qtu9N/2/

<style>
.preview-image {
    height: 100px;
    width: 100px;
}
#feature-image {
    height: 500px;
    width: 500px;
}
</style>


<div>
    <img class="preview-image" src="http://i1.cdnds.net/13/24/618x497/gaming-pokemon-x-and-y-artwork-3.jpg">
    <img class="preview-image" src="https://images-na.ssl-images-amazon.com/images/G/01/videogames/detail-page/pokemon.blk-wte.oshawatt.lg.jpg">
</div>
<div>
    <img id="feature-image">
</div>

<script>
$('.preview-image').on('mouseover', function (e) {
    var featureSource = e.target.src;
    //possibly transform the link here
    //your preview images should be lower quality
    //and the big image should be higher quality
    $('#feature-image').attr('src', featureSource);
});
</script>