Before and After selectors are used to create CSS Hover Effect with Text Over Image. The Opacity property is also used in this tutorial.
Table of Contents
CSS Hover Effects Text Over Image
In this tutorial we are going to see how to create another Cool Hover Effect. We will create two separate sections of text on our Image and the text will appear on mouse hover.
Image Used for Hover Effect
HTML Section
First of all we will create a new file with .html extension. Then we will write basic HTML skeleton with Doctype, head section and body section.
Then we will use image tag inside the anchor tags. Give the source of the image you want to use to src attribute in the image tag. Create a class for anchor tag (text-image in my case) or you can use element selector or its name (a tag) for its CSS.
Now write the two parts of your text in data-title and data-description. I have assigned the heading to data-title and content to data-description. We will use them as content for our before and after selectors.
HTML Code
<!DOCTYPE html>
<html>
<body>
<a class="text-image" data-title="How To Code School" data-description="How To Code School is a platform where you can learn different languages like, HTML, CSS, JavaScript, PHP, AJAX, REACT, ANGULAR JS and many more. You can also learn about different CMS that are widely used like wordpress, shopify etc. You can also find useful articles, tutorials, tips and tricks on HTML, CSS, JavaScript and all these wonderful languages.">
<img src="howtocodeschool.png">
</a>
</body>
</html>
CSS Section
Now Create another file for styling with .css extension. I have set the padding and margin to 0, font-family to "Lato" and background-color to dark grey.
body
{
padding: 0;
margin: 0;
font-family: 'Lato';
text-align: center;
background-color: #2e2e2e;
}
Position Property
The important thing here is to note that position property doesn't work well with inline elements and that is why, I changed the display type of anchor tag to inline-block level element. Then I have set its position to relative.
.text-image
{
display: inline-block;
position: relative;
margin: 20px 0px;
}
Before Selector
Set the position property to absolute (it will change with respect to our anchor tag). Width to 100%, position from top to 0 and height to 40% (40% of the total height of your image). Opacity is set to 0 and transition of 1 second is applied for the opacity, which means the opacity will change from 0 to 100% in 1 sec and vice versa. The content is given the variable (data-title) we created earlier in our anchor tag.
.text-image::before
{
position: absolute;
width: 100%;
left: 0;
opacity: 0;
transition: opacity 1s;
content: attr(data-title);
top: 0;
height: 40%;
background-color: #c20303;
color: #ffd543;
font-size: 34px;
font-weight: bold;
}
After Selector
It's position is also set to absolute, width 100% and left position to 0. The top position is set to 40% (where before selector ends because if you remember it's height was set to 40% ). Its height is set to 60% to cover the rest of the Image. Content is set with the data-description variable. The opacity is set to 0 and transition property is set to 1s for the smooth transition.
.text-image::after
{
position: absolute;
width: 100%;
left: 0;
opacity: 0;
transition: opacity 1s;
content: attr(data-description);
top: 40%;
height: 60%;
background-color: #ffd543;
color: #c20303;
font-size: 24px;
font-weight: bold;
}
Then the opacity of both after and before selectors are changed on mouse hover and that's it.
.text-image:hover::before , .text-image:hover::after
{
opacity: 1;
}