Making text appear when I hover over an image in css
Question
I'm trying to make the paragraph texts appear when I hover over each of the images. The text should be in the center of the image. I'm not entirely sure how I can achieve this.
Another issue I have is that if I set top: 0 and remove the transform, the text isn't actually positioned at top: 0, there is some margin between the top and where the text is.
Codepen below:
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 answers
solution1
2 2020-03-03 00:12:29
The rule you're looking for is:
.container div:hover p {
display: inline;
}
And hide the text to begin with by adding display: none; to .container div p .
Also, the text is at the top of the div. If you highlight it, you can see it's right up against the top.
* { 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>
solution2
1 2020-03-03 00:30:39
You could use like this:
* { 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
making text fade in when I hover over an image or link
Making text appear when hovering over an image
How to make image appear upon hover over text using css?
Text appearing over image when it should only appear on hover
How to make text box appear when hover over on the image map?
Making text appear on hover
CSS hover text over image on hover
Hover over image making it transparent and showing text
make a button appear when hover over a image
Hover over image and the rest of the image will appear but its out of css scope
Related Tags