当我将鼠标悬停在 css 中的图像上时显示文本
[英]Making text appear when I hover over an image in css
问题描述
当我将鼠标悬停在每个图像上时，我试图让段落文本出现。 文本应位于图像的中心。 我不完全确定如何实现这一目标。
我遇到的另一个问题是，如果我设置 top: 0 并删除转换，文本实际上并不位于顶部：0，顶部和文本所在的位置之间有一些边距。
代码笔如下：
https://codepen.io/uhzyrneh/pen/WNvOaWB
* { padding: 0; margin: 0; } .container { display: grid; grid-template-columns: repeat(4, 25%); background-color: black; } .container div { position: relative; width: 100%; overflow: hidden; } .container div img { width: 100%; transition: 0.4s; transform: scale(1.1); opacity: 0.7; } .container div img:hover { transform: scale(1.03); opacity: 1; } .container div p { color: white; position: absolute; top: 0; left: 50%; font-size: 50px; opacity: 1; }
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="container"> <div class=""> <img id="pic1" src="https://images.unsplash.com/photo-1498837167922-ddd27525d352?ixlib=rb-1.2.1&w=1000&q=80"> <p>Test</p> </div> <div class=""> <img id="pic2" src="https://media.gettyimages.com/photos/different-types-of-food-on-rustic-wooden-table-picture-id861188910?s=612x612"> <p>Test2</p> </div> <div class=""> <img id="pic3" src="https://images.unsplash.com/photo-1498837167922-ddd27525d352?ixlib=rb-1.2.1&w=1000&q=80"> </div> <div class=""> <img id="pic4" src="https://media.gettyimages.com/photos/different-types-of-food-on-rustic-wooden-table-picture-id861188910?s=612x612"> </div> <div class=""> <img id="pic5" src="https://images.unsplash.com/photo-1498837167922-ddd27525d352?ixlib=rb-1.2.1&w=1000&q=80"> </div> <div class=""> <img id="pic6" src="https://media.gettyimages.com/photos/different-types-of-food-on-rustic-wooden-table-picture-id861188910?s=612x612"> </div> <div class=""> <img id="pic7" src="https://images.unsplash.com/photo-1498837167922-ddd27525d352?ixlib=rb-1.2.1&w=1000&q=80"> </div> <div class=""> <img id="pic8" src="https://media.gettyimages.com/photos/different-types-of-food-on-rustic-wooden-table-picture-id861188910?s=612x612"> </div> </div> </body> </html>
2 个解决方案
解决方案1
2 2020-03-03 00:12:29
您正在寻找的规则是：
.container div:hover p {
display: inline;
}
并通过添加display: none;来隐藏开始的文本display: none; 到.container div p 。
此外，文本位于 div 的顶部。 如果您突出显示它，您可以看到它正对着顶部。
* { padding: 0; margin: 0; } .container { display: grid; grid-template-columns: repeat(4, 25%); background-color: black; } .container div { position: relative; width: 100%; overflow: hidden; } .container div img { width: 100%; transition: 0.4s; transform: scale(1.1); opacity: 0.7; } .container div img:hover { transform: scale(1.03); opacity: 1; } .container div p { color: white; position: absolute; top: 0; left: 50%; font-size: 50px; opacity: 1; display: none; } .container div:hover p { display: inline; }
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="container"> <div class=""> <img id="pic1" src="https://images.unsplash.com/photo-1498837167922-ddd27525d352?ixlib=rb-1.2.1&w=1000&q=80"> <p>Test</p> </div> <div class=""> <img id="pic2" src="https://media.gettyimages.com/photos/different-types-of-food-on-rustic-wooden-table-picture-id861188910?s=612x612"> <p>Test2</p> </div> <div class=""> <img id="pic3" src="https://images.unsplash.com/photo-1498837167922-ddd27525d352?ixlib=rb-1.2.1&w=1000&q=80"> </div> <div class=""> <img id="pic4" src="https://media.gettyimages.com/photos/different-types-of-food-on-rustic-wooden-table-picture-id861188910?s=612x612"> </div> <div class=""> <img id="pic5" src="https://images.unsplash.com/photo-1498837167922-ddd27525d352?ixlib=rb-1.2.1&w=1000&q=80"> </div> <div class=""> <img id="pic6" src="https://media.gettyimages.com/photos/different-types-of-food-on-rustic-wooden-table-picture-id861188910?s=612x612"> </div> <div class=""> <img id="pic7" src="https://images.unsplash.com/photo-1498837167922-ddd27525d352?ixlib=rb-1.2.1&w=1000&q=80"> </div> <div class=""> <img id="pic8" src="https://media.gettyimages.com/photos/different-types-of-food-on-rustic-wooden-table-picture-id861188910?s=612x612"> </div> </div> </body> </html>
解决方案2
1 2020-03-03 00:30:39
你可以这样使用：
* { padding: 0; margin: 0; } .container { display: grid; grid-template-columns: repeat(4, 25%); background-color: black; } .container div { position: relative; width: 100%; overflow: hidden; } .container div img { width: 100%; transition: 0.4s; transform: scale(1.1); opacity: 0.7; } .container div img:hover { transform: scale(1.03); opacity: 1; } .container div p { color: #fff; position: absolute; top: 0; left: 50%; font-size: 50px; opacity: 1; } .container div a:hover::after{ content: attr(title); display:block; position:absolute; width:100%; height:200px; top:50px; left:0; z-index:1; opacity: 1; font-size: 50px; color:#fff; text-align:center; }
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="container"> <div class=""> <a href="#" title="Img Title 1"><img id="pic1" src="https://images.unsplash.com/photo-1498837167922-ddd27525d352?ixlib=rb-1.2.1&w=1000&q=80"></a> </div> <div class=""> <a href="#" title="Img Title 2"><img id="pic2" src="https://media.gettyimages.com/photos/different-types-of-food-on-rustic-wooden-table-picture-id861188910?s=612x612"></a> </div> <div class=""> <a href="#" title="Img Title 3"><img id="pic3" src="https://images.unsplash.com/photo-1498837167922-ddd27525d352?ixlib=rb-1.2.1&w=1000&q=80"></a> </div> <div class=""> <a href="#" title="Img Title 4"><img id="pic4" src="https://media.gettyimages.com/photos/different-types-of-food-on-rustic-wooden-table-picture-id861188910?s=612x612"></a> </div> <div class=""> <a href="#" title="Img Title 5"><img id="pic5" src="https://images.unsplash.com/photo-1498837167922-ddd27525d352?ixlib=rb-1.2.1&w=1000&q=80"></a> </div> <div class=""> <a href="#" title="Img Title 6"><img id="pic6" src="https://media.gettyimages.com/photos/different-types-of-food-on-rustic-wooden-table-picture-id861188910?s=612x612"></a> </div> <div class=""> <a href="#" title="Img Title 7"><img id="pic7" src="https://images.unsplash.com/photo-1498837167922-ddd27525d352?ixlib=rb-1.2.1&w=1000&q=80"></a> </div> <div class=""> <a href="#" title="Img Title 8"><img id="pic8" src="https://media.gettyimages.com/photos/different-types-of-food-on-rustic-wooden-table-picture-id861188910?s=612x612"></a> </div> </div> </body> </html>
将鼠标悬停在图像和影像的其余部分将出现，但其出CSS范围
[英]Hover over image and the rest of the image will appear but its out of css scope
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.