Text Over Image Hover Effect - Css Hover

Text Over Image Hover Effect

Before and After selectors are used to create CSS Hover Effect with Text Over Image. The Opacity property is also used in this tutorial.

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

Css Hover Effects Text Over Image

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.


<!DOCTYPE html>
<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">

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.

    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.

    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.

    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.

    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;

Video Tutorial

Social Media Menu with Popup Tooltip using HTML and CSS Horizontal Navigation Menu with HTML and CSS Responsive Sidebar Menu with CSS and JavaScript Cool CSS Button with Hover Animation Pure CSS Custom Radio Buttons Custom Emoji Radio Buttons with CSS Color Picker Design with HTML CSS and JavaScript Custom Radio Buttons with CSS Engraved HTML Buttons With CSS Neumorphic Buttons Design with CSS Cool Profile Card Design with HTML CSS Neumorphic Search Bar Design with HTML and CSS Simple Login Form with Placeholder Animation Pure CSS Button with Folded Corner Background Color Change Slider with HTML CSS and JavaScript 404 Page Not Found Template Design with HTML and CSS Movies Blog Card Design with HTML and CSS Simple CSS Border Animation with before and after Selector Custom Social Select Dropdown Menu with CSS and JavaScript Facebook Offline and Online Notification with CSS and JS New Year 2022 Text Animation with CSS and JS Change Placeholder Color using CSS Custom Select Tag DropDown with CSS and JavaScript Simple Price Range Slider With HTML CSS and JavaScript Profile Card With Hover Effect using HTML and CSS Circle With Two Colors using CSS Simple FAQ Accordion With HTML CSS and JavaScript