如何在缩略图上添加标题？
[英]How do i add a title on top of a thumbnail?
问题描述
It's not my proudest moment to say that I am struggling with this since yesterday, I managed to make my gallery thumbnails look almost like the model in the picture that I uploaded, but I can't add the "image title" section.
从昨天开始我就一直在为此苦苦挣扎，这并不是我最自豪的时刻，我设法使我的画廊缩略图看起来几乎像我上传的图片中的 model，但我无法添加“图像标题”部分。 I managed at some point to put a title and the gray background, but when I hovered on it, only the image moved and not the title.我设法放置了一个标题和灰色背景，但是当我将鼠标悬停在它上面时，只有图像移动了，标题没有移动。 Please help me so I can get rid of this problem once and forever (Thank you for your time):请帮助我，这样我就可以永远摆脱这个问题（感谢您的宝贵时间）：
<head> <style>.container { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; background: rgb(255, 255, 255); padding: 15px; }.box > img { width: 80%; display: block; background-color: cornflowerblue; border-radius: 12%; }.container img:hover { transform: scale(1.04); } </style> </head> <body> <div class="container"> <div class="box"> <img src="placeholder-image.png"> <span>daa</span> </div> <div class="box"> <img src="placeholder-image.png"> <span>Image</span> </div> <div class="box"> <img src="placeholder-image.png"> <span>rrrr</span> </div> <div class="box"> <img src="placeholder-image.png"> <span>strike</span> </div> <div class="box"> <img src="placeholder-image.png"> <span>strike</span> </div> <div class="box"> <img src="placeholder-image.png"> <span>strike</span> </div> <div class="box"> <img src="placeholder-image.png"> <span>strike</span> </div> <div class="box"> <img src="placeholder-image.png"> <span>strike</span> </div> <div class="box"> <img src="placeholder-image.png"> <span>strike</span> </div> <div class="box"> <img src="placeholder-image.png"> <span>strike</span> </div> </div> </body>
1 个解决方案
解决方案1
2 已采纳 2021-03-17 01:28:57
If you want the hover styling to apply to the title text and the image, just use transform on the .box container hover state instead of only the image with .container img:hover . If you want the hover styling to apply to the title text and the image, just use transform on the .box container hover state instead of only the image with .container img:hover . This way both the <img> and the <span> text will "move as one" since they are both children of the .box parent container.这样<img>和<span>文本都将“作为一个整体移动”，因为它们都是.box父容器的子容器。 Try this out.试试这个。
.box { display: flex; flex-direction: column; align-items: center; width: 100%; }.box.title { background: #ddd; padding: .5rem 1rem; text-align: center; width: -webkit-fill-available; border-bottom-left-radius: .5rem; border-bottom-right-radius: .5rem; }
<style>.container { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; background: rgb(255, 255, 255); padding: 15px; } img { max-width: 100%; }.box > img { width: 100%; display: block; background-color: cornflowerblue; border-top-right-radius: 1rem; border-top-left-radius: 1rem; /* border-radius: 12%;*/ }.box:hover { transform: scale(1.04); } </style> </head> <body> <div class="container"> <div class="box"> <img src="https://static.thenounproject.com/png/17840-200.png" alt="some alt text"> <div class="title"> <span>Image Title</span> </div> </div> <div class="box"> <img src="https://static.thenounproject.com/png/17840-200.png" alt="some alt text"> <div class="title"> <span>Image Title</span> </div> </div> <div class="box"> <img src="https://static.thenounproject.com/png/17840-200.png" alt="some alt text"> <div class="title"> <span>Image Title</span> </div> </div> <div class="box"> <img src="https://static.thenounproject.com/png/17840-200.png" alt="some alt text"> <div class="title"> <span>Image Title</span> </div> </div> <div class="box"> <img src="https://static.thenounproject.com/png/17840-200.png" alt="some alt text"> <div class="title"> <span>Image Title</span> </div> </div> </div> </body>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.