Display Text on Photo When Hovered
If you want to show some text when you hover a single photo, you can use this. Just add a HTML/CSS box to your page and add the following code. You'll have to edit the URL, image etc.
HTML
<div class="content-wrapper">
<figure>
<a href="Your-Link-URL-Here">
<img src="Your-Picture-Here" alt="Text Here" width="" height="" />
<figcaption>Here is Some Text on Hover</figcaption>
</a>
</figure>
</div>
CSS
/**
* Change Text on Hover
************************************************/
.content-wrapper {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
figure {
position: relative;
margin: 0 1rem 2rem;
padding: 1rem;
border: 1px solid #e3e3e3;
background: #f7f7f7;
}
figcaption {
position: absolute;
top: 50%;
left: 50%;
transform: translate( -50%, -50% );
font-size: 2rem;
text-transform: uppercase;
letter-spacing: .5rem;
color: #fff;
width: 100%;
text-align: center;
padding: 1rem 0;
background: rgba( 0, 0, 0, .8 );
opacity: 0;
transition: all .4s ease-in-out;
}
figure:hover a figcaption {opacity: 1;}
/* Change Text on Hover End */