正文 

当前位置： 首页 > 源码 >

如何使用 CSS 使文本出现在悬停时的图像顶部

     2023-05-08     165

关键词：

【中文标题】如何使用 CSS 使文本出现在悬停时的图像顶部【英文标题】：How to Get Text To Appear On Top of Image On Hover With CSS 【发布时间】：2017-11-28 03:48:22 【问题描述】：

目前，当您将鼠标悬停在图像上时，不透明度会变浅：

https://jsfiddle.net/vo1npqdx/1268/

这是正确的，但现在我还希望一些链接文本也出现在图像顶部。我尝试遵循此示例中的解决方案：

How to show text on image when hovering?

但是当我尝试这种技术时，图像下方会出现空白区域，文本不会显示在顶部，并且它不在图像的中心：

https://jsfiddle.net/vo1npqdx/1269/

我似乎无法弄清楚如何使段落文本出现在框阴影顶部并使用 CSS 居中 - 有什么建议吗？如果不是，那么如何使用 JavaScript 来完成呢？谢谢。

HTML：

<div class="row thumbnail-row">
<div class="my-work-image" id="margin-left-image">
    <img class="thumbnail-image" src="/wp-content/themes/gatewaywebdesign/assets/images/hamburger-thumbnail.jpg"/>        
    <p class="initial-hidden">The Hamburger Collection</p>
</div>
<div class="my-work-image">
    <img class="thumbnail-image" src="/wp-content/themes/gatewaywebdesign/assets/images/yoyomoi-thumbnail.jpg"/>   
</div>
<div class="my-work-image"> 
    <img class="thumbnail-image" src="/wp-content/themes/gatewaywebdesign/assets/images/dogs-thumbnail.jpg"/>
</div>
<div class="my-work-image">
    <img class="thumbnail-image" src="/wp-content/themes/gatewaywebdesign/assets/images/gateway-thumbnail.jpg"/>
</div>
<div class="my-work-image">
    <img class="thumbnail-image" src="/wp-content/themes/gatewaywebdesign/assets/images/chameleon-thumbnail.jpg"/>
</div>
<div class="my-work-image">
    <img class="thumbnail-image" src="/wp-content/themes/gatewaywebdesign/assets/images/adrienne-thumbnail.jpg"/>
</div>
<div class="my-work-image">
    <img class="thumbnail-image" src="/wp-content/themes/gatewaywebdesign/assets/images/castaway-thumbnail.jpg"/>
</div>
</div><!--end row-->

CSS：

.thumbnail-row 
display: flex;

.thumbnail-row div 
position: relative;

.thumbnail-row div::after 
content: '';
position: absolute;
top: 0; left: 0; 
width: 100%;
height: 100%;  
box-shadow: inset 0 0 0 3000px rgba(27,61,88,.5);

.thumbnail-image 
display: inline-block;
max-width: 100%;


.my-work-image:hover 
opacity: 0.5;
  

/*hidden text*/

.initial-hidden 
visibility: hidden;
text-align: center;
display: inline;


.my-work-image:hover .initial-hidden 
visibility: visible;
opacity: 1;


@media (max-width: 425px) 
.thumbnail-row 
flex-direction: column;

【问题讨论】：

【参考方案1】：

更改了一些 display 属性。

此外，如果您希望文本仅显示在图像的一半中，请更改 .img__description_layer 类中的 left: 50%;。

如果您希望text 位于图像的中心，只需删除 css 类 .thumbnail-row div::after

.thumbnail-row 
  display: flex;


.thumbnail-row div::after   /*remove this class to display the text in center of the image*/
  content: '';
  position: relative;
  top: 0; left: 0; 
  width: 100%;
  height: 100%;  
  box-shadow: inset 0 0 0 3000px rgba(27,61,88,.5);

.thumbnail-image 
  display: inline-block;
  width: 100%;
  
  
.my-work-image
  position:relative;
  

.img__description_layer 
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;    /*change it to 50%, if you want the text only shows in the half part */
  right: 0;
  background: rgba(36, 62, 206, 0.6);
  color: #fff;
  visibility: hidden;
  opacity: 0;
  display: flex;
  align-items: center;

  text-align:center;
  /* transition effect. not necessary */
  transition: opacity .2s, visibility .2s;


.my-work-image:hover .img__description_layer 
  visibility: visible;
  opacity: 1;


.img__description 
  transition: .2s;
  transform: translateY(1em);


.my-work-image:hover .img__description 
  transform: translateY(0);

  
@media (max-width: 425px) 
  .thumbnail-row 
    flex-direction: column;
  

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">

  <div class="row thumbnail-row">
    <div class="my-work-image" id="margin-left-image">
      <img class="thumbnail-image" src="http://i.imgur.com/mNoKbYK.jpg" />
        <div class="img__description_layer">
          <span class="img__description">This image 1 looks super neat.</span>
        </div>
    </div>
    
    <div class="my-work-image">
      <img class="thumbnail-image" src="http://i.imgur.com/8b2sb03.jpg" />
       <div class="img__description_layer">
          <span class="img__description">This image 2 looks super neat.</span>
        </div>
    </div>
    <div class="my-work-image">
      <img class="thumbnail-image" src="http://i.imgur.com/Ac11pRH.jpg" />
       <div class="img__description_layer">
          <span class="img__description">This image 3 looks super neat.</span>
        </div>
    </div>
   
  </div>
  <!--end row-->
</div>

【讨论】：

@HappyHands31 我检查了这些图像，但那里没有这样的&lt;div class="img__description_layer"&gt; &lt;span class="img__description"&gt;This image 1 looks super neat.&lt;/span&gt; &lt;/div&gt; 代码。请添加这些，以便我可以尝试一些东西。另外，您是否添加了一些新的 CSS 类，就像我的回答一样。 抱歉，我改回来了。让我再次进行更改。 实际上您的代码现在正在运行，我会继续为您提供答案 - 不幸的是，我正试图让“我的工作”在其单独的行中的所有图像之上。试图修复这个看起来像线框：i.imgur.com/wrQeuvj.jpg EDIT - 想通了 - 现在我刚刚失去了最初的覆盖/框阴影。另外，如何将文本水平居中？ 要居中对齐文本，请在文本的父 div 中使用 text-align:center。【参考方案2】：

这是我的建议：

/* fade out only the image, not the entire thing */
.my-work-image:hover img 
    opacity: 0.5;
  

.initial-hidden 
    visibility: hidden;
    text-align: center;
    display: inline;
    line-height:1em;

    /* use css transform to center vertically and horizontally */
    -webkit-transform:translate(-50%,-50%);
    -moz-transform:translate(-50%,-50%);
    -ms-transform:translate(-50%,-50%);
    transform:translate(-50%,-50%);
    position:absolute; top:50%; left:50%;
    color:#FFFFFF;
    z-index:2;

https://jsfiddle.net/vo1npqdx/1272/

【讨论】：

Pawan Kumar 的回答更完整。你忘了给 .my-work-image position: relative;这对于它的工作至关重要。【参考方案3】：

转场、背景、文字颜色等当然可以改变。

我建议将filter: blur(2px) 添加到图像悬停 (.hoverable:hover img ) 以使其看起来更漂亮。只需确保将其与过渡匹配即可。

我使用 flex 使文本居中，并在 &lt;p&gt; 元素上使用负定位以消除底部奇怪的空白。

编辑：我还修复了底部的奇数空间，没有破解。只需将vertical-align: bottom; 添加到图像即可。

也可以更改父级 (.hoverable) 的显示类型而不会导致问题。

这里有一个 JSFiddle，还有更多示例：https://jsfiddle.net/spikespaz/p4ogwee2/

.hoverable 
  position: relative;
  width: 400px;
  overflow: hidden;


.hoverable img 
  max-width: 100%;
  max-height: 100%;
  vertical-align: bottom;


.hoverable p 
  position: absolute;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  transition: opacity 500ms;
  font-size: 20px;
  background: rgba(0, 0, 0, 0.5)


.hoverable:hover p 
  opacity: 1;

<div class="hoverable">
  <img src="https://static.pexels.com/photos/39811/pexels-photo-39811.jpeg" >
  <p>This text will be shown on hover.</p>
</div>

【讨论】：

使图像出现在链接悬停css上

...vercss【发布时间】：2013-10-1617:27:17【问题描述】：我正在使用这个可能很简单的解决方案，但我在***或与此特定问题相关的互联网上找不到任何帮助。我有一个菜单，我想让图片显示在链接下方或当您将鼠标悬停在其附近时。我... 查看详情

当我将鼠标悬停在另一个 div 上时，如何使文本出现在一个 div 中？

】当我将鼠标悬停在另一个div上时，如何使文本出现在一个div中？【英文标题】：HowdoImaketextappearinadivwhenIhoveroveranother?【发布时间】：2021-02-0313:38:15【问题描述】：我已经为我的网站创建了一个主页，其中包含所有方面的概述。... 查看详情

如何使文本出现在html中的滚动条上

】如何使文本出现在html中的滚动条上【英文标题】：Howtomaketextappearonscrollinhtml【发布时间】：2013-12-1622:28:58【问题描述】：您好，我希望在滚动过去或滚动到文本所在位置时显示某个文本。出现时的效果应该有点像网站顶部的... 查看详情

仅当我将鼠标悬停在其上时如何使图像出现

】仅当我将鼠标悬停在其上时如何使图像出现【英文标题】：HowtomakeimageappearonlywhenIhoveronit【发布时间】：2020-02-0810:31:23【问题描述】：我希望我的图像仅在我将鼠标悬停时出现，我尝试将它放在样式部分但它不起作用。这段代... 查看详情

如何使图像在悬停css上旋转

】如何使图像在悬停css上旋转【英文标题】：Howtomakeimagerotateonhovercss【发布时间】：2017-06-2614:05:35【问题描述】：我想让页面页脚上的社交媒体图标在悬停时旋转。我在每个社交媒体图标上放置了一个标签包装器和单独的标签。... 查看详情

Html和CSS如何使具有悬停效果的图像成为超链接

】Html和CSS如何使具有悬停效果的图像成为超链接【英文标题】：HtmlandCSShowtomakeimagewithhovereffectahyperlink【发布时间】：2021-07-1901:58:35【问题描述】：嗨，我对编程很陌生，我对html有基本的了解，对CSS有更基本的了解。我一直在尝... 查看详情

如何使图像悬停在css中？

】如何使图像悬停在css中？【英文标题】：Howtomakeimagehoverincss?【发布时间】：2012-04-2911:11:17【问题描述】：我想在悬停时将图像从正常更改为更亮，我的代码：<divclass="nkhome"><ahref="Home.html"><imgsrc="Images/btnhome.png"/><... 查看详情

如何在悬停时同时更改图像边框和文本？

】如何在悬停时同时更改图像边框和文本？【英文标题】：Howtochangeimageborderandtextsimultaneouslyonhover?【发布时间】：2021-12-0210:52:38【问题描述】：我正在构建一个Netflix克隆，只是作为一个个人项目。在悬停时的Netflix个人资料部分... 查看详情

Tailwind CSS：在图像悬停时显示文本

...extonimagehover【发布时间】：2021-05-0103:54:16【问题描述】：如何使用TailwindCSS在图像悬停时显示文本：在图像悬停时显示文本？这是我的头像？我希望在用户悬停图像时显示文本“哺乳动物”？<imgsrc="/img/cat/categories/mammals.png"class... 查看详情

如何使悬停信息气泡出现在 WPF 中的鼠标悬停上？

】如何使悬停信息气泡出现在WPF中的鼠标悬停上？【英文标题】：HowcanImakeahoverinfobubbleappearonmouseoverinWPF?【发布时间】：2010-12-2222:39:48【问题描述】：我想让文本气泡在鼠标悬停在TextBlock上时出现。以下代码是我能得到的最接近... 查看详情

如何使用 SVG 更改悬停时的图像源？

】如何使用SVG更改悬停时的图像源？【英文标题】：HowtochangeanimagesourceonhoverwithSVGs?【发布时间】：2019-10-3016:31:51【问题描述】：我已将sm图像划分为五个不同的三角形。我正在尝试在悬停时更改图像的src属性值，并在中心正方形... 查看详情

悬停时的jquery图像预览-如何设置固定位置？

】悬停时的jquery图像预览-如何设置固定位置？【英文标题】：jqueryimagepreviewonhover-howtosetfixedposition?【发布时间】：2012-09-2622:25:58【问题描述】：请参考here。无论我翻转什么图像缩略图，我都希望图像预览/工具提示位于相同的位... 查看详情

当您使用 javascript 或 jquery 将鼠标悬停时，如何使图像或按钮发光？

】当您使用javascript或jquery将鼠标悬停时，如何使图像或按钮发光？【英文标题】：Howdoyoumakeanimageorbuttonglowwhenyoumouseoverusingjavascriptorjquery?【发布时间】：2011-09-0804:50:10【问题描述】：我想在鼠标悬停在按钮或图像上时添加发光效... 查看详情

如何在 twitter 引导下拉菜单中使用悬停图像

】如何在twitter引导下拉菜单中使用悬停图像【英文标题】：howtousehoverimageswithtwitterbootstrapdropdownmenus【发布时间】：2012-05-0323:32:30【问题描述】：使用twitter引导程序。在该站点上，我有一个顶部导航栏，其中包含一些具有dd菜单... 查看详情

如何通过将鼠标悬停在同一页面上的图像上来触发 CSS 动画按钮

】如何通过将鼠标悬停在同一页面上的图像上来触发CSS动画按钮【英文标题】：Howtotriggeracssanimatedbuttonbyhoveringoveranimageonthesamepage【发布时间】：2013-08-2501:17:58【问题描述】：我的网站出现问题。在主页上，我有一张图片。图片... 查看详情

如何在材质 ui 卡中悬停时更改文本颜色？我想更改卡片悬停时的文本颜色而不是悬停在文本上？

】如何在材质ui卡中悬停时更改文本颜色？我想更改卡片悬停时的文本颜色而不是悬停在文本上？【英文标题】：howtochangetextcoloronhoverinamatrerialuicard?iwanttochangetextcoloronhoverofcardinsteadofhoverontext?【发布时间】：2021-09-1019:15:23【问题... 查看详情

悬停时的 CSS 变换和框阴影

...形前的盒子上时，变形后的卡片和阴影之间有空白。我该如何解决这个问题？constCardStyle=styled(Card)`background:red;tra 查看详情

CSS如何使文本像图像一样缩放

】CSS如何使文本像图像一样缩放【英文标题】：CSSHowtomaketexttoscalelikeanimage【发布时间】：2017-02-0115:28:45【问题描述】：我无法弄清楚如何在调整大小时使文本表现得像图像。当我调整浏览器的大小时，文本保持与开始时一样大... 查看详情