时间戳

首页 > 解决方案 > 将图像与文本块配对

html - 将图像与文本块配对

问题描述

.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

标签： htmlcss

解决方案

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

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

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

推荐阅读