I want to display text on the image when a mouser hovers over it (without using JS), I've tried playing around with the html/css and had a look on stackoverflow, still cant find a way to implement this feature. Anyone have an idea? Once again thanks for the help.
The fact there is already text (h2) beneath the image is confusing me, I tried to use this method (Text on image mouseover?) and failed.
HTML
<ul class="portfolio">
<li class="project option-1">
<div class="project-image">
<a href="default.asp"><img src="http://lorempixel.com/400/400/sports/1/" alt="Sports Image"/>
</div>
<div class="project-info">
<h2 class="project-info-title">Cricket Journey</h2>
</a>
</div>
</li>
If I understand correctly, you want text to display over an image when the image is hovered over. If so, then display the <p>
(which is right after the image) when the image is hovered over as follow:
p {
/* position the text */
position: absolute;
left: 0px;
display: none;
width: 300px;
text-align: center;
margin: 0;
height: 20px;
top: 140px;
}
img {
position: absolute;
left: 0;
top: 0;
}
img:hover + p {
display: block;
}
<img src="/favicon.ico" height="300">
<p>some text to display here</p>
EDIT: Centered text