當我將鼠標懸停在 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.