Simple CSS Image Hover Effects with Text (Code + Demo)

If you want to add Hover Effects to any image then this tutorial is for you. Here I will show you how to create image Hover Effects with Text using CSS and HTML.

 Different types of CSS Hover Effects can be added to the image. One of the notable ones is text. This type of CSS Hover Effects with Text design will have some text in the image. 

However, those texts cannot be seen. You can see it when you hover over the image. A kind of border animation can be seen with this. All these things are maintained only by CSS.

CSS Image Hover Effects with Text

Demo Download



The designs I have already shown will show different types of border animation, color animation, and hover zoom. 

Although this kind of cool image hovers effects you will find a lot on the Internet. But this tutorial will be best for you. Because here I will discuss with you how it was created and how you can add Hover Effects with Text to any of your images. So if you are a beginner and want to know something new then you must follow this tutorial.

CSS Image Hover Effects with Text

As you can see I have added an image to the webpage. When you hover over the image, the background of the image becomes a bit black. Also, all the tests that were hidden can be seen. 

A heading is used here and some paragraphs are used. A kind of border animation has been used with it. This means that when you hover over the image, you will see a border around this image.

Now if you want to create this Simple CSS Image Hover Effects with Text then follow the steps below. If you only want the source code then be sure to use the download button below the article.

I used HTML and CSS to make it. So you create an HTML file and a CSS file. Add the following HTML codes to the HTML file and CSS to the CSS file.



Step 1:

HTML of Image Hover Effects

First I created the basic structure i.e. a box. I have added the image to it. The image can be viewed throughout the box. Then I added a heading and some text. Opacity: 0 has been used for these headings and texts.


<div class="container">
 <div class="box">

  <div class="imgBox">
    <img src="https://ttol.vietnamnetjsc.vn/images/2019/08/14/06/43/nu-dien-vien-phu-phim-Ve-nha-di-con-8.jpg">
  </div>

  <div class="content">
    <h2>Image Hover Effects</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
       tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
       quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
       consequat. </p>
  </div>

 </div>
</div>


Step 1:

CSS of Image Hover Effects with Text

The images have been designed using some of the following CSS and this CSS Image Hover effect has been activated. First I designed the image. Then I added Border Animation.


body {
    margin:0;
    padding:0;
    font-family:sans-serif;
}

.container {
    position:relative;
    width:1200px;
    height:600px;
    margin: 100px auto;
}

.container .box {
    position:relative;
    width:calc(400px - 60px);
    height:calc(300px - 30px);
    background:#000;
    float:left;
    margin: 25px;
    box-sizing:border-box;
    overflow:hidden;
    box-shadow:0 5px 10px rgba(0,0,0,.8);
}


.container .box:before {
    content:'';
    position:absolute;
    top:10px;
    left:10px;
    right:10px;
    bottom:10px;
    border-top:1px solid #fff;
    border-bottom:1px solid #fff;
    box-sizing:border-box;
    transition:0.5s;
    transform: scaleX(0);
    opacity:0;
}

.container .box:hover:before {
    transform:scaleX(1);
    opacity:1;
}

.container .box:after {
    content:'';
    position:absolute;
    top:10px;
    left:10px;
    right:10px;
    bottom:10px;
    border-left:1px solid #fff;
    border-right:1px solid #fff;
    box-sizing:border-box;
    transition:0.5s;
    transform: scaleY(0);
    opacity:0;
}

.container .box:hover:after {
    transform:scaleY(1);
    opacity:1;
}



.container .box .imgBox {
    position:relative;
}

.container .box .imgBox img {
    width:100%;
    transition:0.5s;
}

.container .box:hover .imgBox img {
    opacity:.2;
    transform:scale(1.2);
}



.container .box .content {
    position:absolute;
    width:100%;
    top:50%;
    transform:translateY(-50%);
    z-index:2;
    padding:20px;
    box-sizing:border-box;
    text-align:center;
}

.container .box .content h2 {
    margin: 0 0 10px;
    padding:0;
    color:#fff;
    transition:0.5s;
    transform:translateY(-50px);
    opacity:0;
    visibility:hidden;
}

.container .box .content p {
    margin:0;
    padding:0;
    color:#fff;
    transform:translateY(50px);
    opacity:0;
    visibility:hidden;
}
.container .box:hover .content h2,
.container .box:hover .content P {
    opacity:1;
    visibility:visible;
    transform:translateY(0px);
}


Hopefully, you have been able to create this CSS Image Hover Effects with Text using the code above. If there is any problem then you can definitely let me know.







Comments

Post a Comment

Tell me what you think ??😎

Popular posts from this blog

Splash Image Mask Using HTML and CSS (Free Code)

Image
Here you will learn how to create Splash Image Mask using HTML CSS . The CSS mask image is a kind of simple design where there will be a background color on the image.  Some parts of that background will be transparent. As a result, we get to see some of the images in the background. You can use this CSS Splash Image Mask in any background image.  Here I used HTML in Aklin which added image. Then I designed it with CSS. You can use this CSS mask background image in the background of any project. Below is a preview that will help you to know how this Splash Image Mask CSS was created. See the Pen Splash Image Mask using Html CSS by Shantanu Jana ( @shantanu-jana ) on CodePen . Here HTML and CSS are used to create this CSS mask-image property . For this, you create an HTML and CSS file.  Copy all the code given below and add it to your file. Or use the download button at the bottom of the article to download the code for this Splash Image Mask . HTML Code: The following
Read more

Simple Day Night Toggle Button Using HTML and CSS

Image
Day-Night Toggle Button is a common web element that is often found on websites. This Day Night Toggle Switch in the navigation bar helps to choose the dark and light theme of the website. Currently, the Day And Night Toggle Switch can be seen on almost all major websites starting from Facebook and Instagram. Demo Download This article will help you to know step by step how to create Day Night Toggle Button using CSS . This type of CSS Toggle Button is used to create HTML checkboxes . Here's how to easily create a Toggle Switch using the checkboxes. CSS Day Night Toggle Button Although there are many such tutorials on the Internet. But here I will tell you how to make Day Night Toggle Button and how to implement it in your project. A check box was first created using HTML input to create this button. Then that checkbox is shaped like a button by CSS. To make CSS Day Night Toggle Switch you must have some idea about HTML and CSS. This is not the first time I ha
Read more

Simple RGB Color Generator Using JavaScript & CSS

Image
In this article, you will learn how to create RGB Color Generator using JavaScript. Earlier I shared with you the project of different types of JavaScript color generators . Some projects create background colors, some gradient colors, and some generate random colors.  Using this simple RGB Color Generator you can manually generate RGB color . It is much more modern and professional than other color generators. Here you can mix different colors together and create gradients.  This JavaScript RGB Color Generator project has various control buttons. With the help of which you can create gradients by adding colors in different ways.  JavaScript RGB Color Generator Many times I use different applications or websites to create my gradient color . In that case, such a project will help you. You can get the required code of the color you have created from here. Which you can copy directly and use as CSS code. Below I have given a demo that will help you to know how this project (RGB Color
Read more