使用HTML / CSS将文字定位在悬停的图像上 [英] Position text over image on hover using HTML/CSS

问题描述

在查看现有答案以及其他在线教程后，我仍然无法弄清悬停时如何在图片上放置文本。下面是一个当光标悬停在图像上时图像看起来像什么的例子：

我现在的代码如下：

  .project {display：flex; flex-direction：列; justify-content：center; align-items：center;}。项目img {margin-top：3em;宽度：27em;身高：25em; position：relative;}。project img：hover .project p，.project img：hover .project h4 {opacity：1;}。project p，.project h4 {background：rgba（0,0,0,0.5）;白颜色;身高：25em;宽度：27em;位置：绝对; top：0;左：0; opacity：0;}  

< div id =project_section > < div class =container> < div class =row> < H2>项目< / H2> < div class =col-sm-6 project> < img src =https://www.planwallpaper.com/static/images/desktop-year-of-the-tiger-images-wallpaper.jpgalt => < H4>名称< / H4> < p>在此处放置一些信息...< / p> < / DIV> < div class =col-sm-6 project> < img src =https://cdn.pixabay.com/photo/2016/03/28/12/35/cat-1285634_960_720.pngalt => < H4> Namep< / H4> < p>在此处放置一些信息...< / p> < / DIV> < / DIV> < / DIV> < / div>

在当前状态下，当悬停在图像上时根本不出现。我错过了什么？

解决方案

关键不在于定位元素'悬停' - 而是要确定它的方式它，并显示它 - 在悬停/无论是JavaScript - 或不透明和CSS等。

https://jsfiddle.net/sheriffderek/grkaw0o3/



markup p>

 < div class =parent> 
< div class =child> 
< span>东西< / span> 
< / div> 
< / div> 
  

style

  .parent {
 position：relative; / *为绝对定位的孩子定义上下文* / 
 width：200px; 
 height：200px; 
背景：红色; 
} 
 
 .child {
 position：absolute; / *基于最近相对祖先创建的boundery的位置* / 
 top：50％; 
剩下：50％; 
 transform：translate（-50％，-50％）; 
背景：白色; 
} 
  

现在悬停...（相同的标记）

https://jsfiddle.net/sheriffderek/ykpacq59/

  .parent {
位置：相对; / *为绝对定位的孩子定义上下文* / 
 width：200px; 
 height：200px; 
背景：红色; 
} 
 
 .parent：after {
 content：''; / *：之后必须有内容...但你不想要一个* / 
 
 position：absolute; 
 top：0; 
 right：0; 
 bottom：0; 
剩下：0; 
宽度：100％; 
身高：100％; 
 
 background：rgba（0,0,0,0）; 
 
过渡：1s; 
} 
 
 .parent：hover：after {
 background：rgba（0,0,0，.5）; 
} 
 
 .parent：hover .child {
 opacity：1; 
} 
 
 .child {
 position：absolute; 
 top：50％; 
剩下：50％; 
 transform：translate（-50％，-50％）; 
 
 z-index：5; / *仅在定义位置时起作用* / 
 / *想象一叠纸......此元素现在比底部高5 * / 
 
颜色：白色; 
 
不透明度：0; 
转换：.5s; 
} 
  

After looking at existing answers, as well as other online tutorials, I still can't figure out how to position text over an image upon hover. Here is an example of what the image would look like when the cursor hovers over the image:

My current code is as follows:

.project {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.project img {
	margin-top: 3em;
	width: 27em;
	height: 25em;
	position: relative;
}

.project img:hover .project p, .project img:hover .project h4 {
	opacity: 1;
}

.project p, .project h4 {
	background: rgba(0,0,0,0.5);
	color: white;
	height: 25em;
	width: 27em;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
}

    <div id="project_section">
		<div class="container">
			<div class="row">
				<h2>PROJECTS</h2>
		
				<div class="col-sm-6 project">
					<img src="https://www.planwallpaper.com/static/images/desktop-year-of-the-tiger-images-wallpaper.jpg" alt="">
					<h4>Name</h4>
					<p>Put some information here...</p>
				</div>
			
				<div class="col-sm-6 project">
					<img src="https://cdn.pixabay.com/photo/2016/03/28/12/35/cat-1285634_960_720.png" alt="">
					<h4>Namep</h4>
					<p>Put some information here...</p>
				</div>
			</div>
		</div>
	</div>

In its current state, the text does not appear at all when hovering over the image. What am I missing?

解决方案

The key is not to position the element 'on hover' - but to positiion it how you want it, and display it - on hover / either with JavaScript - or opacity and CSS etc.

https://jsfiddle.net/sheriffderek/grkaw0o3/

markup

<div class="parent">
  <div class="child">
    <span>stuff</span>
  </div>
</div>

styles

.parent {
  position: relative; /* define context for absolutly positioned children */
  width: 200px;
  height: 200px;
  background: red;
}

.child {
  position: absolute; /* position based on boundery created by nearest relative ancestor */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
}

Now with hover... (same markup)

https://jsfiddle.net/sheriffderek/ykpacq59/

.parent {
  position: relative; /* define context for absolutly positioned children */
  width: 200px;
  height: 200px;
  background: red;
}

.parent:after {
  content: ''; /* :after has to have a content... but you don't want one */

  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background: rgba(0,0,0,0);

  transition: 1s;
}

.parent:hover:after {
  background: rgba(0,0,0,.5); 
}

.parent:hover .child {
  opacity: 1;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  z-index: 5; /* only works when position is defined */ 
  /* think of a stack of paper... this element is now 5 higher than the bottom */

  color: white;

  opacity: 0;
  transition: .5s;
}

这篇关于使用HTML / CSS将文字定位在悬停的图像上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！