将鼠标悬停在图像上时创建文本叠加
[英]Creating a text overlay when hovering over image
问题描述
I have these images in a simple responsive grid that I am trying to add an overlay for.
我将这些图像放在一个简单的响应式网格中，我正在尝试为其添加叠加层。 When I hover on an image, id like to have 3 or 4 lines that give a general description.当我将鼠标悬停在图像上时，id 喜欢有 3 或 4 行给出一般描述。 By default, the images show, and when I hover id like the text to appear ~ how might I do this?默认情况下，图像会显示，当我悬停 id 时喜欢显示文本〜我该怎么做？
Here is the current code that I have这是我拥有的当前代码
<div class="container">
<div class="product-item">
<a href="products.html"><img src="https://images.unsplash.com/photo-1587202372583-49330a15584d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60 " alt=" "></a>
</div>
<div class="product-item">
<a href="products.html"><img src="https://images.unsplash.com/photo-1555485086-b0d5d518b225?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60 " alt=" "></a>
</div>
<div class="product-item">
<a href="products.html"><img src="https://images.unsplash.com/photo-1555404910-2c3475578b36?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60 " alt=" "></a>
</div>
</div>
.home-body .container {
display: flex;
flex-wrap: wrap;
justify-content: center !important;
margin: 5em 0 0 0;
}
.home-body img {
margin: 5px;
transition: all 1s;
}
.home-body img:hover {
transform: scale(1.05);
transition-duration: .3s;
filter: grayscale(20%);
opacity: 90%;
cursor: pointer;
}
.product-item {
background-color: #212121;
margin: 5px;
}
And here is what I think I could do, but dont know how to implement it with html/css这是我认为我可以做的，但不知道如何用 html/css 实现它
<div class="container ">
<img src="img.jpg" alt=" ">
<div class="overlay-text">
<h3>Random Title</>
<p>Random description</p>
<p>Random description</p>
<p>Random description</p>
</div
</div>
2 个解决方案
解决方案1
1 2020-09-23 09:55:06
The simplest solution would be to:最简单的解决方案是：
Add 4 text tags which are used for the description you mentioned and assign a class to them.
添加用于您提到的描述的 4 个文本标签，并为它们分配一个类。Add
display: none;添加display: none;to the class.到班级。Add, for instance,
display: block;添加，例如， display: block;to:hoverof your class.:hover在你的班级上。
HTML: HTML：
<div class="container ">
<img src="img.jpg" alt=" ">
<div class="overlay-text">
<h3>Random Title</>
<p>Random description</p>
<p>Random description</p>
<p>Random description</p>
</div
</div>
CSS: CSS：
.overlay-text {
display: none;
}
.overlay-text:hover {
display: block;
}
Additionally:此外：
If you want your image to be the background of the div , then remove如果您希望图像成为div的背景，则删除
<img src="img.jpg" alt=" ">
from your HTML and add this to your overlay-text class in CSS:从您的 HTML 并将其添加到 CSS 中的overlay-text类：
background-image: url("img.jpg");
解决方案2
0 已采纳 2020-09-23 12:04:11
Is this what you are looking for.这是你想要的。
.home-body .container { display: flex; flex-wrap: wrap; justify-content: center !important; margin: 5em 0 0 0; } .home-body img { margin: 5px; transition: all 1s; } .home-body img:hover { transform: scale(1.05); transition-duration: .3s; filter: grayscale(20%); opacity: 90%; cursor: pointer; } .product-item { background-color: #212121; margin: 5px; position: relative; } .home-body a .hover-text { display: none; } .home-body a:hover .hover-text { display: block; position: absolute; text-align: center; color: #fff; left: 10%; top: 50%; } <body class="home-body"> <div class="container"> <div class="product-item"> <a href="products.html"><img src="https://images.unsplash.com/photo-1587202372583-49330a15584d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60 " alt=" "> <div class="hover-text"> <h3>Gaming PC</h3> <p>This is a gaming pc. This is a gaming pc. This is a gaming pc.</p> </div> </a> </div> <div class="product-item"> <a href="products.html"><img src="https://images.unsplash.com/photo-1555485086-b0d5d518b225?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60 " alt=" "> <div class="hover-text"> <h3>Gaming PC</h3> <p>This is a gaming pc. This is a gaming pc. This is a gaming pc.</p> </div> </a> </div> <div class="product-item"> <a href="products.html"><img src="https://images.unsplash.com/photo-1555404910-2c3475578b36?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60 " alt=" "> <div class="hover-text"> <h3>Gaming PC</h3> <p>This is a gaming pc. This is a gaming pc. This is a gaming pc.</p> </div> </a> </div> </div> </body>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.