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>

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

我的网站：www.maartjesmolders.com

Answer 1

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

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

＆＃13;

.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
 }

}

＆＃13;

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

＆＃13;

将图像削减为文本块

1 个答案: