tumblrのレイアウトでcssとhtmlを使用してイメージをクリック可能なリンクにします

Question

Tumblrレイアウトの背景をimageclickableにしようとしていますが、何らかの理由でそれをしていません。すべてが表示されますが、写真はクリックできません。ここで

HTML

<div class="image-swap-auto"> 
    <a id="auto-link" href="http://steamologist.com/auto_detailing"></a> 
</div> 

CSS

.image-swap-auto { 
    position: relative; 
    background-image: url(http://i174.photobucket.com/albums/w101/shakadoodoo/steamology_services_table_auto_long_zpslpwwv17n.jpg); 
    background-repeat: no-repeat; 
    display:block; 
    height: 210px; 
    width: 210px; 
} 

#auto-link { 
    position: absolute; 
    width: 210px; 
    height: 210px; 
    background-color: transparent; 
} 

.image-swap-auto:hover { 
background-position: 0 100%; 
} 

は私が修正しようとしているWebページのURLです.....

http://steamologist.com/auto_detailing

Answer 1

はSOへようこそ。

a nchorにdivと入力してください。

.image-swap-auto { 
 
    background-image: url(http://i174.photobucket.com/albums/w101/shakadoodoo/steamology_services_table_auto_long_zpslpwwv17n.jpg); 
 
    background-repeat: no-repeat; 
 
    display:block; 
 
    height: 210px; 
 
    width: 210px; 
 
} 
 

 
#auto-link { 
 
} 
 

 
.image-swap-auto:hover { 
 
    background-position: 0 100%; 
 
}

<a id="auto-link" href="http://steamologist.com/auto_detailing"> 
 
    <div class="image-swap-auto"></div> 
 
</a>

それとも、いじくり回すしたい場合は、ここでは関係Codepen

は、この情報がお役に立てば幸い素晴らしい週末を持っているのです！

Answer 2

あなたはそれがDIVクリックできないだろうと、アンカータグで画像を配置する必要があります。

<div> 
    <a id="auto-link" href="http://steamologist.com/auto_detailing"> 
    <span class="image-swap-auto"> 
    </span> 
    </a> 
</div>