ホバー方向認識の画像プレビュー？

Question

私はいくつかの助けが必要です:)

ポートフォリオタイトルの上にマウスを置くと画像プレビューでポートフォリオウェブサイトで作業します。ページの最下部にあるいくつかのタイトルの上にマウスを置くと、醜いグリッチ/バウンスがあります。イメージがウェブページの境界から脱出します。それが方向認識をする方法はありますか？最後のいくつかのタイトルの上にマウスを置くと、画像のプレビューが下の代わりにタイトルの上に表示されます。

HTML：

<ul class="project-list"> 
    <li> 
     <a href="" rel="https://dummyimage.com/600x400/000/fff" class="preview" title="" target="_self">Title Here</a> 
    </li> 
</ul> 

CSS：

#preview { 
    position: absolute; 
    display: none; 
    max-width: 50rem; 
    height: auto; 
} 

JS：ここ

$(document).ready(function(){ 
    imagePreview(); 
}); 

// Configuration of the x and y offsets 
this.imagePreview = function(){ 
     xOffset = -30; 
     yOffset = 40; 

    var imgHeight = 0; 
    var distFromTop = 0; 
    var mainImgTop = $(".preview").position(); 

    $(".preview").hover(function(e){ 
     this.t = this.title; 
     this.title = ""; 

     var c = (this.t != "") ? "<br/>" + this.t : ""; 
     $("body").append("<p id='preview'><img style='display:block;' src='"+ this.rel +"' alt='Image prev' />"); 

     $("#preview") 
     .css("top",(e.pageY - xOffset) + "px") 
     .css("left",(e.pageX + yOffset) + "px") 
     .fadeIn("slow"); 
    }, 

    function(){ 
     this.title = this.t; 
     $("#preview").remove(); 
    }); 

    $(".preview").mousemove(function(e){ 
     $("#preview") 
      .css("top",(e.pageY - xOffset) + "px") 
      .css("left",(e.pageX + yOffset) + "px"); 
    }); 
}; 

がJSFiddleです：https://jsfiddle.net/spacebot/b7h46cfh/

Answer 1

あなただけ表示したい場合は上の画像最後のXのタイトル数は、nth-last-child（-n + X）（Xはタイトル数）を使用できます。

タイトルが最後のタイトルの1つであることを確認し、上記の画像を表示する別のアニメーションを実行します。

//If link is one of the last 3 childs, open above 
if($(this).is(':nth-last-child(-n+3)')){ 
    openAbove(); 
} 

JSFiddle例：

https://jsfiddle.net/447pjobL/8/