html - 将图像与文本 block 配对

Question

.Spotify:hover img { display:block;
     position: absolute;
     z-index: 0;
     top:17%;
     left: 14%;
     width: 45%;
    height: auto;
	}

<a class="Spotify" href="Spotify" rel="history"><img src="https://files.cargocollective.com/c160628/MS_Spotify.png">Spotify</a> 

当您将鼠标悬停在我主页上的文本 block 上时，会出现一个选定的案例研究图像。每个单词/图像都有一段独特的代码。一切正常，直到您调整网站大小或查看移动版本并且图像和文字不再对齐。是否有一段代码可以使它响应？因此图像始终与选定的文本 block 保持一致。 (最好图像保持在单词下方右对齐)

我的网站:www.maartjesmolders.com

Answer 1

全屏运行下面的代码片段，然后切换到移动模式。

基本上，我通过媒体查询查询在移动模式下为图像提供全宽

.Spotify:hover img {
  display: block;
  position: absolute;
  z-index: 0;
  top: 17%;
  left: 14%;
  width: 45%;
  height: auto;
}

img{
display:none;
}

@media(max-width:768px){/*You can change this to any number lesser than this*/
 
 a{
  display:block;
  position:relative;
  
 }
.Spotify:hover img{
  top:120px; /*height of the text on your website*/
  left:auto;
  right:auto;
  bottom:auto;
  width:100%;
  height:auto
 }

}

<a class="Spotify" href="Spotify" rel="history">
  <img src="https://files.cargocollective.com/c160628/MS_Spotify.png"/>Spotify
 </a>