使用HTML/CSS将文字定位在悬停的图像上

查看现有答案以及其他在线教程后，我仍然无法弄清悬停时如何在图像上放置文本。这里是形象会是什么样当光标悬停在图像上类似的例子：使用HTML/CSS将文字定位在悬停的图像上

Image with Hover Text 我当前的代码如下：

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

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

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

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

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

在当前状态下，当鼠标悬停在图像上时，文本完全不显示。我错过了什么？

来源

2017-05-26 gcccpp

的关键是不将元件定位“悬停” - 但它positiion你怎么想它，并显示它 - 悬停/或者与JavaScript的 - 或不透明度和CSS等

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

标记

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

个

风格

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

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

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

来源

2017-05-26 19:23:05 sheriffderek

悬停:) – Gerard

阿后面的文本应该变得可见。我会补充一点。 – sheriffderek

看起来不错！可以有背景图片而不是颜色吗？我尝试过用'background-image'替换'background'并使用你的解决方案，最终结果只是一个空白区域 – gcccpp

您可以使用z-index。

相对位置添加到父，然后创建用于图像和文本的div绝对位置和较高的z索引设置到顶部（文本）DIV

来源

2017-05-26 19:14:37

可以使用兄弟选择到TA rget你的文本元素（我也会将p和h4包装到块级元素中。

我不认为css可以在悬停节点上移动节点。

Is there a CSS parent selector?

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

来源

2017-05-26 19:30:37

使用HTML/CSS将文字定位在悬停的图像上

回答

相关问题